CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/01/16 14:00

解説

 「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;
}
出力結果)
出力結果
フィードバックお待ちしております!

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



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:マンガで分かるプログラミング用語辞典

もっと読む

著者プロフィール

  • 柳井 政和(ヤナイ マサカズ)

    クロノス・クラウン合同会社 代表社員 http://crocro.com/ オンラインソフトを多数公開。 プログラムを書いたり、ゲームを作ったり、記事を執筆したり、マンガを描いたり、小説を書いたりしています。 「めもりーくりーなー」でオンラインソフト大賞に入賞。最近は、小説家デビューして小説...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5