2009年7月アーカイブ

前回、CSSのみでロールオーバー効果のメニューを作る方法を紹介しましたが、カーソルを合わせたときの画像を、カーソルを合わせた瞬間に呼び出しているので、一瞬ですが読み込みのためちらつきが発生します。

それを回避するために、カーソルを合わせてたときに表示される画像を、ページが表示されたときにあらかじめ呼び出しておく方法があります。

使用する画像は以下のものです。メニューで使用する画像がすべてくっついています。

ロールオーバー用メニュー画像

それでは、サンプルとソースコードを見ていきましょう。

サンプル

(X)HTMLコード

<ul class="menu">
<li class="menu1"><a href="">メニュー1</a></li>
<li class="menu2"><a href="">メニュー2</a></li>
<li class="menu3"><a href="">メニュー3</a></li>
</ul>

CSSコード

ul.menu  {
   margin:0;
   padding:0;
}

ul.menu li {
   float:left;
   text-indent:-9999px;
   overflow:hidden;
   list-style:none;
}

ul.menu li a {
   display:block;
   width:150px;
   height:30px;
}

li.menu1 a {
   background:url(menu.gif) 0 0 no-repeat;
}

li.menu1 a:hover {
   background:url(menu.gif) 0 -30px no-repeat;
}

li.menu2 a {
   background:url(menu.gif) -150px 0 no-repeat;
}

li.menu2 a:hover {
   background:url(menu.gif) -150px -30px no-repeat;
}

li.menu3 a {
   background:url(menu.gif) -300px 0 no-repeat;
}

li.menu3 a:hover {
   background:url(menu.gif) -300px -30px no-repeat;
}


/* モダンブラウザ(Firefox Opera Safari)対策 */
ul.menu:after {
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   font-size:0;
}


/* Win版IE7とMac版IE5対策 */
ul.menu {
   display:inline-block;
}


/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html ul.menu {
   height:1px;
}

ul.menu {
   display:block;
}
/* End hide from IE-mac */

backgroundプロパティで、表示する画像をずらしています。右や下にずらす場合はマイナス表示をしないといけないので注意です。

メニューを横並びにするのにfloatを使用している都合上、リスト以降の要素の回り込みを解除するためにclearfixハックを使っています。CSSソースコードの後半部分です。

CSSを記述する際、余白やインデントに関して、自分なりあるいは複数で管理する場合はプロジェクト単位でルールを決めておくと、見やすさ(可読性)が向上します。

ちなみに私の書き方は以下のとおりです。

CSSコード

selecter {
   property:value;
}
  1. selecter名と「{」の間に半角スペースを空ける
  2. propertyの前に半角3文字分スペースを空ける
  3. propertyおよびvalueと「:」の間にはスペースを空けない
  4. valueと「;」の間にはスペースを空けない
  5. propertyがひとつしかない場合でも、必ずvalueの後に「;」はつける

基本的にスペースは付け忘れが多いため、空けないようにしているのですが、selecterの後には必ずスペースを入れるようにしています。これは、CSSファイル内でselecterを検索する際、スペースを空けておくと便利なことが多いからです。

CSSを記述する際、プロパティの順序を自分なりに決めておくと、二重に指定したりするミスも減り、メンテナンスも楽になります。

私のプロパティの指定順序を紹介します。ワイヤーフレームはidを使い、それ以外にはclassを使うようにしています。ご自分のメンテナンスのしやすい並び順を模索してみてください。

1.ワイヤーフレームに関するプロパティ

CSSコード

div#name {
/* 表示・配置に関する設定 */
   position: ;
   top: ;
   right: ;
   bottom: ;
   left: ;
   z-index: ;
   float: ;
   clear: ;
   text-align: ;
   background: ;

/* 大きさ(ボックス)に関する設定 */
   min-width: ;
   width: ;
   min-height: ;
   height: ;
   max-height: ;
   margin: ;
   padding: ;
   border: ;
}

2.一般的なclass属性

CSSコード

.name {
/* 表示・配置に関する設定 */
   display: ;
   position: ;
   top: ;
   right: ;
   bottom: ;
   left: ;
   z-index: ;
   float: ;
   clear: ;
   overflow: ;
   visibility: ;

/* 大きさ(ボックス)に関する設定 */
   min-width: ;
   width: ;
   max-width: ;
   min-height: ;
   height: ;
   max-height: ;
   vertical-align: ;
   margin: ;
   padding: ;
   border: ;

/* テキスト・背景に関する設定 */
   color: ;
   font-family: ;
   font-style: ;
   font-weight: ;
   font-size: ;
   text-indent: ;
   text-align: ;
   text-decoration: ;
   letter-spacing: ;
   line-height: ;
   background: ;
}

