その昔はJavaScriptを利用していたが、CSSのbackground-position属性の位置情報を変更することで、CSSで置き換えることが一般的になった。
CSSスプライトが紹介される以前は、通常時とマウスオーバー時の画像を対にしてスライスする手法が主だったが、
CSSスプライトではさらに一歩進め、ナビゲーション全体で利用する通常時、マウスオーバー時の画像を1枚の画像にしてしまい、やはりCSSにより必要な画像を表示させる。

なぜCSSスプライト？

CSSスプライトはなぜこれまでの手法よりも優れているのだろうか？
大きな1枚画像はページのロード時間を、複数に分けるより遅くしないだろうのか？

実はほとんどのウェブサイトではおよそ20％をHTMLのロードに、残り80%を画像やCSS、JavaScriptなどのコンポーネントをロードするのに時間がかかっている。

Yahoo!のパフォーマンス改善チームのTenni Theurerによると、
HTTPのリクエスト回数を減らすことが、パフォーマンスの改善にもっとも効果的である、そうだ。

つまり、複数枚にスライスされた大きな画像は、それぞれの画像のロードに時間がかからないというだけで、
ページ全体で考えると複数のHTTPリクエストを生むことになり、結果的にページのロードに時間がかかることになる。

では、コードを。

<div class="navi">
    <ul>
        <li><a href="#1" class="home"></a></li>
        <li><a href="#2" class="yourCategory1"></a></li>
        <li><a href="#3" class="yourCategory2"></a></li>
        <li><a href="#4" class="yourCategory3"></a></li>
    </ul>
</div>

例として、HTMLは上記を利用する。

div.navi li a {
    background-image:url(../img/image_nav.gif);
    /* スプライト画像の呼び出し */
}
    div.navi li .home {
        background-position: 0px 0px;
    }
    div.navi li.home a:hover.home  {
        background-position: 0px -32px;
    }
    ......

最後の方は省略したが、アイデアは理解できるだろう。
Aタグにスプライト画像を背景として呼び出し、
各li a.homeなどの部分でその背景の必要な部分を読み込む。
という考え方だ。

対になるように画像をスライスするよりはCSSのコード自体もすっきりする。
ナビゲーション以外にも、ブロックごとのアイコンの表示などにも利用でき、意外と利用範囲は広い。

List ApartのCSS Sprites: Image Slicing’s Kiss of Deathや、CSS-TricksのCSS Sprites: What They Are, Why They’re Cool, and How To Use Them
にて、いくつかの例を見ることが出来る。

でも、background-positionの値が面倒そう……

その部分は確かに面倒だ。
そんな面倒を解決してくれるのが、
Website Performanceにて公開されている、CSS Sprite Generator。

このオンラインツールは、スライスした画像をZipファイルにしてアップロードすると、
スプライト画像を作成してくれる上に、面倒なbackground-positionの値を指定も出力してくれる。
さらに、Operaでのバグの修正までしてくれるし、CSSのクラス名の指定もかなり自由度の高い形でできる。

その上、ソースコード(PHP)まで公開され、BSDライセンスにて自由に利用できるので、オフライン時でも利用できる。
サイト自体は英語が主だが、翻訳を募集していたので、先日翻訳してファイルを送信した。
近い内に日本語でも利用可能にしてくれることだろう。

2008-8-23、日本語訳の実装が終了したようです。
もし、妙な日本語になっている場合はご指摘ください。

ヘルプページとCSSスプライトとは？ページの翻訳のお願いも作者からいただきましたので、
合わせて翻訳します。

CSSでカラムheightを合わせる方法

通常CSSでは左図のように、mainカラムとsidebarカラムの高さは合わない。それぞれのカラムがもつ内容がそれぞれのカラムの高さを決めるからだ。

通常であれば、それぞれの高さが異なっていても気にならないが、背景画像がある場合や、カラムごとに異なる背景色を敷いている場合などレイアウトの基本構造的に「ケツをあわせ」ないと気になる。

まずはHTMLから

<div id=”container”>
    <div class=”main”>メインカラム</div>
    <div class=”sidebar”>サイドバー</div>
</div>

このように、高さを合わせたいカラムをタグで囲むことになるが、clearfixする必要があるので、追加のタグにはならないだろう。

それではCSS

#container {
width:340px;
height:auto;
overflow:hidden;
}
#container .main {
float:left;
width:160px;
padding-bottom: 30000px;
margin-bottom: -30000px;
}
#container .sidebar {
float:right;
width:160px;
padding-bottom: 30000px;
margin-bottom: -30000px;
}

としてやればOK。

それぞれのカラムに対して、padding−bottomを絶対安全と思えるくらい追加し、その分をmargin-bottomで割り引く。
これら2つのカラムを#containerで囲み、overflow:hiddenしてやる。

