p {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}

marginやpadding、border-widthなどボックスディメンション系のスタイルでは、それぞれtop、right、bottom、leftと4つのプロパティを上記の様に指定しても、

p {
	margin: 10px;
}

このように、1行で指定しても、同じ意味となる。

4行のコードがたった一行。
私は非常に面倒くさがりなので、楽をすることにかけてはどんな苦労もいとわない。
そんな私のような人間にはぴったりなCSS省略スタイルについて紹介しよう。

さて、それでは、

p {
	margin: 10px 20px 30px;
}

この様に書いた場合はどうなるか？
左から、top(10px)、rightとleft(20px)、そしてbottom(30px)
となる。

p {
	margin: 10px 20px;
}

では、2つの場合は？
左から、topとbottom(10px)、rightとleft(20px)。
となる。

では、4つの場合、どのような順番で書けばいいのか？
top、right、bottom、leftの順番となるので、
海外では
Trouble
T(op)R(ight)ouB(ottom)L(eft)e
と覚えるとよく言われるが、英語がネイティブかそれに近くしくないとピンとこないかもしれない。
そんな場合は、
top: 12時、right: 3時、bottom: 6時、left: 9時。
という風に、時計に置き換えてみるとわかりやすい。

border
borderにも省略スタイルを適応することができる。

div {
	border-width: 1px;
	border-style: solid;
	border-color: #000;
}

この3行は

div {
	border:1px solid #000;
}

というように一行にまとめることができる。

border: 幅 スタイル 色;
多くのブラウザは省略スタイルの順番を無視するが、私はいつも上記の順番で書くことにしている。
W3Cの仕様書にてそのように記述されているのを真似ている。

borderにも、border-widthというプロパティがある。
先ほどのディメンション系と同じ仕様で

border-width:1px 2px 3px 4px;

という記述になる。

borderでよくあるスタイルに

div {
	border-right: 1px solid #000;
	border-left: 1px solid #000;
}

というように、左右にのみborderを適応させたい場合がある。
このスタイルは

div {
	border: 1px solid #000;
	border-width: 0 1px;
}

という様に書き換えることもできる。
まず、一行目ですべてのborderを１px、solidで色は黒としてから
2行目でその内、topとbottomの幅を0にスタイルし直す。

ラベルとして、画像をトップに配置して残りはborderで囲みたいという場合、

div {
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
}

と記述する代わりに

div {
	border: 1px solid #000;
	border-width: 0 1px 1px 1px;
}

プログラミングでよく言われるDRY、Don’t repeat yourselfの法則に乗っ取って、
スマートに記述すれば、デバッグも楽になる。

background

div {
	background-color: #f00;
	background-image: url(background.gif);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 0 0;
}

非常に多くのプロパティがある、backgroundだが、こんな時こそ、

div {
	background: #f00 url(background.gif) no-repeat fixed 0 0;
}

省略スタイルの真価が問われる。

backgroundでもやはり、
background: 色 画像 リピート アタッチメント 位置;
順番は問われることはないはずだが、上記の順に書くことにしている。

li
リストにもやはり、

li {
	list-style-type: square;
	list-style-position: inside;
	list-style-image: url(image.gif);
}

省略スタイルがある。

li {
	list-style: square inside url(image.gif);
}

こちらも、
list-style: リストタイプ 位置 画像;
という順番に書くことにしている。

最後にfont
もっとも難解ながら、省略スタイルを持つ、もっともプロパティが多いのがfont。

p {
	font-style: italic;
	font-variant: small-caps;
	font-weight: bold;
	font-size: 1em;
	line-height: 140%;
	font-family: "Lucida Grande",sans-serif;
}

ということは

p {
	font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
}

一番やりがいのある省略スタイルでもある。
今回紹介した中でも、やはり一番見かけることの少ない省略スタイル。
私も含めてだが、有効に活用していきたい。

一気に紹介してしまったが、情報としてまとまっていた方がわかりやすいはずなので、
ご了承を。

次回はCSSのフォーマットについて紹介したい。

1. CSSの役割分担＆コメント

まず、CSSドキュメントが1つで済みそうな規模の場合、例えば個人サイトやブログのCSSなどの場合は、そのドキュメント内で上手にコメントを利用することをおすすめする。
また、CSS内に目次をつけておくと自分以外のデベロッパーにも、どこにスタイルを追加すればよいのかわかりやすくなる。

/* TABLE OF CONTENTS
-----------------------------------------------
	0 = GLOBAL
	1 = LINKS
	2 = HEADINGS
	3 = HEADER
	4 = NAVIGATION
	5 = MAIN
	6 = SIDEBAR
	7 = FOOTER
/* 

/* 0 = GLOBAL
----------------------------------------------- */
/* 1 = LINKS
----------------------------------------------- */
/* 2 = HEADINGS
----------------------------------------------- */
/* 3 = HEADER
----------------------------------------------- */
/* 4 = NAVIGATION
----------------------------------------------- */
/* 5 = MAIN
----------------------------------------------- */
/* 6 = SIDEBAR
----------------------------------------------- */
/* 7 = FOOTER
----------------------------------------------- */

上記はあくまでも一例。
また、私の場合CSSの構造はマークアップ言語の構造に限りなく近い状態にしておくようにしている。

上記でMAINというセクションがあるが、ここには多くの場合、相当量のスタイルを加えるセクションなので
インデントなどを活用し、

/* 5 = MAIN
----------------------------------------------- */
	/* 5-1 = ARTICLE
	----------------------------------------------- */
	/* 5-2 = RELATED LINK
	----------------------------------------------- */
	/* 5-3 = COMMENT
	----------------------------------------------- */

というようにするとよいだろう。
だだしサブセクションは一つのインデント分くらいで止めておかなければ、読みづらくなってしまうので、
さらに多くのスタイルが必要な場合は、@importで別ファイルにするほうがいいだろう。

次回はCSSの省略スタイルの利用について紹介しよう。

その昔は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デザイン講座)などの実践的な本を購入し、実際にコーディングをしながら基礎を学ぶことが最短だろう。