HOME » CSS

本の目次のような画面をCSSで作成 - Menu List Design

2009-02-13(金) 12:52
Category : CSS

CSS: Menu List Designで本の目次のようなメニューの作り方が公開されています。



mokuji
デモ




CSSだけで、こんなことができるってというのはすごいです。
本を読むようなサイトを作成するときに使えそうですね。


本の目次のような画面をCSSで作成 - Menu List Design

No Comment

ブラウザを判別して個別にCSSを読み込ませる - Browser Detection with XSLT

2009-01-28(水) 15:27
Category : CSS

XSLTを読み込ませることでブラウザを判別して、ブラウザごとにCSSを読み込ませる方法がBrowser Detection with XSLTにて公開されています。


xslt


まず、Browser Detection with XSLTにて公開されているc-cond-html.xslをダウンロードして、以下の記述を先頭に記載します。


<xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="cond-css.xsl" type="text/xsl"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
	[<!ATTLIST link dr:select CDATA #IMPLIED><!ATTLIST style dr:select CDATA #IMPLIED>]>


次に、HTMLには以下のようにdr:select=”判別ブラウザ”の指定すればブラウザを判別することが出来ます。

<style type="text/css" dr:select="IE 6">div {background-color: #6666CC}</style>



複数指定も可能です。

<style type="text/css" dr:select="IE 6, FF 1">div {background-color: #6666CC}</style>


判別ブラウザに使用されている文字列は以下の文字列が使用可能です。
  • IE 6, IE
  • IE 7, IE
  • IE 8, IE
  • Firefox 1 (1.0+), FF 1, Firefox, Gecko 1.7, Mozilla 1.7, Camino 0.8, Camino, Netscape (7, 8 )
  • Firefox 2 (1.5+, 2.0+), FF 2, Firefox, Gecko 1.8, SeaMonkey 1, SeaMonkey, Camino 1, Camino, Epiphany 2.14, Epiphany 2.20, Epiphany, Flock (1.0.9, 1.1.2), K-Meleon (1.1.4), Kazehakase (0.4.3, 0.5.2), Netscape (9)
  • Firefox 3, FF 3, Firefox, Gecko 1.9, SeaMonkey 2, SeaMonkey, Camino 2, Camino, Epiphany 2.22, Epiphany, Minefield (3.0) Safari 1 (1.3+), Safari 2 (2.0.2+), Safari
  • Safari 3, Safari
  • Opera 9, Opera
  • Opera 9.50, Opera
  • X-Smiles
  • Unknown browser
  • Error: no XSL-transformation!

以上で、ブラウザごとに読み込むCSSを変更することができます。


すばらしい！非常に簡単ですね。


ブラウザを判別して個別にCSSを読み込ませる - Browser Detection with XSLT

No Comment

マウスオーバーでポップアップする円形メニュー

2009-01-23(金) 12:00
Category : CSS

circle menu
メニューにこだわると見た目がアップしますね。

今回紹介するのは円形メニューをCSSで実装した例です。
A circular menu with sub menusにてサンプルが公開されています。



まぁ、動くところを見てください。






これはすごいですね。
こんなきれいに作りこまれたショッピングサイトがあったら思わず買ってしまいそうです。

A circular menu with sub menus

No Comment

ブラウザの下から動かないフッター - CSS Sticky Footer

2009-01-23(金) 07:43
Category : CSS

2009-01-23_0736

画面サイズに関わらず、画面の一番下にフッターを表示させるCSS Sticky Footerをご紹介します。




以下の動画のように画面サイズに合わせてフッターが移動します。







ぱっと見たときにフッターが表示されるのとされないのでは大きな違いなので、うまく使えば非常に効果的かもしれませんね。


ブラウザの下から動かないフッター - CSS Sticky Footer

No Comment