いわずもがなだが、.mainや.sidebarにmarginやpaddingの他の値を入れたい場合には注意が必要だ。

ダブルマージンフロートバグとは？

floatした要素に対して、同じ方向にmarginを与えると、marginが2倍になってしまう。
というバグ。

図解すると上記の様になる。

.content {
    float: left;
    margin-left: 30px;
}

というようにすると、IE5〜6では

.content {
    float: left;
    margin-left: 60px;
}

というように解釈される、ということだ。

見落としがちなのは、margin: 10px 0 0 30px；というように省略式で書いた場合。
もちろん、この場合もmargin-left部分の値は倍になってしまう。

修正方法

修正は意外と簡単。

.content {
    float: left;
    margin-left: 30px;
}

この例の場合なら、

.content {
    float: left;
    margin-left: 30px;
    display: inline;
}

というように、display: inline;を追加すれば解決する。

例えば、アンダースコア(_)ハック、ハイフン(-)ハック、voice-familyハック、バックスラッシュ(/)ハック、スターHTMLハック(* html)など、様々なハックが利用できなくなった。

マイクロソフトはこれらハックの使用を抑制し、その代わりにコンディショナルコメントの使用を推奨している。
コンディショナルコメントはIEでのみパースされるコメントで、IE5以上であれば動作する。

コンディショナルコメントとは

<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->

というようなコメントを指す。
上記のコードだと、もしIEであれば、iecss.cssをロードするという命令になる。

もちろんHTMLのコメントであるため、CSS文書内では利用できない。
つまり、IE7に対して何らかのCSSハックを行う場合は、別のCSSを用意しなければならない。

先ほどの例だとIEに対して全て、という命令になるがIE7だけに限定したい場合は、

<!--[if IE7 ]>
  <link href="iecss7.css" rel="stylesheet" type="text/css">
<![endif]-->

とすればいい。

IE5〜IE６まではiecss5-6.cssを、IE7はiecss6.cssを読み込みたいという場合は

<!--[if lte IE 6]>
  <link href="iecss5-6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if lte IE 7]>
  <link href="iecss7.css" rel="stylesheet" type="text/css">
<![endif]-->

とすればいい。
[if lte IE 6]は、IE6未満に対して〜という意味だ。lteはLess Than or Equalの略。

ちなみに

<!--[if (IE 5)|(IE 5.5)|(IE 6)]>
  <link href="iecss5-6.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if lte IE 7]>
  <link href="iecss7.css" rel="stylesheet" type="text/css">
<![endif]-->

というようにしても同じ意味だ。若干面倒なので、普段はこんなことはする必要はないだろう。
｜はORという意味だ。

ほかにも、

• gte(greater-than or equalの略、以上か同じ場合という意)
• !(Notオペレーター、でない場合という意)

というオペレーターも存在する。

実はIE7だけをターゲットにするCSSハックも存在するが、どのハックもCSSバリデートしない。
例えば、

>body {}

はIE7のみをターゲットにできるし、

html* {}

ならIE7未満すべてをターゲットできる。

はたまた

*:first-child+html {}

というのもIE7のみで、

*:first-child+html {} * html {}

ならIE7未満すべて。

もちろん、IE8になったときにこれらハックが通用するかどうかは定かではない。
IE7のデビュー時にそれまで様々利用してきたハック達を修正するのに苦労した私はマイクロソフトの推奨に準拠して、コンディショナルコメントを利用することをオススメする。

CSSセレクターとはHTML文書中、どのタグにスタイルを宣言するかを確定させるための仕様。
この仕様をしっかりと理解しないと、IDやクラスだらけで、セマンティックとはほど遠いマークアップを書かなければならなくなり、同時にCSSも無駄にセレクターが並んでしまって、可搬性や可読性に欠けるCSSとなってしまう。

今回はそのセレクターの仕様の内、もし宣言が重複したら、どの宣言が優先されるのかを判断する方法を紹介しよう。

CSS宣言の優先順位づけ

CSSの宣言はまず、

1. タグ内にstyle=”"
2. head内にstyle
3. linkで外部呼び出し

上から順に優先順位が高い。

つまり、style.cssというファイルで仮に
h2 { color: red; }
として、
style
h2 { color: blue; }
/style
と宣言し、さらに
h2 style=”color: black;”
とすると、このh2のフォントカラーは黒になる。

では、本題のCSSセレクターの計算式

#ID = 100
.class = 10
tag = 1

というように数字を割り当て、足し上げで数が多いほうが優先される。
例外は!important。!importantは、先ほどの記述場所による優先順位も、計算による優先順位も無視して、最優先される。

例1:

