CSS の書き方
この章のゴールは「スタイル定義の方法」を理解することです。
スタイル定義の書き方（文法）
抽象例
CSS でスタイル定義の基本的な書き方は以下のとおりです。（具体例は後述します）
「セレクター」「プロパティ」「プロパティ値」それぞれの言葉が指す内容は次の通りです。
- セレクター: Web ページ内の変更したい表示要素
- プロパティ: 変更したいスタイルの種類
- プロパティ値: プロパティで記述したスタイルをどのように変更するかの具体的な値
上記の説明だけだと、抽象的すぎてイメージが掴みづらいかと思うので、具体例も合わせて見ていきます。
具体例
以下にスタイル定義の具体例を３つ用意しました。
/* 全てのp要素に対して「{...}」の中で定義したスタイルをあてる場合 */
p {
background-color: #00ff00; /* 背景色の指定を16進数のRGBで行う場合 */
color: red; /* 文字色の指定を英単語で行う場合 */
margin: 8px; /* p要素の外側に8pxの空白をつける */
}
/* 「<div class="item"></div>」のようにclass属性の値に「item」とつけた全ての要素に対して「{...}」の中で定義したスタイルをあてる場合 */
.item {
border: 1px solid #000000; /* .itemの外側に1pxの黒い枠線をつける */
border-radius: 8px; /* .itemの四隅に8pxの角丸をつける */
padding: 4px; /* .itemの内側に4pxの空白をつける */
}
/* 「<h1 id="logo"></h1>」のようにid属性の値に「logo」とつけた要素に対して「{...}」の中で定義したスタイルをあてる場合（id属性の値は１つのHTML内で同じ値を重複して持てない） */
#logo {
color: #00ff00; /* 色の指定を16進数のRGBで行う場合 */
font-size: 2rem; /* 文字の大きさを2remのサイズにする */
font-weight: bold; /* #logoを太字にする */
}
それぞれ３つの定義の内容は以下のとおりです。
- ２〜６行目: p 要素に対するスタイル定義を行っている
- ９〜１３行目: class 属性の値が「item」の HTML 要素に対するスタイル定義を行っている
- １６〜２０行目: id 属性の値が「logo」の HTML 要素に対するスタイル定義を行っている
「プロパティ」の部分をみると「background-color」「margin」「border」「font-weight」と言った感じで、様々なプロパティがあることがわかります。
スタイル定義に使えるプロパティの種類は HTML の要素や属性と同じように膨大にあるので、全ての使い方を暗記するというのは現実的ではありません。
「MDN CSS 背景色」「CSS margin 指定方法」のように、キーワードを上手く組み合わせて「ググる」ことで自分が求める解答が書かれた記事を見つけられる力を身につけることが重要です。
「求める解答を見つける力」は少しずつ経験によって精度があがってきます。
普段の学習から「どういうキーワードで調べれば、求める内容が書かれた記事を見つけられるか」を意識して検索することをオススメします。
１つアドバイスをするとしたら、日本語だけでなく「英語」でも調べるようにすると、検索記事の対象範囲が、日本規模から世界規模になるので、日本語でどうしても見つからない場合は「英語」を使って調べることにもチャレンジしましょう。
CSS のプロパティがどれくらいあるか気になる場合は、W3Schools というサイトの「CSS Reference」を確認すると良いでしょう。
プロパティの数が膨大にあって、暗記するのが現実的ではないと言っている理由が伝わるかと思います。
「クラスセレクター」と 「ID セレクター」のルール
２日目で取り上げた「要素の属性」の中の「CSS や JavaScript と一緒に使われる属性」の部分で、「id と class は CSS で利用する」と話したのを覚えているでしょうか？
HTML 要素の「id 属性」「class 属性」は CSS のスタイル定義の際に、「セレクター」部分で利用します。
「id 属性」「class 属性」で指定した値（名前）を CSS で使うときには次のようなルールがあるので、まずはこのルールを覚えておきましょう。
- class 属性の値をスタイル定義のセレクターで使うときは、値の前に「
.」をつける - id 属性の値をスタイル定義のセレクターで使うときは、値の前に「
#」をつける
class 属性の例として、例えば「<p class="foo">...<p>」に対して、class 属性値を使ってスタイル定義を行う場合は以下のようになります。
同様に、id 属性の例として、例えば「<p id="bar">...<p>」に対して、id 属性値を使ってスタイル定義を行う場合は以下のようになります。
スタイルの変更方法は３つある
Web ページのスタイルを定義する方法は、大きく分けて次の３つがあります。
- CSS ファイルにスタイルを定義して HTML から CSS ファイルを読み込む
- style 要素を使う
- HTML の要素に style 属性を追加する
上記３つの内、基本的には「1. CSS ファイルにスタイルを定義して HTML から CSS ファイルを読み込む」でスタイル定義することが一般的です。
そのため、3 つ全てを覚えられなくとも、まずは少なくとも「1. CSS ファイルにスタイルを定義して HTML から CSS ファイルを読み込む」の方法は身につけていきましょう。
HTML から CSS ファイルを読み込む方法については、次回の「HTML から CSS を読み込む」でも詳しく解説します。
1.CSS ファイルにスタイルを定義して HTML から CSS ファイルを読み込む
流れとしては次のとおりです。
- 任意のフォルダに拡張子が「
.css」で終わる CSS ファイルを作る - CSS ファイル内に「スタイル定義の書き方（文法）」のルールでスタイル定義を行う
- HTML の「link 要素」を使って、１で作成した CSS ファイルを読み込む
上記の３つの一連の流れは、次回の「HTML から CSS を読み込む」で動画を使って解説するので、詳細を知りたい場合は「HTML から CSS を読み込む」をご確認ください。
流れの３番目に出てきた「link 要素」の詳細を知りたい場合は、以下の MDN のドキュメントを参照していただけたらと思います。
2.HTML の style 要素を使う
流れとしては次のとおりです。
- HTML の head 要素内に「style 要素」を追加する
- style 要素内に「スタイル定義の書き方（文法）」のルールでスタイル定義を行う
文章だけだとイメージがつきづらいと思うので、以下のサンプルコードをご確認ください。（２日目で解説した「インラインとブロックレベル」で使ったのと同じコード）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
background-color: lightgreen;
}
h2 {
background-color: cyan;
}
p {
background-color: pink;
}
div {
background-color: gray;
}
a {
background-color: yellow;
}
img {
background-color: purple;
}
</style>
</head>
<body>
<h1>インラインとブロックレベル</h1>
<p>
インライン要素の詳細は「<a
href="https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements"
>こちら</a
>」のドキュメントを参照
</p>
<p>
ブロックレベル要素の詳細は「<a
href="https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements"
>こちら</a
>」のドキュメントを参照
</p>
<h2>ブロックレベル要素で囲まれていない画像</h2>
<img
width="30%"
src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
alt="HTML&CSS速習教室"
/>
<img
width="30%"
src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
alt="HTML&CSS速習教室"
/>
<img
width="30%"
src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
alt="HTML&CSS速習教室"
/>
<h2>ブロックレベル要素で1個ずつ囲まれている画像</h2>
<div>
<img
width="30%"
src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
alt="HTML&CSS速習教室"
/>
</div>
<p>
<img
width="30%"
src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
alt="HTML&CSS速習教室"
/>
</p>
<div>
<img
width="30%"
src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
alt="HTML&CSS速習教室"
/>
</div>
</body>
</html>
上記サンプルコードの７〜２６行目部分がまさに「style 要素を使ってスタイル定義を行っている部分」になります。
「style 要素」の詳細を知りたい場合は、以下の MDN のドキュメントを参照していただけたらと思います。
こちらのドキュメントを読むと「<style> 要素は文書の <head> 要素の中に入れる必要があります」と書いてあるのがわかります。
また、「一般に、スタイルを外部スタイルシートに入れて <link> 要素を使用することをより推奨します。」と書かれていることから、基本的には「1. CSS ファイルにスタイルを定義して HTML から CSS ファイルを読み込む」でスタイル定義することが一般的だと言った理由もわかるかと思います。
3.HTML の要素に style 属性を追加する
流れとしては次のとおりです。
- HTML 要素に style 属性を追加する
- style 属性の値として、「スタイル定義の書き方（文法）」の「プロパティ」「プロパティ値」と同じ形式で値をセットする
文章だけだとイメージがつきづらいと思うので、以下のサンプルコードをご確認ください。
上記サンプルコードを読むと「div」「p」の各要素で style 属性を追加しているのがわかります。
また、style 属性にセットした内容を確認すると「background: #ffe7e8;」「margin: 15px;」のように「プロパティ名: プロパティ値;」となっているのがわかります。
これは「スタイル定義の書き方（文法）」でも説明した「プロパティ」と「プロパティ値」の指定方法と同じ形式です。
上記サンプルコードは MDN の「style」で使われているコードを利用
まとめ
今回はスタイル定義の方法を解説しました。
次回は、実際に HTML から CSS ファイルを読み込んで Web ページのスタイルを変更するまでの流れを実際に行っていただきます。
動画で一連の流れを説明するので、動画を観ながら自身のパソコン環境で同じように取り組んでいただけたらと思います^^