その他の要素特有のプロパティ、例えばul要素の「list-style-type」などは、スタイルの最後に記述するようにしています。

参考サイト

例えば、リストで作成したメニューをfloatで横並びにした場合、親要素(ここではul)の内容が表示されません。ulの内容物が表示されないと、背景やborderが表示されなかったり、marginが効かなかったりして不便です。

その解決方法としては以下の4つがあります。

  1. 親要素にもfloatを指定する
  2. 親要素にoverflowを指定する
  3. 親要素に高さを指定する
  4. 親要素にclearfixを指定する

1.親要素にもfloatを指定する

親要素に「float:left;」を指定することで、親要素の高さが算出され、内容物が表示されます。ただし、floatした次の要素は回り込まれたままなので、解除するには「clear:both;」を次の要素に指定する必要があります。

2.親要素にoverflowを指定する

親要素に「overflow:hidden;」を指定することにより、高さが算出されます。回り込みは解除されています。IE6は「zoom:1;」を同時に指定しないと高さが算出されないので注意です。

3.親要素に高さを指定する

親要素の高さが固定の場合は、heightで高さを指定するとよいです。この場合、次の要素は回り込みは解除されていないのですが、指定した高さが内容物より大きければ、次の要素は下段に表示されます。

4.親要素にclearfixを指定する

clearfixというハックを使用することで、親要素の高さが算出されます。比較的古いブラウザにも対応しているので便利です。clearfixは次の要素の回り込みを解除します。

CSSコード

/* モダンブラウザ(Firefox Opera Safari)対策 */
.clearfix:after{
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   font-size:0;
}