• #ID div.class ul li = 100 + 1 + 10 + 1 + 1 = 113
• #Id div.class li = 100 + 1 + 10 + 1 = 112

記述ミスのようにみえるくらい、同じタグに対して宣言しているが、この様に書いた場合、上の例の方が優先されるわけだ。
ではもう1例紹介しよう。

例2:

• #ID #Second = 100 + 100 = 200
• #ID .class div.class a.class = 100 + 1 + 10 + 1 + 10 = 122

とてもシンプルな考え方なので、何度か自分でもセレクターを
数字に置き換えてみると覚えてしまうだろう。

テキストばかりでピンとこない場合は、
CSS: Specificity Wars
Star Warsになぞらえて、ビジュアルで解説しているのはこちら。

とくに動的なサイトを構築する際に、ある特定のブロック要素を最低でも×px以上確保しておきたいという場合など、
min-heightが活躍する場面は枚挙に暇がない。

そんな便利なmin-height、そしてついでにmin-widthの属性をIEでもきちんと設定できるようになるバグFixを紹介。

とても簡単なバグFixなのでちょっと拍子抜けするかもしれない。

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

コードの説明を加える必要もないくらいシンプルな方法だ。
min-heightを設定したい要素に上記のように設定してやればOK。
もちろん、高さの指定は自由だ。

min-widthのほうもまったく同じ

selector {
  min-width:500px;
  width:auto !important;
  width:500px;
}

参考サイト
Min-Height Fast Hack

.clearfix { display: inline-block; }
.clearfix:after {
     clear: both;
     content: " ";
     display: block;
     font-size: 0;
     height: 0;
     visibility: hidden;
     }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

なぜFloatはクリアしなければならないのか？

Floatした要素をクリアする要因はいくつかあるが、ここではコラムレイアウトを実現するためのFloatをクリアする理由を説明しよう。

例えば2コラムレイアウトをCSSで作成するために

<div id="header"></div>

<div id="container">
  <div id="left"></div>
  <div id="main"></div>
  <div id="right"></div>
</div>

<div id="footer"></div>

というようなHTMLとなったとする。
仮にdiv#leftにfloat:left;、div#rightにfloat:right;を指定したとする。

• 親要素(Parent Element)が例のように子要素(Child Element)にfloat要素のみを含む
• div#containerには高さをあらかじめ設定できない(ブログなどは通常設定できない)

そんな場面はよくあるが、
この場面でdiv#containerはクリアしなければ、div#containerのheightは子要素のheightと連動しない。
div#containerが単なるボックスである場合、このバグには気がつかないが、背景を敷いていたり、ボーダーを引いていたりすると、表示がおかしくなってしまう(Mozilla系ブラウザバグ)。

具体的には上図のような状態になる。

.clearfixの説明

それでは、10数行のCSSがこの仕様にどのように対応しているのか見ていこう。

1. display: inline-block;はIE/Macにおいて、widthを指定しないでfloatするとwidth:100%と同等に指定されるbugを修正。
2. .clearfix:after〜では擬似クラス:afterを利用し、content: ” “;でスペースを挿入、そのスペースを、display:blockでブロック要素化(clearはブロックでなければ適応できない)、そしてclear:bothでクリア。念のため、font-size: 0;、height: 0、visibility:hidden;で追加したスペースが余分なスペース表示とならないように設定。(擬似クラスはIEではサポートしていない)
3. コメントバックスラッシュハックを利用しIE/Macから次行以降をコメントアウト
4. IEのみを対象に(スターHTMLハック)、height: 1%;でIEで子要素がfloat要素をのみを含む場合でも親要素のheightを調整する仕様を動作させる(ホーリーハック)、このハックはIEのギロチンバグも修正する。
5. 1行目で指定したdisplay: inline-block;を IE/Winにて{display: block;}で上書きする

参考サイト

• How To Clear Floats Without Structural Markup
• Lessons Learned Concerning the Clearfix CSS Hack
• CSS Float Theory: Things You Should Know
• Floatutorial

実は私はCSSの辞典を一冊も買ったことがない。
CSSとHTMLに関しては、ウェブの辞書を利用することが多い。
何しろどちらの開発期間中もブラウザは開きっぱなしだからだ。

そんな際よく利用するのが、
SitePoint CSS Reference
英語のサイトだが、実際に自分で操作できるLiveデモやHackの紹介もあり、かなり詳細な仕様に関してもわかりやすく紹介されている。
プロパティ名での検索も可能で、ふと忘れしてしまった文法などを調べたりする。

日本語圏では、スタイルシート リファレンスやとほほのスタイルシート入門などで代替できるはず。

CSS仕様詳細

• CSSクックブック―Webデザインのための活用テクニック集
• CSS完全ガイド

