CSS入門 | CSSの開始 | CSSの適用

CSSを適用する方法

HTML文書にCSSスタイルを適用するときは、次の3つの方法を使用できる。

インラインスタイル
内部スタイルシート
外部スタイルシート

インラインスタイル

インラインスタイルとは、HTML要素の内部でstyle属性を使ってCSSスタイルを適用する方法である。このインラインスタイルは、その要素だけにスタイルを適用できる。

<body>
    <h2 style="color:green; text-decoration:underline">
        インラインスタイルを使ってスタイルを適用しました。
    </h2>
</body>

この方法は一度設定したスタイルを変更するのが非常に難しく、スタイルシートを使う多くの利点を失う。そのため、この方法はできるだけ必要な場合にだけ使用するべきである。

内部スタイルシート

内部スタイルシートを使う方法では、HTML文書内の<head>タグに<style>タグを使ってCSSスタイルを適用する。この内部スタイルシートは、該当するHTML文書にだけスタイルを適用できる。

<head>
    <style>
        body { background-color: lightyellow; }
        h2 { color: red; text-decoration: underline; }
    </style>
</head>

外部スタイルシート

外部スタイルシートを使う方法では、Webサイト全体のスタイルを1つのファイルで変更できる。外部に作成したスタイルシートファイルは、.css拡張子を使って保存される。スタイルを適用するWebページの<head>タグに<link>タグで外部スタイルシートを含めると、スタイルが適用される。

<head>
    <link rel="stylesheet" href="/examples/media/expand_style.css">
</head>

上の例で使用したCSSファイルの内容は次のとおりである。

expand_style.css

body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }

スタイル適用の優先順位

上で説明したスタイル適用方法が混在して使われる場合、最終的に適用されるスタイルは次の順序で決まる。

インラインスタイル、HTML要素の内部に位置する
内部または外部スタイルシート、HTML文書のhead要素内部に位置する
Webブラウザーの既定スタイル

たとえば、インラインスタイルが適用されたタグには、内部スタイルシートや外部スタイルシートに関係なく、必ずインラインスタイルが適用される。また、内部スタイルシートと外部スタイルシートでは、最後に適用されたスタイルシートが有効になる。

<link rel="stylesheet" href="/examples/media/expand_style.css">
...
<h2>この部分には外部スタイルシートだけが適用されます。</h2>
<h2 style="color:maroon; text-decoration:line-through"> この部分にはインラインスタイルと外部スタイルシートの両方が適用されます。 </h2>

したがって、Webサイトのスタイル適用には外部スタイルシートを使うのが保守しやすく、最も安定している。