Skip to main content

Visit Mozilla.org

CSS:Getting Started:Readable CSS

出典: MDC



ここでは、CSS 言語そのもののスタイルと文法について見ていきましょう。

サンプル CSS ファイルの形式を変えることで、より読みやすくなります。

[編集] 解説: 読みやすい CSS

空白文字やコメントをスタイルシートに追加することでより読みやすく出来ます。 また、異なる方法で指定されたエレメントに同じルールを適用する場合、セレクタをグループ化することも可能です。

[編集] 空白文字

空白文字とは、単純な空白、タブ、改行、を意味します。 スタイルシートを読みやすくするために空白文字を追加することができます。

いまサンプル CSS ファイルは、1 行に 1 ルールで、ほとんど最低限の空白文字しか入っていません。複雑なスタイルシートでは、このスタイルで書くと読みにくくなり、修正が困難です。

普段は書式を自分で決めているでしょうし、プロジェクトの一部としてのスタイルシートであればプロジェクトで都合のいいように決めているはずです。

Examples
人によっては今使っているコンパクトなスタイルを好みます。行が長くなったときに分割するスタイルです。 
.carrot {color: orange; text-decoration: underline; font-style: italic;}

また、一つのプロパティを一行にする人も居ます。 

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

インデントを使う人も居ます — 通例、空白 2 文字、4 文字、もしくはタブです 

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

全てを縦に整列させる人も居ます (が、修正作業は面倒になるでしょう) 

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

レイアウトにタブを使う人もいますし、空白を使う人もいます。

[編集] コメント

CSS のコメントは、/* で始まり */ で終わります。

コメントは、スタイルシート自体のコメントにも利用できますし、テストのために一部を コメントアウト するのにも利用可能です。

スタイルシートの一部をコメントアウトする場合、その部分をコメントの中におけばブラウザは無視します。 ただし、開始と終了の場所に注意してください。コメントを除いた部分は正しい構文になっている必要があります。

Example 
/* 先頭パラグラフの先頭の C のスタイル */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

[編集] セレクタのグループ化

同じスタイルを適用すべきエレメントがたくさんある場合、カンマ区切りで並べたセレクタのグループで指定できます。 定義されたスタイルは、グループで指定された全てのエレメントに適用されます。

それらの個々のセレクタについての指定は、スタイルシートの任意の場所に指定できます。

Example
このルールでは H1, H2 と H3 エレメントを同じ色で表示します。

変更することになったときなど、色指定を一箇所だけで指定するので便利です。 

/* ヘッダの表示色 */
h1, h2, h3 {color: navy;}

[編集] 実例: コメントを追加しレイアウトを改善する

CSS ファイルを編集し次のようなルールを定義してください。順番は任意です。 

strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
p {color: blue;}

そして、最もよいと思う場所に空白文字やコメントを追加することで、あなたがより読みやすいと思う形態に編集してください。

ファイルを保存、ブラウザで再表示し、加えた編集がスタイルシートの動作に影響していないことを確認してください。

Cascading Style Sheets
Cascading Style Sheets


試してみましょう
スタイルシートの一部をコメントアウトすることで、それ以外を編集せずに全ての行先頭文字を赤くしましょう。
Cascading Style Sheets
Cascading Style Sheets

(方法は複数あります。)


[編集] 次は ?

サンプルスタイルシートはイタリック文字と下線付き文字を使っていました。 次では表示方法を指定するより詳細な方法を解説します。 文章のスタイル

"http://developer.mozilla.org/ja/docs/CSS:Getting_Started:Readable_CSS" より作成