CSSの書き方

CSSの書式の基本

CSSによって記述されるスタイルシートは主に以下の2つのパーツを組み合わせて構成され、それぞれ必要な数だけ配置することができます。

スタイル・ルール

スタイルシートの中心となる部分で、それぞれのスタイル・ルールは特定の要素がどのように描画されるべきかを設定する“宣言”の集まりです。

@ルール

@ルールはスタイル・ルールでは表すことができない特殊な設定を行うためのものです。@ルールの書式はさまざまで、スタイル・ルールや他の@ルールを内包できるものもあります。

@ルールのうち、“@charset”ルール、“@import”ルール、“@namespace”ルールは使用する場合にはCSSの先頭に記述されなければなりません。他のスタイル・ルールと@ルールを記述する順序は基本的には自由ですが、スタイルの指定が重複した場合にはどちらの記述した順序によってどちらの指定が優先されるかが変わることがあります。

CSSには他に“<!--”と“-->”を含むことができます。これはHTMLの“style”要素に対応していないブラウザでその中に記述されたスタイルシートがウェブページに表示されてしまうのを防ぐためのもので、HTMLにおけるコメントと同じです。CSSでは特別な意味を持たず、無視されます。

スタイル・ルール

“スタイル・ルール(Style Rules)”ブラウザが要素をどのような見た目で描画するべきかを表すかについての情報を内包します。

スタイル・ルールはセレクタと宣言ブロックの2つの部分から構成されます。

“セレクタ(Selector)”はそのスタイル・ルールが対象とする要素を選択するための部分で、要素名、要素がつけられたクラス名やID名、要素の親子関係などから1個、もしくは複数の要素を選択します。

宣言ブロックはセレクタの後に続く“{”と“}”に囲まれたブロックで、ブロックの中にはスタイルを設定する“宣言(Declaration)”を内包します。CSSの宣言には“プロパティ(Property)”と“ディスクリプタ(Descriptor)”の2種類がありますが、スタイル・ルールの宣言ブロックに内包されるのはプロパティです。

ホワイトスペース

“ホワイトスペース(Whitespace)”は一般的にコード自体の見栄えを整えるために挿入されるスペースやタブ文字、改行のことです。

CSSではコードに含まれる以下の文字がホワイトスペースとして扱われます。

また、以下の文字もCSSがブラウザに読み取られる際には行送り(CR、U+000A)に置き換えられるため、結果的にホワイトスペースとして扱われます。

CSSではプロパティ名やキーワードなどの1個の塊でなければならないコードの途中でなければ多くの場所でホワイトスペースの挿入が認められています。

多くのホワイトスペースはコード自体の見栄えを整えるためだけのもので、制作者の利便性のためだけに挿入されます。しかし、ホワイトスペースは複数の値を隔てるために使用されたり、セレクタの子孫結合子など、ホワイトスペースが特別な意味を持つ場合もあり、そのような場面ではホワイトスペースは必須です。

コメント

“/*”と“*/”で囲まれたコードは“コメント(Comment)”を表します。

コメントはブラウザには無視され、ブラウザからCSSの一部を隠したり、制作者の利便性のためのメモを記述するために使用することができます。

コメントの内容にはコメントの終わりとして誤認されるため、連続するアスタリスク(“*”)とスラッシュ(“/”)を含んではいけません。

コメントはホワイトスペースの挿入が認められる場所であればどこにでも挿入することができます。

プロパティ

“プロパティ(Property)”は宣言が何についての設定をするのかを表すプロパティ名と具体的な設定内容を表す“値(Value)”をコロン(“:”)を挟んで記述します。

プロパティが受け付ける値の種類やその記述方法はプロパティごとに決められています。受け付けられない種類の値や記述方法が誤っている値が含まれる宣言は無効となり、無視されます。