/* Win版IE7とMac版IE5対策 */
.clearfix{
   display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html .clearfix{
   height:1px;
}

.clearfix{
   display:block;
}
/* End hide from IE-mac */

各方法で若干、余白や表示領域に差が出ますので、CSSで調節してください。

DOCTYPE宣言によってCSSのレンダリングが変わるのですが、以下の3つのモードがあります。

  1. 完全標準モード(Full Standards Mode)
  2. ほぼ標準モード(Almost Standards Mode)
  3. 後方(過去)互換モード(Quirks Mode)

これらの違いを見ていきます。

1.完全標準モード(Full Standards Mode)

仕様に則ったとおりにレンダリングされます。ここでいう仕様とはW3C標準仕様のことで、以下の仕様書のことを指します。

2.ほぼ標準モード(Almost Standards Mode)

完全標準モードとほぼ標準モードの違いは1点だけです。

画像の表示に違いがあります。完全標準モードでは画像のvertical-alignプロパティの初期値はbaselineなのですが、ほぼ標準モードではvertical-alignプロパティの値はbottomとなります。

vertical-alignプロパティの値がbaselineであると、画像の下に空白が生じます。この理由は当blogの以下の記事を参考にしてください。

3.後方(過去)互換モード(Quirks Mode)

完全標準モードと後方互換モードにはかなり違いがあります。

最も知られているのはボックスモデルの違いです。ボックスにwidthとpaddingとborderを指定した場合、完全標準モードでは横幅 = width + padding + borderになるのに対し、後方互換モードでは横幅 = widthとなってしまいます。

その他にもいろいろあるのですが、量が多いのでここでは割愛します。以下のサイトなどを参考にしてみてください。

DOCTYPEスイッチ一覧表

DOCTYPEスイッチによるモードの違いを表にしたものです。以下のサイトをご覧ください。また、同時に「表示モードごとの CSS 解釈検証表」も載っているので合わせて参考にしてください。

最近のモダンブラウザは、W3Cで勧告されていないCSSでも先行して実装しています。それによりソースコードが簡潔でよりリッチなデザインが可能となりました。

ただし注意しなければならないことは、勧告されていないCSSプロパティや独自プロパティはプレフィックス(接頭辞)を指定しなければなりません。つまり、IEの場合は先頭に「-ms-」が、Mozilla系では「-moz-」が、Operaでは「-o-」を、SafariやChromeの場合先頭に「-webkit-」はをつけなければなりません。

これは、CSS2.1でも定められていることらしいです。

IEでは独自実装でもプレフィックスがついていなかったのですが、IE8からプレフィックスの使用が可能になったようです。

それぞれのブラウザの独自実装CSSプロパティは以下を参考にしてください。

Mozilla系
IE8

参考サイト

CSS3は2009年7月8日現在、Working Draftの段階ですが、モダンブラウザでは先行して実装されています。

Webサイトを制作する際、IEがネックとなっていますが、IE8ではよりWeb標準に近づいた動作をしますので、積極的に新しいCSSに挑戦するのも面白いと思います。

さて本題ですが、CSS3を含むCSSセレクタを一覧にしました。ご参考ください。

セレクタパターン意味セレクタの種類定義されたCSSレベル
* すべての要素を対象にするセレクタユニバーサルセレクタ2
E E要素に対してスタイルを適用タイプセレクタ1
E[foo] foo属性を持つE要素に対してスタイルを適用属性セレクタ2
E[foo="bar"] barという値のfoo属性を持つE要素に対してスタイルを適用属性セレクタ2
E[foo~="bar"] barという値を1つでも含んでいるfoo属性を持つE要素に対してスタイルを適用属性セレクタ2
E[foo^="bar"] barという値から始まるfoo属性を持つE要素に対してスタイルを適用属性セレクタ3
E[foo$="bar"] barという値で終わるfoo属性を持つE要素に対してスタイルを適用属性セレクタ3
E[foo*="bar"] barという文字列を含むfoo属性を持つE要素に対してスタイルを適用属性セレクタ3
E[hreflang|="en"] en(言語)という値のhreflang属性をもつE要素に対してスタイルを適用属性セレクタ2
E:root ドキュメント内のルート要素である E という要素にスタイルを適用(HTMLの場合はhtml)擬似クラス3
E:nth-child(n) 親要素の n 番目の子要素である E 要素にスタイルを適用擬似クラス3
E:nth-last-child(n) 親要素の 最後から数えてn番目の子要素である E 要素にスタイルを適用擬似クラス3
E:nth-of-type(n) 兄弟関係にある n 番目の E 要素にスタイルを適用擬似クラス3
E:nth-last-of-type(n) 兄弟関係にある 最後から数えてn 番目の E 要素にスタイルを適用擬似クラス3
E:first-child 親要素の最初の子要素である E 要素にスタイルを適用擬似クラス2
E:last-child 親要素の最後の子要素である E 要素にスタイルを適用擬似クラス3
E:first-of-type 兄弟関係にある最初の E 要素にスタイルを適用擬似クラス3
E:last-of-type 兄弟関係にある最後の E 要素にスタイルを適用擬似クラス3
E:only-child 親要素の唯一の(兄弟関係を持たない) 子要素であるE要素にスタイルを適用擬似クラス3
E:only-of-type 兄弟関係にあるE要素にスタイルを適用擬似クラス3
E:empty テキストノードも含めて子要素を持たないE要素にスタイルを適用擬似クラス3
E:link未訪問のハイパーリンクのソースのアンカーであるE要素にスタイルを適用リンク擬似クラス1
E:visited 訪問済みハイパーリンクのソースのアンカーであるE要素にスタイルを適用リンク擬似クラス1
E:activeクリックなどでアクティブになったE要素にスタイルを適用ダイナミック擬似クラス1
E:hoverマウスポインタで指し示されたE要素にスタイルを適用ダイナミック擬似クラス1
E:focus タブキーなどでフォーカスされているときのE要素にスタイルを適用ダイナミック擬似クラス2
E:target 参照URIの目標であるE要素にスタイルを適用ターゲット擬似クラス3
E:lang(fr) 前方一致で fr という lang 属性値を持つE要素にスタイルを適用言語擬似クラス2
E:enabled有効な (:enabled)E要素にスタイルを適用UI 要素状態擬似クラス3
E:disabled 無効な (:disabled)E要素にスタイルを適用UI 要素状態擬似クラス3
E:checked ラジオボタンあるいはチェックボックスがチェックされた状態のときにE要素にスタイルを適用UI 要素状態擬似クラス3
E::first-line E要素の最初の 1行にスタイルを適用擬似要素1
E::first-letter E要素の最初の 1文字にスタイルを適用擬似要素1
E::selection ユーザが選択したE要素の一部にスタイルを適用擬似要素3
E::before E要素の内容の前にスタイルを適用擬似要素2
E::after E要素の内容の後にスタイルを適用擬似要素2
E.warning warningというクラス名を持つE要素にスタイルを適用クラスセレクタ1
E#myid myidというID名を持つE要素にスタイルを適用IDセレクタ1
E:not(s) sでないセレクタを持つE要素にスタイルを適用否定擬似クラス3
E F E要素と孫子関係にあるF要素にスタイルを適用子孫セレクタ 1
E > F E要素と直接の子関係にあるF要素にスタイルを適用子セレクタ2
E + F E要素と弟関係にあるF要素にスタイルを適用隣接セレクタ2
E ~ F E要素が前にあるF要素にスタイルを適用間接セレクタ3

参考サイト