CSSをHTML文書に適用してみよう
CSSをHTML文書に適用させるには、大きく分けて3つの方法があります。
style要素でHTML文書内に適用する- 要素内に
style属性を追加して単一の要素のみ適用する link要素から外部CSSファイルを呼び出して適用する
一般に、 3番目の「link要素から外部CSSファイルを呼び出して適用する」でWebサイトを制作することが多いです。しかし、1番目、2番目の方法もみかける機会があるかもしれないので、全ての方法を確認してみましょう。
1. style要素で適用する
HTMLファイルのhead要素内に<style>~</style>を記述し、その中にCSSを記述してスタイルを指定します。これにより、文書内にCSSが適用されます。
HTMLファイルに記述したCSSは、そのHTMLファイル内にしか適用されません。
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<style>
セレクタ {
プロパティ: プロパティ値;
}
</style>
</head>
</html>
例えば、style要素を使ってsample.htmlのp要素に対して文字色を赤にする場合は、以下のように記述します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>CSSの基礎を学ぼう</title>
<style>
p {
color: red;
}
</style><!-- CSSはstyle要素内に記述する -->
</head>
<body>
<p>CSSとは「Cascading Style Sheets」の略です。</p>
</body>
</html>
上記のサンプルコードの場合、style要素でスタイルを指定するsample.html内のみCSSが適用されます。もし別のHTMLファイルがあったとしても、適用されません。
style要素を使う方法は、特定のページにだけ特化したデザインがある場合に便利です。
しかし、複数のページを持つWebサイトの場合は、全てのページにstyle要素を記述する必要があるので効率の悪い作業方法になります。そのため、ほとんどの場合はlink要素の方法が使われます。
HTML5.2において、style要素はbody要素内にも配置することができましたが、現行の仕様では配置することができません。
2. style属性で単一の要素のみ適用
HTMLの要素にstyle属性を追加して、属性値にCSSを記述してスタイルを指定します。単一の要素のみスタイルが適用されます。
style属性は、style="プロパティ: プロパティ値;"の部分です。
1
<要素名 style="プロパティ: プロパティ値;"></要素名>
例えば、style属性を使って最初のp要素だけ文字色を赤にする場合は、以下のように記述します。
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>CSSの基礎を学ぼう</title>
</head>
<body>
<p style="color: red;">CSSとは「Cascading Style Sheets」の略です。</p>
<p>CSSは、HTMLで作成された文書の見た目を調節することが役割です。</p>
</body>
</html>
上記のサンプルコードの場合、style属性を追加した最初のp要素のみCSSが適用されます。次の行のp要素には、以下のように影響がありません。
style属性を使う方法は、一部のデザインを変更する場合に便利です。
しかし、複数の要素に対して同じCSSを適用させる場合には、各要素にCSSを記述する必要あります。また後からデザインを変更する際にも、要素ごとに修正しなければいけません。
効率良くCSSコーディングする上でのポイントとして、style属性は使わないことです。
効率良くCSSコーディングするために、実際の制作現場では次に説明する方法が使われます。
3.link要素から外部CSSファイルを呼び出して適用する
3つめの方法は、Webサイトを制作する際には最も一般的に使用される方法です。
HTMLファイルとは別にファイル（外部CSSファイル）を作成します。
作成したCSSファイルにスタイルを記述し、HTMLファイル内から呼び出します。
CSSファイルは、ファイル名の末尾に.cssという拡張子を付けて作成します。
1
2
3
セレクタ {
プロパティ: プロパティ値;
}
CSSファイルを呼び出すには、以下のようにhead要素内にlink要素を記述し、link要素にhref属性で呼び出すCSSファイルを指定します。
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSSファイルの場所">
</head>
</html>
rel属性値のstylesheetは、外部CSSファイルであることを表します。
HTMLファイルとCSSファイルが同じ階層にある場合は、href属性値に指定する「CSSファイルの場所」は、ファイル名.css“と書くことができます。
それでは、実際に手を動かしながら外部CSSファイルを呼び出してみましょう。
実際にやってみよう
HTMLの章では、Visual Studio Codeを使ってデスクトップ上に作業用フォルダのhtml-basicにindex.htmlなどを作成して、HTMLの書き方について学びましたね。
前回までのhtml-basicの構成は、以下の通りです。
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基礎を学ぼう</title>
</head>
<body>
<img src="img/logo.png">
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com">HTMLクイックリファレンス</a>
</body>
</html>
今回は、html-basicにstyle.cssというCSSファイルを作成して、index.htmlから呼び出してスタイルを適用できるようにします。
作成するCSSファイルは、以下のようにHTMLファイルと同じ階層にします。
VSCodeでhtml-basicを開いていない方は、こちらの作業用フォルダーを開くを参考に開いておきましょう。
CSSファイルを作成しよう
まずは、html-basicフォルダ内にCSSのファイルを作成していきましょう。
CSSファイルは、ファイル名の末尾に.cssという拡張子を付けて作成します。以下のようにstyle.cssというファイルを作成します。
以下のスタイルをstyle.cssに記述して、ファイルを保存しましょう。
1
2
3
4
5
h1 {
color: red;
font-size: 48px;
font-weight: 700;
}
自動保存の設定をしていない方は、変更後にファイルを保存し忘れないように気をつけよう！
外部CSSファイルを呼び出そう
次にindex.htmlからstyle.cssを呼び出すために、以下のようにindex.htmlのhead要素内にlink要素を記述してファイルを保存しましょう。
style.cssは同じ階層にあるので、href属性値はファイル名.cssを指定します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの基礎を学ぼう</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="img/logo.png">
<h1>HTMLの概要を学ぼう</h1>
<p>HTMLとは「HyperText Markup Language」の略です。</p>
<a href="http://www.htmq.com">HTMLクイックリファレンス</a>
</body>
</html>
Webブラウザ上で確認しよう
最後にHTMLファイルにスタイルが適用されているかをブラウザ上で確認します。
スタイル適用前は、以下のように画面に表示されていました。
Webブラウザ上に表示させる方法を参考にして、index.htmlの解析結果をブラウザへ表示させてみましょう。
index.htmlからstyle.cssを呼び出して、無事にスタイルが適用されていれば、見出しの文字の色・大きさ・太さは、以下の画像のように変更されます。
link要素から外部CSSファイルを呼び出して適用させる方法は、よく使われるので覚えておきましょう。
Webサイトを閲覧するChromeなどのブラウザは、「ユーザーエージェントスタイルシート」を持つため、CSSが全く書かれていないHTML文書でも「リンクの文字の色を青くする」「見出しの文字を大きくする」などデフォルトで読みやすく表示してくれます。
外部CSSを読み込むメリット
前章のStyle Sheet（スタイルシート）でも少し触れましたが、HTMLファイルとは別にスタイルを記述したCSSファイルを作成することで「スタイルの一括管理」や「用途別の管理」などのメリットが挙げられます。
複数のページを持つWebサイトの場合は、HTMLファイル内にCSSを記述するのではなく、管理しやすい外部CSSを利用するようにしましょう。
CSSが適用される優先順位
CSSでは、「同じ要素に対して複数のスタイルが競合する場合に、どのスタイルを優先するかを決める仕組み（カスケード）がある」と前章で説明しましたね。
それでは、3つの方法で「同じ要素に対してスタイルを指定」した場合の優先順位はどのようになるのでしょうか。
| 方法 | 説明 |
|---|---|
| style要素 | head要素内にstyle要素でスタイルを指定 |
| style属性 | 各要素にstyle属性でスタイルを指定 |
| link要素で外部CSSファイルを読み込む | 外部ファイルを作成してスタイルを指定 |
以下のサンプルコードを使って、3つの方法のスタイル優先順位を確かめてみます。
pの文字の色を指定します。
1.外部CSSファイルの場合
Webブラウザは、以下のようにHTMLを上から順番に行を読み込み、解析を行います。
そして外部ファイルを読み込む箇所に到達すると、解析を一旦停止し、外部ファイル内の処理を実行します。CSSでも上から順番に読み込まれます。
外部CSSファイル内で「同じ要素に対して複数のスタイルが競合する場合」は、以下のように後ろに登場したスタイルが優先されます。
最終的にpの文字色は、赤ではなく緑になります。
これはCSSが上から順番に読み込まれて、「出現順序」の判定基準によって後に登場したスタイルが優先されるからです。
「後ろに登場する」ということがポイントになりそうだね
2.style要素の場合
外部CSSファイル内の処理が実行された後は、HTMLに戻って解析を再開します。
link要素の次の行から解析が行われます。
link要素のすぐ後ろにstyle要素を指定する
style.cssの内容は残しておき、以下のようにlink要素のすぐ後ろにstyle要素でpに対してスタイルを指定した場合は、どのスタイルが優先されるでしょうか。
外部CSSファイル内とstyle要素で「同じ要素に対して複数のスタイルが競合する場合」は、以下のように後ろに登場したスタイル、つまりstyle要素のスタイルが優先されます。
最終的にpの文字色は、緑ではなく青になります。
以下のようにstyle.cssの処理を実行した後は、HTMLに戻り、link要素の次の行から解析を再開します。style要素のスタイルが後に登場することになります。
上記の並びでは、「出現順序」の判定基準によって、後ろに登場したスタイルが優先されるので、link要素よりも後ろにあるstyle要素のスタイルが優先されることになります。
link要素のすぐ前にstyle要素を指定する
後ろに登場したスタイルが優先されることは変わらないので、link要素のすぐ前にstyle要素を指定した場合は、style.cssのスタイルが優先されます。
以下のようにpの文字色は、青ではなく緑になります。
head要素内で後にスタイルを指定した方が優先されるんだね
link要素で複数の外部ファイルを読み込む場合も、後に登場するスタイルが優先されます。
3.style属性の場合
style要素やstyle.cssのスタイルは残しておき、以下のように最初のp要素だけstyle属性でスタイルを指定した場合は、どのスタイルが優先されるでしょうか。
style要素やstyle.css、さらにstyle属性で「同じ要素に対して複数のスタイルが競合する場合」は、以下のように後ろに登場したstyle属性のスタイルが優先されます。
最初のpの文字色は、緑ではなくオレンジになります。
Webブラウザは、以下のようにHTMLを上から順番に行を読み込み、解析を行います。そのため、head要素内のスタイルよりも、後に登場するp要素のstyle属性のスタイルが優先されます。
最初のp要素だけにスタイルが指定されるので、他のp要素の文字の色は変わりません。
3つの方法で、同じ要素にスタイルを適用させた場合に「後ろに登場するスタイルが優先される」ということがわかりましたね。
必然的にstyle属性が優先度の高い指定方法になるよね
優先度高い=スタイルの上書きが難しい、管理しづらいってことになるから、style属性よりも外部CSSファイルが使われるよ
この章のまとめ
重要なポイントをおさえよう！
- CSS適用は、style属性、style要素、link要素を使う3つの方法がある
- スタイルが競合するときに1番優先度が高いのは、style属性の指定方法
- 管理面からlink要素で外部ファイルを読み込む方法がよく使われる
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します