mozilla
Your Search Results

    Readable CSS

    ここでは、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, H2H3 エレメントを同じ色で表示します。

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

    /* ヘッダの表示色 */
    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

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


    次は ?

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

    ドキュメントのタグと貢献者

    Contributors to this page: ethertank, teoli
    最終更新者: teoli,