6日でできる 新HTML入門｜CSSの基本②
CSSをまとめて書けるようになると、Webページのデザインはもっと効率よく、もっと管理しやすくなります。
前回のCSSの基本①では、HTMLタグの中にstyle属性を直接書いて、1つの要素だけにCSSを指定する方法を学びました。style属性は手軽に試せる便利な方法ですが、同じデザインを何度も使いたい場合には少し不便です。
たとえば、ページ内にあるすべてのh2要素を同じ背景色にしたい場合、1つずつstyle属性を書くと手間がかかります。あとから色を変更したくなったときも、すべての箇所を修正しなければなりません。
そこで使うのが、head要素内にstyle要素を置き、CSSをまとめて定義する方法です。CSSをまとめて書くことで、複数の要素へ同じデザインを一括で適用できます。
ここでは、style要素の基本、タグセレクタ、クラスセレクタ、IDセレクタについて、サンプルHTMLを使いながら丁寧に解説します。CSSをまとめて管理する考え方を身につけると、HTMLとCSSの役割分担がより分かりやすくなります。
style要素を使うとCSSをまとめて書ける
style属性は、HTMLタグの中に直接CSSを書く方法でした。たとえば、特定のp要素だけ文字サイズを変えたい場合には便利です。
しかし、ページ内の複数の要素に同じデザインを指定したい場合、style属性を何度も書くのは効率的ではありません。そこで、HTMLファイルのhead要素内にstyle要素を置き、その中にCSSをまとめて書きます。
基本の形は次のようになります。
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<style>
h2 {
background-color:darkgreen;
color:white;
}
</style>
</head>style要素の中に書いたCSSは、body要素内にある該当するHTML要素へ適用されます。たとえば、h2に対してCSSを書けば、ページ内のh2要素にまとめてスタイルを指定できます。
| 書く場所 | 役割 |
|---|---|
| head要素 | ページの設定情報を書く場所 |
| style要素 | HTMLファイル内にCSSをまとめて書く場所 |
| body要素 | 実際に表示する見出しや本文を書く場所 |
style要素を使うと、HTMLの本文部分をすっきり保ちながら、デザイン指定をhead要素内で管理できます。
図1：head要素内でCSSをまとめて管理する
この図から分かること
style要素は、HTMLファイルのhead要素内に書きます。ここにCSSをまとめて定義すると、body要素内にある見出しや段落へスタイルを適用できます。
style属性のように1つずつHTMLタグへ直接書くのではなく、style要素にまとめて書くことで、CSSの管理がしやすくなります。ページ内で同じデザインを繰り返し使いたいときに便利です。
CSSは複数行で書いてもよい
CSSは、1行で書くことも、複数行に分けて書くこともできます。
たとえば、次のように1行で書けます。
h2 { background-color:darkgreen; color:white; padding:6px; }ただし、プロパティが増えると1行では読みにくくなります。そのため、学習や実務では、次のように複数行に分けて書くことがよくあります。
h2 {
background-color:darkgreen;
color:white;
padding:6px;
}CSSでは、余分な半角スペースや改行は基本的に無視されます。そのため、読みやすいように改行やインデントを入れても、CSSの意味は変わりません。
| 書き方 | 特徴 |
|---|---|
| 1行で書く | 短い指定ならコンパクトに書ける |
| 複数行で書く | プロパティが増えても読みやすい |
| インデントを入れる | どこからどこまでが指定内容か分かりやすい |
CSSに慣れるまでは、複数行で書く方法がおすすめです。どのセレクタに、どのプロパティを指定しているのかが見やすくなります。
セレクタはCSSを適用する相手を選ぶ
style要素の中にCSSを書くときは、どのHTML要素にCSSを適用するのかを指定する必要があります。この「適用する相手を選ぶ部分」をセレクタと呼びます。
たとえば、次のCSSでは、h2がセレクタです。
h2 {
background-color:darkgreen;
color:white;
}これは、ページ内のすべてのh2要素に対してCSSを適用するという意味です。
CSSの基本形は、次のように考えると分かりやすいです。
セレクタ {
プロパティ:値;
}| 部分 | 役割 |
|---|---|
| セレクタ | どの要素にCSSを適用するかを指定する |
| プロパティ | 何を変更するかを指定する |
| 値 | どのように変更するかを指定する |
| 波かっこ | CSS指定の範囲を囲む |
CSSでは、このセレクタの使い方がとても大切です。タグ名で選ぶ方法、class属性で選ぶ方法、id属性で選ぶ方法を使い分けることで、必要な要素にだけデザインを適用できます。
タグセレクタで同じタグにまとめて指定する
タグセレクタは、HTMLタグ名をそのまま使ってCSSを適用する方法です。
たとえば、h2要素すべてに同じスタイルを指定したい場合は、次のように書きます。
h2 {
background-color:darkgreen;
color:white;
padding:6px;
}このCSSでは、ページ内にあるすべてのh2要素に対して、背景色、文字色、内側の余白が指定されます。
| セレクタ | 対象 |
|---|---|
| h1 | すべてのh1要素 |
| h2 | すべてのh2要素 |
| p | すべてのp要素 |
| li | すべてのli要素 |
タグセレクタは、同じ種類の要素にまとめてデザインを適用したいときに便利です。たとえば、すべての段落の文字サイズをそろえたり、すべてのh2見出しに背景色を付けたりできます。
h2要素に共通スタイルを指定するHTMLファイルの例
ここでは、本の紹介ページを例にして、すべてのh2要素に同じデザインを指定します。
ファイル名： Lesson9-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>本の紹介ページ</title>
<style>
h2 {
background-color:darkgreen;
color:white;
padding:6px;
}
</style>
</head>
<body>
<h1>今月のおすすめ本</h1>
<h2>森の図書館 著：青山ひかり</h2>
<p>静かな森にある小さな図書館を舞台にした、心温まるファンタジー小説です。</p>
<h2>夜空の手紙 著：高橋まこと</h2>
<p>星が見える町で出会った人々の交流を描いた、やさしい雰囲気の物語です。</p>
</body>
</html>ブラウザの表示例
このHTMLでは、head要素内のstyle要素にh2セレクタを書いています。body要素内にはh2要素が2つありますが、どちらにも同じCSSが適用されます。
style属性を使う場合、2つのh2要素それぞれにCSSを書く必要があります。しかし、タグセレクタを使えば、h2というタグ名を指定するだけで、ページ内のh2要素にまとめてスタイルを適用できます。
複数のタグセレクタをまとめて定義する
style要素の中には、複数のセレクタを続けて書けます。たとえば、h2要素には背景色と文字色を指定し、p要素には文字サイズと行間を指定する、といった書き方ができます。
h2 {
background-color:darkgreen;
color:white;
padding:6px;
}
p {
font-size:14pt;
line-height:1.6;
}このCSSでは、h2要素とp要素に別々のスタイルを指定しています。
| セレクタ | 指定内容 |
|---|---|
| h2 | 背景色、文字色、内側余白 |
| p | 文字サイズ、行間 |
line-heightは行の高さを指定するCSSプロパティです。文章の行間を広げると、本文が読みやすくなる場合があります。
font-sizeは文字サイズを指定するプロパティです。本文の文字サイズをそろえたいときに使います。
図2：タグセレクタで複数の要素へ一括指定する
この図から分かること
タグセレクタを使うと、同じタグ名を持つ要素にまとめてCSSを適用できます。h2をセレクタにすれば、ページ内のh2要素へ同じスタイルを指定できます。
また、style要素の中には複数のセレクタを続けて書けます。h2には見出し用のデザイン、pには本文用のデザインというように、要素の役割ごとにCSSを整理できます。
h2要素とp要素にCSSを指定するHTMLファイルの例
次に、h2要素だけでなく、p要素にもCSSを指定してみましょう。
ファイル名： Lesson9-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>本の紹介ページ</title>
<style>
h2 {
background-color:darkgreen;
color:white;
padding:6px;
}
p {
font-size:14pt;
line-height:1.6;
}
</style>
</head>
<body>
<h1>今月のおすすめ本</h1>
<h2>森の図書館 著：青山ひかり</h2>
<p>静かな森にある小さな図書館を舞台にした、心温まるファンタジー小説です。</p>
<h2>夜空の手紙 著：高橋まこと</h2>
<p>星が見える町で出会った人々の交流を描いた、やさしい雰囲気の物語です。</p>
</body>
</html>ブラウザの表示例
このHTMLでは、h2要素とp要素にそれぞれ別のCSSを指定しています。
h2要素には、背景色、文字色、paddingを指定しています。paddingは、要素の内側に余白を作るCSSプロパティです。見出しの文字と背景の端が近すぎると窮屈に見えるため、内側に余白を入れると読みやすくなります。
p要素には、font-sizeとline-heightを指定しています。font-sizeで本文の文字サイズを指定し、line-heightで行の高さを指定しています。本文が複数行になる場合、行間が少し広がると読みやすくなります。
クラスセレクタで一部の要素だけにCSSを適用する
タグセレクタは、同じタグすべてにCSSを適用する方法です。しかし、同じp要素でも、一部の段落だけ目立たせたい場合があります。
そのようなときに使うのがclass属性です。HTML側で要素にclass属性を付け、CSS側ではクラスセレクタを使って指定します。
たとえば、p要素の中でclass属性の値がhighlightのものだけにCSSを適用したい場合は、次のように書きます。
p.highlight {
background-color:#ffeb3b;
padding:6px;
}このCSSは、p要素のうち、class="highlight" が付いているものだけを対象にします。
HTML側では、次のように書きます。
<p class="highlight">この段落を目立たせます。</p>| 書き方 | 意味 |
|---|---|
| p.highlight | class属性の値がhighlightであるp要素だけを選ぶ |
| .highlight | class属性の値がhighlightであるすべての要素を選ぶ |
| class="highlight" | HTML側でクラス名highlightを付ける |
クラスは、複数の要素に同じ名前を付けられます。そのため、複数の段落や見出しに同じデザインを使いたいときに便利です。
p.highlightでp要素だけを指定するHTMLファイルの例
ここでは、クッキー紹介ページを例にして、class属性の値がhighlightであるp要素だけを目立たせます。
ファイル名： Lesson9-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クッキー紹介ページ</title>
<style>
p.highlight {
background-color:#ffeb3b;
padding:6px;
border-radius:4px;
}
</style>
</head>
<body>
<h1 class="highlight">今月のおすすめクッキー</h1>
<p class="highlight">チョコチップクッキーは、香ばしい生地とチョコの甘さが楽しめる人気商品です。</p>
<p class="highlight">ナッツクッキーは、ざくざくした食感と香りのよさが魅力です。</p>
<p>季節限定商品のため、販売期間が変更になる場合があります。</p>
</body>
</html>ブラウザの表示例
このHTMLでは、h1要素にもclass="highlight" が付いています。しかし、CSSはp.highlightと書いているため、対象になるのはclass属性の値がhighlightであるp要素だけです。
つまり、class="highlight" が付いていても、h1要素はp.highlightの対象にはなりません。
p.highlightは、タグ名とクラス名を組み合わせたセレクタです。同じクラス名を使っていても、特定のタグだけにCSSを適用したい場合に便利です。
| 要素 | class属性 | p.highlightの対象 |
|---|---|---|
| h1要素 | highlight | 対象外 |
| 1つ目のp要素 | highlight | 対象 |
| 2つ目のp要素 | highlight | 対象 |
| 3つ目のp要素 | なし | 対象外 |
このように、タグ名とクラス名を組み合わせると、CSSを適用する範囲を細かく調整できます。
クラス名だけで指定する
クラスセレクタは、タグ名を付けずにクラス名だけで指定することもできます。クラス名だけで指定する場合は、先頭にドットを付けます。
.highlight {
background-color:#ffeb3b;
padding:6px;
border-radius:4px;
}この書き方では、class="highlight" が付いているすべての要素が対象になります。p要素だけでなく、h1要素やli要素などにも同じCSSが適用されます。
| セレクタ | 対象 |
|---|---|
| p.highlight | class属性の値がhighlightであるp要素だけ |
| .highlight | class属性の値がhighlightであるすべての要素 |
クラス名だけの指定は、複数の種類のタグに同じデザインを使いたいときに便利です。たとえば、見出しと段落の両方を同じように目立たせたい場合は、.highlightを使うと分かりやすくなります。
.highlightでクラスをまとめて指定するHTMLファイルの例
次に、タグ名を限定せず、class属性の値がhighlightであるすべての要素にCSSを適用してみます。
ファイル名： Lesson9-4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クッキー紹介ページ</title>
<style>
.highlight {
background-color:#ffeb3b;
padding:6px;
border-radius:4px;
}
</style>
</head>
<body>
<h1 class="highlight">今月のおすすめクッキー</h1>
<p class="highlight">チョコチップクッキーは、香ばしい生地とチョコの甘さが楽しめる人気商品です。</p>
<p class="highlight">ナッツクッキーは、ざくざくした食感と香りのよさが魅力です。</p>
<p>季節限定商品のため、販売期間が変更になる場合があります。</p>
</body>
</html>ブラウザの表示例
このHTMLでは、CSSセレクタが.highlightになっています。そのため、h1要素もp要素も、class属性の値がhighlightであれば同じCSSの対象になります。
Lesson9-3.htmlではp.highlightを使っていたため、h1要素は対象外でした。Lesson9-4.htmlでは.highlightを使っているため、h1要素も対象になります。
この違いは、クラスセレクタを理解するうえでとても大切です。
図3：p.highlightと.highlightの違い
この図から分かること
p.highlightは、p要素であり、さらにclass属性の値がhighlightである要素だけを選びます。そのため、同じhighlightクラスが付いていても、h1要素は対象になりません。
一方、.highlightは、タグの種類を限定しません。class属性の値がhighlightであれば、h1要素でもp要素でも対象になります。CSSをどの範囲に適用したいかによって、セレクタを使い分けることが大切です。
IDセレクタで特定の1要素だけにCSSを適用する
クラスセレクタは、複数の要素に同じクラス名を付けて使えます。一方、id属性は、ページ内の特定の1要素を識別するために使います。
CSSでid属性を指定するときは、先頭に#を付けます。
#footer-note {
font-size:10pt;
color:#666666;
}HTML側では、次のようにid属性を指定します。
<p id="footer-note">補足情報をここに書きます。</p>| 種類 | CSSでの書き方 | HTMLでの書き方 | 主な使い方 |
|---|---|---|---|
| クラス | .highlight | class="highlight" | 複数の要素に同じスタイルを使う |
| ID | #footer-note | id="footer-note" | 特定の1要素を指定する |
id属性の値は、同じページ内で重複しないようにします。1つのページの中で、同じid名を複数の要素に付けるのは避けます。
IDセレクタは、ページ内で1か所だけ特別なスタイルを適用したい場合に向いています。たとえば、注意書き、フッターの補足、特定の案内文などに使えます。
IDセレクタを使ったHTMLファイルの例
ここでは、スムージー紹介ページの最後にある注意書きだけにCSSを指定します。
ファイル名： Lesson9-5.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スムージー紹介ページ</title>
<style>
#footer-note {
font-size:10pt;
color:#666666;
border-top:1px dashed #cccccc;
margin-top:12px;
padding-top:8px;
}
</style>
</head>
<body>
<h1>夏限定スムージー</h1>
<p>マンゴーパインスムージーは、南国らしい甘い香りが楽しめる一杯です。</p>
<p>ベリーヨーグルトスムージーは、ほどよい酸味とすっきりした後味が特徴です。</p>
<p id="footer-note">価格は税込です。販売内容は店舗によって異なる場合があります。</p>
</body>
</html>ブラウザの表示例
このHTMLでは、最後のp要素にid="footer-note" を付けています。CSS側では#footer-noteと書き、このidを持つ要素だけにスタイルを適用しています。
指定しているCSSの内容は次のとおりです。
| CSS | 説明 |
|---|---|
| font-size:10pt; | 文字サイズを小さめにする |
| color:#666666; | 文字色をグレーにする |
| border-top:1px dashed #cccccc; | 上側に点線の境界線を付ける |
| margin-top:12px; | 要素の外側上部に余白を作る |
| padding-top:8px; | 要素の内側上部に余白を作る |
border-topは、要素の上側に線を付けるCSSプロパティです。1pxは線の太さ、dashedは点線、#ccccccは線の色を表しています。
margin-topは要素の外側の上方向の余白、padding-topは要素の内側の上方向の余白です。似ている言葉ですが、余白ができる場所が異なります。
class属性とid属性の使い分け
class属性とid属性は、どちらもHTML要素に名前を付けるために使います。ただし、目的が異なります。
class属性は、複数の要素に同じ名前を付けて、同じCSSをまとめて適用したいときに使います。たとえば、複数のおすすめ商品を同じ背景色で目立たせたい場合に便利です。
id属性は、ページ内で特定の1要素を識別したいときに使います。たとえば、ページの最後にある注意書きや、ページ内リンクの移動先などに使います。
| 属性 | CSSでの指定 | 同じページ内での使い方 | 向いている場面 |
|---|---|---|---|
| class属性 | .クラス名 | 複数の要素に使える | 同じスタイルを複数箇所に適用する |
| id属性 | #ID名 | 基本的に1つの要素に使う | 特定の1箇所を指定する |
CSSを管理しやすくするには、同じデザインを繰り返し使うものはclass属性、1つだけ特別に扱いたいものはid属性と考えると分かりやすいです。
style属性、style要素、セレクタの違い
CSSを学ぶと、style属性、style要素、セレクタという言葉が出てきます。それぞれの役割を整理しておきましょう。
| 種類 | 書く場所 | 特徴 |
|---|---|---|
| style属性 | HTMLタグの開始タグ内 | その要素だけに直接CSSを指定する |
| style要素 | head要素内 | HTMLファイル内にCSSをまとめて書く |
| タグセレクタ | style要素内 | 指定したタグ名の要素へまとめて適用する |
| クラスセレクタ | style要素内 | class属性を持つ要素へ適用する |
| IDセレクタ | style要素内 | id属性を持つ特定の要素へ適用する |
style属性は手軽ですが、数が増えると管理しにくくなります。style要素を使うと、CSSをまとめて書けるため、ページ全体のデザインを管理しやすくなります。
さらに、タグセレクタ、クラスセレクタ、IDセレクタを使い分けることで、CSSを適用する範囲を細かく調整できます。
CSSをまとめて書くと管理しやすくなる
CSSをまとめて書く大きなメリットは、修正しやすくなることです。
たとえば、ページ内にh2要素が10個あるとします。すべてのh2要素にstyle属性で直接CSSを書いている場合、色を変更したいときは10か所を修正しなければなりません。
しかし、style要素内でh2セレクタを使っていれば、CSSの定義を1か所変更するだけで、すべてのh2要素に反映できます。
| 書き方 | 修正のしやすさ |
|---|---|
| style属性で個別に指定 | 同じ変更を複数箇所で行う必要がある |
| style要素とセレクタで指定 | CSS定義を1か所直せばよい |
Webページが大きくなるほど、CSSをまとめて管理する考え方が重要になります。最初は少し難しく感じるかもしれませんが、セレクタの考え方を覚えると、効率よくデザインを整えられるようになります。
CSSがうまく効かないときに確認すること
CSSを書いても思った通りに反映されない場合は、次の点を確認してみましょう。
| 確認項目 | 内容 |
|---|---|
| style要素の場所 | head要素内にstyle要素を書いているか |
| セレクタ名 | h2、p、.highlight、#footer-noteなどを正しく書いているか |
| class属性の値 | HTML側のclass名とCSS側のクラス名が一致しているか |
| id属性の値 | HTML側のid名とCSS側のID名が一致しているか |
| ドットと# | classは.、idは#を使っているか |
| コロンとセミコロン | プロパティ:値; の形になっているか |
| 波かっこ | セレクタの指定範囲を{ }で囲んでいるか |
| 全角記号 | ：；＃などの全角記号が混ざっていないか |
特に、class属性とid属性では、CSS側の記号が異なります。class属性を指定するときは.クラス名、id属性を指定するときは#ID名です。
また、HTML側でclass="highlight" と書いているのに、CSS側で.highliteのようにスペルが違っていると、CSSは適用されません。名前は完全に一致させる必要があります。
使用したタグ、属性、CSS一覧
| 種類 | 記述例 | 用途 |
|---|---|---|
| style要素 | <style> CSS定義 </style> | head要素内にCSSをまとめて書く |
| タグセレクタ | h2 { ... } | 指定したタグ名の要素すべてにCSSを適用する |
| タグセレクタ | p { ... } | すべてのp要素にCSSを適用する |
| クラスセレクタ | p.highlight { ... } | highlightクラスを持つp要素だけにCSSを適用する |
| クラスセレクタ | .highlight { ... } | highlightクラスを持つすべての要素にCSSを適用する |
| IDセレクタ | #footer-note { ... } | footer-noteというidを持つ要素にCSSを適用する |
| class属性 | class="highlight" | 複数の要素に同じ分類名を付ける |
| id属性 | id="footer-note" | 特定の1要素に識別名を付ける |
| background-color | background-color:darkgreen; | 背景色を指定する |
| color | color:white; | 文字色を指定する |
| padding | padding:6px; | 要素の内側の余白を指定する |
| font-size | font-size:14pt; | 文字サイズを指定する |
| line-height | line-height:1.6; | 行の高さを指定する |
| border-radius | border-radius:4px; | 角の丸みを指定する |
| border-top | border-top:1px dashed #cccccc; | 要素の上側に線を指定する |
| margin-top | margin-top:12px; | 要素の外側上部の余白を指定する |
| padding-top | padding-top:8px; | 要素の内側上部の余白を指定する |