読者です 読者をやめる 読者になる 読者になる

Wall Surrounded Journal

http://twitter.com/call_me_nots

CSSの基本

CSSの大まかな構文

    • At-rule(@規則) {
    • /* Rule set(規則集合) */
    • selector(セレクタ) {
    • property : value ; /* declaration */
    • property : value ; /* declaration */
    • property : value ; /* declaration */
}
}

property ~ declarationで構成される群を宣言(declaration)ブロックと呼びます。

CSS 2.1では@規則には

の4つの規則がこの形式になっています。

たとえば、

@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を記述して行います。

 冒頭の例のように、{ と } で囲みます。(規則集合をさらに@規則でグループ化する際も同様です。)

なお、セレクタと宣言ブロックは一体となって処理されるので、セレクタの構文を解析できない場合は、続く宣言ブロックも無視されます。

コロンとセミコロン

  • コロン  (:) … プロパティと値を区切る
  • セミコロン(;) …宣言ブロック内に複数の宣言を記述する場合、それらを区切る。(宣言が1つである場合にはなくてもよい)

この順に宣言を記述するとメンテしやすいよ

CSSの視認性を高めるために

規則集合の記述

  • 規則集合と規則集合の間は空白行を挟む
  • セレクタと" { "の間に半角スペースを挿入する
  • プロパティの前にはタブ文字を1つ配置してインデントする
  • 値の前に半角スペース、後ろにはセミコロンを配置する
  • @規則のグループの中身はタブ文字を配置してインデントし、グループ化されている部分を明確にする
    (ブロック要素ごとにタブ文字を配置してインデントすると、より構造が明確になります) 

また、CSSの先頭にコメントとして、一定のガイドラインを書いておくというのも、よく使われる効果的なテクニックです。