CSSの基本
CSSの大まかな構文
}
- At-rule（@規則） {
- /* Rule set（規則集合） */
- selector（セレクタ） {
- property : value ; /* declaration */
- property : value ; /* declaration */
- property : value ; /* declaration */
}
property ～ declarationで構成される群を宣言(declaration)ブロックと呼びます。
CSS 2.1では@規則には
の４つの規則がこの形式になっています。
たとえば、
@media screen {
a {
color: #00f;
text-decoration: underline;
}
}
@media print {
a {
border-bottom: 1px dotted #000;
color: #000;
text-decoration: none;
}
}
このような記述では、「PCのブラウザで表示する際にはアンカー( <a> )のテキストを青色にして下線付きで表示し、プリンタで印刷する際にはアンカーのテキストを黒色にして下線の代わりにdottedのボーダーを表示する」という指定をしたことになります。
@charset規則
文字コードを、他の@規則やあらゆる宣言ブロックの記述（コメントや空白文字を含める）よりも先行して記述します。
以下のように、文字コードのみを引用符で括り、末尾にセミコロンをつけて指定します。
@charset "UTF-8";
@import規則
@import url("fixed.css") screen, tv;
url()関数の中に組み込むCSSファイル名を記述し、その後にメディアタイプをコンマで区切って記述し、末尾にセミコロンを付けて指定します。
declaration block
CSSにおいて、フォントのサイズ、色などの指定をpropertyに対してvalueを記述して行います。
冒頭の例のように、{ と } で囲みます。（規則集合をさらに@規則でグループ化する際も同様です。）
なお、セレクタと宣言ブロックは一体となって処理されるので、セレクタの構文を解析できない場合は、続く宣言ブロックも無視されます。
コロンとセミコロン
- コロン （:） … プロパティと値を区切る
- セミコロン（;） …宣言ブロック内に複数の宣言を記述する場合、それらを区切る。（宣言が１つである場合にはなくてもよい）
この順に宣言を記述するとメンテしやすいよ
CSSの視認性を高めるために
規則集合の記述
- 規則集合と規則集合の間は空白行を挟む
- セレクタと" { "の間に半角スペースを挿入する
- プロパティの前にはタブ文字を１つ配置してインデントする
- 値の前に半角スペース、後ろにはセミコロンを配置する
- @規則のグループの中身はタブ文字を配置してインデントし、グループ化されている部分を明確にする
（ブロック要素ごとにタブ文字を配置してインデントすると、より構造が明確になります）
また、CSSの先頭にコメントとして、一定のガイドラインを書いておくというのも、よく使われる効果的なテクニックです。