宣言ブロックの中には同じ要素を対象とした宣言を複数含めることができ、それぞれの宣言はセミコロン(“;”)で区切って記述します。宣言ブロックの中で最後の宣言の後のセミコロンは必須ではありませんが、後で宣言を追加したり、並べ替えたりした時のつけ忘れを防ぐためにすべての宣言の最後にセミコロンが付けるのが一般的です。

一括指定プロパティ

いくつかのプロパティは“一括指定プロパティ(Shorthand Property)”と呼ばれ、他のいくつかの“個別指定プロパティ(Longhand Sub-property)”による設定を一括して行うことができます。

多くの一括指定プロパティは対象とする個別指定プロパティの値を列挙することで個別指定プロパティの代わりにスタイルを指定します。一括指定プロパティは同じ場所に対象とする個別指定プロパティを全て並べて記述した場合と同じ意味合いを持ちます。

例えば、次のような一括指定プロパティによるスタイルの指定があるとします。

個別指定プロパティを使用して同じスタイルを指定すると以下のようになります。

一括指定プロパティを使用する場合、必ずしも個別指定プロパティのすべての値を記述する必要はなく、一部の値を省略することが可能です。ただし、その場合は省略した値が対象とする個別指定プロパティを初期値に設定した場合と同じ意味を持ちます。

例えば、次のような一括指定プロパティによるスタイルの指定があるとします。

以上のスタイルの指定は一見すると“text-decoration-line: underline;”と同じように見えますが、実際には以下のように“text-decoration-thickness”プロパティなども含めた4個の個別指定プロパティを指定した場合と同じ意味を持ちます。

一括指定プロパティの中には対象となる個別指定プロパティの初期化だけを行い、細かい値の指定ができないものもあります。例えば、“font”プロパティには値が設定可能な“font-family”プロパティなど以外にも“font-kerning”プロパティなどの多くの個別指定プロパティがあり、“font”プロパティを使用すると自動的にこれらのプロパティも初期値に設定されます。

CSSをHTML文書に適用する方法

CSSによるスタイルシートをHTML文書に適用する方法は以下の3通りがあります。

• “link”要素
• “style”要素
• “style”属性

“link”要素による適用が最も一般的ですが、それぞれ利点と欠点があり、使い分けることができます。

CSSの特徴であるのが、一つの要素に適用されるスタイルは複数のCSSスタイルシートに由来することで、スタイルの宣言は競合することがあります。競合するスタイルは“カスケード”によってどのスタイルを適用するかが決定されますが、その過程でスタイルシートの適用方法や順序は影響することがあります。

また、それぞれの要素にはユーザー・エージェントが適用する既定のスタイルシートであるUAスタイルシートが制作者が定義したスタイルシートと同時に適用されることも留意する必要があります。

“link”要素

“rel”属性の値が“stylesheet”である“link”要素はHTML文書とHTML文書からは別れたCSSファイル(.css)に記述された外部スタイルシートを読み込みます。外部スタイルシートは複数のHTML文書で共有することができます。

もっとも一般的なスタイルシートの適用方法であり、スタイルシートが長大である場合や同じスタイルシートを複数の文書に適用する場合にはスタイルシートを外部スタイルシートとして記述して“link”要素で読み込むと効率的で管理が容易です。

“style”要素

“style”要素はHTML文書の文書内にスタイルシートを記述するための要素です。

“style”要素で記述されたスタイルシートは他の文書で使用することはできないので、何度も同じスタイルをほかの文書でも使用する場合にはあまり向いていません。しかし、スタイルシートが短く、他の文書に使用されるものではない場合は“style”要素でスタイルシートを記述すると手軽です。

“style”属性

“style”属性は要素に直接スタイルシートを記述するための属性です。グローバル属性なのですべての要素に使用することができます。

スタイルの情報が短く、繰り返し使用されるものではない場合には“style”属性にスタイルシートを記述すると手軽です。

“style”属性に記述されたスタイルはその要素にのみ適用されます。また、“style”属性の中にはスタイル・ルールの宣言ブロックの中身のみ記述することができ、@ルールは使用できません。