コンテンツにスキップ

HTML応用編

スタイル

Webページの見栄え（フォント，サイズ，色，文字や図形の配置，・・・）の設定は，昔はHTMLタグに直接，記述していました．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" /><title></title>
    </head>
    <body>
        普通のテキスト
        <center>センタリング</center>
        <font color="blue">青色のテキスト</font>
        <br />
        <font size="5">大きいテキスト</font>
    </body>
</html>

このように埋め込んでしまうと，その文書を使い回そうとする際に不便です．例えば，PCなら大きな画面を想定してレイアウトに凝ることができますが，スマートフォンを想定した場合はデザインをシンプル，かつ文字も小さめにする必要があるでしょう．そのため，上記のように（見栄えに関する情報がHTMLに）埋め込まれてしまうと使い回しが困難になります．

そこで，見栄えを指定するためのルールが定められました．これがCSS（Cascading Style Sheets）です．

文書の構造のみをHTMLに記述して，用途別にCSSを準備して適用することで，いろいろなデバイスで最適に表示することができます．（例えばPCならPC用のCSSを，スマートフォンならそれ専用のCSSを適用する）

カスケーディング

例えば，下図のようにbody要素に「color: green」というスタイルを適用すると，その文書全体の文字が緑色に変わります．

graph TB A[html] B[head] D[meta] E[title] F[HTML文書の構造] subgraph color:green C[body] G[h1] H[タイトル] I[p] J[ここは] K[b] L[です] M[段落] end A --> B A --> C B --> D B --> E E --> F C --> G G --> H C --> I I --> J I --> K I --> L K --> M

さらに，<body>の子要素である<p>に「font-style: italic」というスタイルを適用すると，その下にある文字が全てイタリック体になります．

graph TB subgraph font-style:italic I[p] J[ここは] K[b] L[です] M[段落] end I --> J I --> K I --> L K --> M

このように，スタイルを適用した要素だけでなく，その子要素全体に適用されるのがカスケーディングです．

style要素でのCSS記述

style要素の中に，見た目に関するルールを記述するには

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

という書き方を使います．セレクタには「どの要素にスタイルを適用するか」を指定し，プロパティとその値は「:」（コロン）で区切って記述します．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSSサンプル</title>
        <style>
            h1 {
                font-style: italic;
            }
            p {
                color: white;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <h1>HTMLの基礎</h1>
        <p>ここにテキスト記述</p>
        <h1>JavaScriptの基礎</h1>
        <p>ここにテキスト記述</p>
    </body>
</html>
  • 実行例

なお，HTMLファイルの<style>タグに直接，記述しなくても，7行目から13行目を

7
<link rel="stylesheet" href="style.css" />

などと書き換えて，ファイルstyle.cssの内部にスタイルをまとめて記述しても構いません．というか，むしろその方がHTMLとCSSを完全に分離できます．

主なセレクタ

以下，代表的なセレクタの記述法を例示します．

全称セレクタ 「*」

文書中のすべての要素に適用できます．

* {
    font-size: 12px;
}

タイプセレクタ 「要素名」

同じ種類のタグにスタイルを適用できます．

h1 {
    font-style: italic;
}

IDセレクタ 「#id」

文書中の特定の要素にのみスタイルを適用できます．id属性はすべての要素に対して指定できますが，文書中で一意でなければなりません．つまり，同じid属性を持った要素が存在してはいけないという文法になっている（ただし，同じid属性を持った要素が存在しても，ブラウザは良しなに表示してしまう）．

#score {
    color: green;
}
・・・
<p>得点:<span id="score">60</span>点</p>

上記のように書いた場合，「60」のみ，緑色になります．

クラスセレクタ 「.クラス名」

文書中のいくつかの要素にスタイルを適用したい場合に使います．class属性は，HTML内の任意の要素に対して指定でき，重複して使用して構いません（ここがid属性との違いです）．

.redtitle {
    color: red;
}
・・・
<h1 class="redtitle">HTMLの基礎</h1>
<h1>Cascading Style Sheets</h1>
<h1 class="redtitle">JavaScriptの基礎</h1>

上記のように書いた場合，1番目と3番目のh1要素が赤色になります．