2冊とも若干古いバージョンながら、オライリーらしくかなりマニアックな部分にも言及している。
初心者がいきなり購入すると挫折しかねないくらいのマニアックぶりなので、中上級者向け。

私自身はウェブでCSSの基本を学び、この2冊を何度も繰り返し読み返した。とくにEric Meyer著のCSS完全ガイドに関しては、最新版である3rdエディションも洋書で購入した。
残念ながら3rdエディションはまだ日本語版が発売されていないが、2ndエディションでも十分な知識を得ることができるだろう。

初心者はまず、標準Webデザイン講座 スタイルシート (標準Webデザイン講座)などの実践的な本を購入し、実際にコーディングをしながら基礎を学ぶことが最短だろう。

CSSに限らずだが(CSSはプログラミング言語ではないが)、デバッグするためには問題を発見しなければならない。
そういう意味ではCSSでのデバッグは比較的簡単かもしれない。

対象ブラウザでのアウトプットがコーディングした通りであるかどうか？
それだけのことでバグを発見することができる。

では、デバッグの後半パート、修正するための必須ワークフローを紹介しよう。

ステップ1 - HTML、CSSのソースコードの検証(バリデート)

1. HTMLのバリデート(http://validator.w3.org/)
2. CSSのバリデート(http://jigsaw.w3.org/css-validator/)

HTMLソースの検証では、"Box Model - IE6 と IE7"で紹介したDOCTYPE宣言などに注意しつつ、初歩的なタグの閉じ忘れ、属性(attribute)のクォート(”"か”)閉じ忘れなど、そもそものHTMLでのミスを確認する必要がある。
CSSソースの検証も同様だ。

きっとIEバグが原因だ、と思い込むことが非常に多いので欠かすことのできないステップ

ステップ2 - デバッグ
忘れてはいけないのは、デバッグするためにはバグを見つけ出す必要がある。
CSS、HTMLともに、バグだけが残るようにソースコードを改変するという手法が基本。
具体的には、

1. まず、大きなセクションをカットし、確認
2. バグがなくなる様であれば、元に戻す。バグがまだ残っていれば次のセクションへ
3. バグがなくなった場合は、セクションを分割し、カットし、確認

というようなフローでバグのあぶり出しをする。

CSSの場合、IE、Firefox、Safariなど対応するべく環境が複数個存在するため、
まずはFirefoxからスタートすることをオススメする。
比較的バグの少ないブラウザからデバッグしていくほうが、ブラウザ固有のバグを見つけ出しやすくなる上、
対処も楽にできるからだ。

ステップ3 - デバッグツール
このステップまでにはバグは限りなく少なくなっていることだろう。
実際には、ステップ2とステップ3には明確な境界はなく、デバッグツールを使いながら、ステップ2を行うことが多いだろう。
では、ブラウザごとにデバッグツールを紹介しよう。

• Firebug　CSSデバッグにおいてFirebugほど革命的なアプリケーションは存在しない。ボックスモデルのビジュアルフィードバックや適応されているCSSの指定の確認などができる。とくにCSSの指定のうち、よくバグとなる継承している指定も確認できるのが便利
• Web Developer　こちらもFireFoxのアドオン。FireFoxから直接バリデートなど行えたり、ブロック要素のアウトラインを確認できたりできる
• DebugBar　IE環境に置いてのFirebugとほぼ同期能を提供しているDebugBar。日本語にも対応しており、IEでのデバッグに欠かせない
• CSS Debug Toggle　IEで利用できるブックマークレット。FirefoxのWebDeveloperの機能のうち、ブロック要素のアウトラインをID名、Class名とともに確認できる
• XRAY　IE6以上、FireFoxでも動作するブックマークレット、こちらはクリックした箇所のブロック要素に含まれる指定を確認できる

Safariでのデバッグツールについてはマックユーザではないので、紹介できないが、Safariにはデフォルトでデバッグツールが備わっているということなので、調べてみてほしい。

かなり駆け足でCSSデバッグのフローについて紹介した。
近いうちに、各デバックツールの利用方法なども紹介するつもりだ。

Box Modelについてすでに3回目のエントリになったが、CSSでのレイアウト構築ではもっとも重要な概念なので、何度繰り返しても多すぎることはないだろう。

今回は究極のBox ModelバグFixを紹介しよう。

CSSの説明
Divを繰り返すことになるが、
親となるブロック要素にはWidthのみを指定し(1行目)、
子要素で、border、padding、marginのみを指定(５,6行目)

この様に指定してしまえば、すべてのブラウザでBox Modelが
正しく動作することになる。

HTMLにて#header、#main、#sidebar、#footerというような、
構造を持っている場合、それらのブロック要素では、今回紹介したように
paddingなどの指定をしないことをオススメする。

#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}