Web 開発レポート
CSS について Web 開発者が知っておくべき 5 つのこと
CSS の仕様は非常に膨大で、スクリプト、スタイル、および HTML のコード削減に役立つ機能が見落とされがちですが、このような機能を使用すると、プロジェクトが管理しやすくなります。今月のコラムでは、Web 開発者が考慮するのを忘れがちな、CSS に関する 5 つの注意事項について説明します。
1. id、type、および class 以外にもセレクターが存在する
要素、class セレクター、および id セレクターは普遍的で良く知られており、あらゆる Web サイトで使用されています。CSS には、コードをより正確に記述して、冗長なコード、再利用不可能なコード、または管理が困難なコードを回避できる他のセレクターがあるにもかかわらず、多くの Web 開発者は、これらのセレクターしか使用していません。さまざまな CSS のセレクターを把握していると、ビジネス上の問題の解決に必須でないタスクに費やす時間を削減するセレクターを選択できます。
使用可能な多くのセレクターの中でも、属性のセレクターを使用すると、要素に設定されている属性の有無または属性の値に基づいて、1 つまたは複数の要素を選択できます。図 1 のように、HTML の form 要素を操作する場合、属性セレクターは特に有益です。
input[type="submit"], input[type="button"] {
color:#333;
background:#F5F5F5;
border:1px solid #999;
cursor:pointer;
margin:.2em 0 2em 0;
padding:.3em 1.8em;
text-align:center;
}
図 1 異なる type 属性を対象とする input 要素のセレクター
構文的には、図 1 で input 要素を区切っているコンマは、かっこ内のルールを type 属性の値が submit と button の両方のボタンに適用することを示しています。つまり、コンマを使用すると、スタイルを適用する複数の要素をリストできます。これは、一連のルールを (必ずしも関連するわけではない) 複数の項目に適用してコードの重複を回避する場合に役立ちます。
1 つのセレクターや単純なセレクター (属性、id、class など) では事足りない場合は、CSS の連結子を使用して、複雑な CSS の式を作成できます。表 1 に、4 種類の連結子を示します。
表 1 CSS の連結子
| 連結子 | 構文 | 説明 |
| 子孫 | A B | セレクター B は、セレクター A の子孫です。空白文字が構文の構成要素であることに注意してください。 |
| 子 | A > B | セレクター B は、セレクター A の直接の子です。 |
| 隣接する兄弟 | A + B | セレクター B は、セレクター A と同じノード レベルに存在します。 |
| 兄弟全般 | A ～ B | セレクター B はセレクター A より後に存在します。ただし、必ずしも直後にある必要はありません。 |
それぞれの名前が示すように、連結子をセレクターと組み合わせて使用することで、CSS で複雑な式を作成することができます。セレクターでは詳細な条件を指定できるので、より複雑な式を記述すると、使用する CSS のコード量が全体的に少なくなります。
2. CSS の擬似要素と擬似クラスを使用してスクリプトの量を減らす
擬似要素と擬似クラスでは、要素を論理的かつ物理的に表すので、これらを使用して、コード量を減らすことができます。一般的には、交差するテーブル行を強調表示したり、他の UI の細部を実行したりする JavaScript ライブラリを作成します。ほとんどの開発者と同じように、おそらく皆さんは、リンクをポイントしたときの視覚的な手掛かりに、おなじみの :hover 擬似クラスを使用しているのではないかと思いますが、他の多くの擬似要素と擬似クラスの機能については、ご存じないかもしれません。
擬似には、擬似要素と擬似クラスの 2 種類があります。CSS の擬似要素は、標準的な HTML 要素のコンポーネントですが、擬似クラスは、要素の動的な属性で、現在の状態を表したり、状態の変化を引き起こします。
擬似要素は、以下のように、要素の物理的なコンポーネントにマップします。
:first-line, :first-letter, :nth-child, :before, :after
擬似クラスは、要素の状態を表す、論理的なコンポーネントで、多くの場合は動的です。以下に例を示します。
:hover, :active, :not, :first-of-type, :only-child, :empty
擬似要素と擬似クラスの詳細は異なりますが、構文とアプリケーションは本質的に同じです。:hover 擬似クラスは、論理的かつ動的ですが、:first-letter 擬似要素など静的な擬似クラスもあります。:first-letter 擬似要素では、実行前に、適用先の要素の最初の文字にのみ、物理的にスタイルを設定します (図 2 参照)。
p:first-letter {
color:#990000;
font-size:2em;
font-weight:bold;
}
.png)
図 2 :first-letter 擬似要素では最初の文字にスタイルを設定する
スクリプトで同じ処理を行うには、要素を選択し、複数のメソッド (getElementById、substr、addClass など) を呼び出して、実行時に要素を操作する必要があります。こういった種類のタスクのスクリプトは、将来コードを管理する必要が生じ、スタイルの設定のみを行うコードの管理によって、集中して取り組む必要があるビジネス ルールへの注意が失われることを覚えておいてください。
擬似要素と擬似クラスの完全な一覧については、W3C の Web サイト (英語) を参照してください。
3. クロス プラットフォームのコンテンツ配信に CSS のメディア クエリを使用する
タブレット、ノート PC、スマートフォンといったデバイスが一般的に使用されるようになるにつれて、多くの Web 開発者は、同じコンテンツとメディアをさまざまな形式で提供するという厄介な開発作業が必要になることを予想しています。さいわい、CSS には、メディア クエリという複数のプラットフォームとフォーム ファクターにコンテンツを配信するすばらしい方法が用意されています。
概念的には、CSS メディア クエリは、ブラウザーの機能検出と似ていますが、メディア クエリでは、ユーザー エージェントごとにサポートする機能を決定するのではなく、使用するユーザー エージェントに基づいてコンテンツを表示する方法を決定します。また、ブラウザーの機能検出と比べると、メディアの種類ははるかに少数です。ただし、複数の複雑なメディア クエリ式を作成して、個々のユーザーにとって最適な状態に調整したコンテンツを提供することは可能です。
@media で始まるルールを検索すると、.css ファイルまたは <style> タグ内のメディア クエリを簡単に特定できます (図 3 参照)。
@media handheld {
body
{
font-size: 10pt;
background-color: #5c87b2;
}
}
@media screen {
body { font-size: 18pt }
}
@media screen, print {
body { line-height: 1.2 }
}
図 3 handheld、print、および screen のメディア クエリ
図 3 のセレクターからおわかりいただけるように、メディア クエリでは、対応するデバイスの種類に対して複数のスタイルを指定することができます。図 3 で紹介したよりも多くのメディアの種類が存在します。たとえば、all、braille、embossed、handheld、print、projection、screen、speech、tty、tv などがあります。
4. スタイルについて非常に限定的な CSS
限定性は CSS の重要な概念で、要素間で "スタイルの競合" が発生することを回避できます。外部のページ レベルのインライン スタイルを操作するのは、厄介な作業です。
さいわい、CSS には、スタイルの階層に関するシンプルなルールがあります。それは、要素に最も近いスタイル ルールが優先され、ブラウザーでは、要素に最も近いルールが要素に適用されるというものです。つまり、スタイルが適用される優先順位は、インライン スタイル > ページ レベルのスタイル > スタイル シート ファイルとなります。
図 4 と図 5 の箇条書きは、実際に CSS が継承される状態を示す好例です。図 4 のコードでは、箇条書きに、緑色の境界線と紫色の背景を設定し、テキストを白色でレンダリングします。箇条書きの子 (箇条書きの項目タグ) では、背景とテキストの色の属性を継承しますが、境界線の属性など、継承されない属性もあります。
CSS
ul
<style type="text/css">
{
width:150px;
border:5px solid #090;
background-color:#909;
color:#fff;
}
</style>
HTML
<ul>
<li>
List item one
</li>
<li>
List item two
</li>
<li>
List item three
</li>
</ul>
結果
.png)
図 4 箇条書きの項目では、色は継承するが境界線は継承しない
図 4 では、境界線は箇条書きの各項目の周囲ではなく、箇条書き全体の周囲にレンダリングされ、箇条書きの項目が境界線の属性を継承していないことを示しています。
CSS のみを変更して、色と境界線の設定をリセットするセレクターを <li> 要素に挿入すると、箇条書きの外観が完全に新しいものになります (図 5 参照)。
CSS
<style type="text/css">
ul
{
width:150px;
border:1px solid #090;
background-color:#909;
color:#fff;
}
li
{
width:100px;
border:1px solid #099;
background-color:#009;
color:#fff;
}
</style>
HTML
<ul>
<li>
List item one
</li>
<li>
List item two
</li>
<li>
List item three
</li>
</ul>
結果
.png)
図 5 継承と限定性の例
図 5 の要素の幅と背景色の組み合わせから、ブラウザーでは、箇条書きの項目固有のスタイルが使用されていることがわかります。
CSS の限定性によって、スタイルを適用する要素とそのタイミングを決定しながら、子要素にスタイルを適用するためのルールを作成することなく、CSS のスタイルの継承という特性を活用してスタイルを子要素に幅広く適用することができます。
5. CSS のリセットで基準値を設定する
すべてのブラウザーでは、それぞれ独自の既定の方法で要素をレンダリングします。このため、多くの開発者は、CSS のリセットを使用しています。これは、一般的で主要な要素を望ましい値にリセットするスタイル シートです。
CSS のリセットは、メインのスタイル シートに組み込むか、個別の .css ファイル (通常、Reset.css という名前が付いています) に単独で含めることができます。図 6 に CSS のリセットの例を示します。
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
図 6 CSS のリセットの例
自分で準備を行って CSS のリセットを作成したりしたくない場合は、GitHub の normalize.css をダウンロードして変更できます。CSS のリセットに関して重要なのは、スタイルの基準値を管理できることです。
まとめ
CSS の機能について詳しい知識を習得すると、Web 開発の作業が簡略化されます。開発者は、コード量を減らすことを望んでいます。CSS の擬似要素、擬似クラス、メディア クエリ、およびセレクターのトリック (結合子や高度な式の使用など) は、コード量を減らすのに役立ちます。また、CSS のスタイルの継承という特性を活用して、CSS のリセットを使用して Web ページの基準値を制御することを覚えておいてください。
Rachel Appel は、マイクロソフトのニューヨーク オフィスで働いている開発系エバンジェリストです。Rachel には、彼女の Web サイト (http://rachelappel.com、英語) または電子メール (rachel.appel@microsoft.com、英語のみ) で連絡できます。Twitter (@rachelappel) で最新のツイートをフォローすることもできます。