「CSS」
～マンガでプログラミング用語解説

マンガで分かるプログラミング用語辞典（126）

解説

　「CSS」は「Cascading Style Sheets」の略です。「Cascade」は、元々 連なった小さな滝のことで、そこから派生して数珠つなぎになったものを意味する言葉です。「Style Sheets」は、表示や印刷の書式を指定したファイルのことを指します。「CSS」では、複数の見た目の設定を数珠つなぎにして、見た目を表現することができます。

　CSSは元々、HTMLの文書構造と見た目の定義を分けるために生まれました。CSSは、「<div style="color: red;">」のように、HTMLのタグ中に「style」属性を指定して、直接記入することもできます。また、「head」タグ配下に「style」タグを用意して、その中で書くこともできます。

　文書構造と見た目を分けるという意味では、別ファイルに記述して読み込むのがよいでしょう。その際は、「<link rel="stylesheet" type="text/css" href="main.css" />」のように「link」タグを「head」タグ配下に書いて、ファイル（ここでは main.css）を読み込みます。

　以下、CSSの記述の例と、その意味を抜き出したものを掲載します。「/* ～ */」と書くことでコメントを挿入することもできます。

記述例

#id {
  background-color: blue; /* 背景は青 */
  color: red; /* 文字色は赤 */
}

意味を抜き出したもの

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
}

　プロパティと値は「:」（コロン）で区切り、そのセットは「;」（セミコロン）で区切ります。

　セレクタは、タグ名やID、クラス、階層構造の指定など、様々な方法で要素を指定できます。

セレクタの例

div     タグ
#id     #ID
.class  .クラス
div a   階層構造

サンプル

　「CSS」を表示するサンプルです。ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。

index.html

<html>
    <head>
        <title>「CSS」のサンプル</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
        <h1>「CSS」のサンプル</h1>
        <div id="main">
            <p>鼠は小さい。</p>
            <p>猫は中ぐらい。</p>
            <p>犬は大きい。</p>
        </div>
        <div class="sub">
            <p>各動物の紹介。</p>
        </div>
    </body>
</html>

main.css

h1 {
    color: #46a;
    margin: 0.2em 0;
}

#main {
    border: solid 2px #aaa;
    padding: 0.2em 1em;
    border-radius: 0.5em;
}
#main p {
    border-bottom: solid 1px #ccc;
}

.sub {
    background: #666;
    color: #fff;
    padding: 0.5em 1em;
    margin-top: 0.5em;
    border-radius: 0.5em;
}
.sub p {
    margin: 0;
}

出力結果

フィードバックお待ちしております！

　ご感想、解説して欲しい用語、解説内容のアドバイスなどございましたら、FacebookやTwitterなどでお気軽に編集部までお寄せください。よろしくお願いいたします。