HTML/CSS：CSSとは・書き方3種
1学習の目的
- CSSの基本文法を理解し、HTMLに見た目を与えられるようになる。3種類の書き方を使い分けられるようになる。
- 同じ要素に複数の指定が当たったときの優先順位を理解する。「なぜCSSが効かないのか」で悩む時間を減らせるようになる。
2基礎解説
HTML編で作ったページは、まだ装飾されていません。CSSは「どの要素を、どう見せるか」を指定する言語です。HTMLが骨組みなら、CSSは服装にあたります。
| 書き方 | 場所 | 使いどころ |
|---|---|---|
| 外部ファイル | style.css を link で読み込む | 実務ではこれ |
| head 内 | <style> … </style> | 1ページだけの調整 |
| インライン | <p style="…"> | その場限りの上書き |
- CSSの基本形は「セレクタ { プロパティ: 値; }」。p { color: red; } なら「すべての p を赤にする」という意味。値の後ろのセミコロンを忘れない。
- 後から書いたものが勝つ。同じ強さの指定が2つあれば、下に書いたほうが適用される。CSSが効かないときは、後ろで上書きされていないか確認する。
- インラインが最も強い。<p style="color:green"> は、style タグの指定より優先される。だから安易に使うと後で困る。
- 親の指定は子に受け継がれる（継承）。body { color: navy; } と書けば、中の p もすべて紺色になる。文字色やフォントは継承されるが、余白や枠線は継承されない。
- !important を付けると最優先になるが、使うと優先順位が壊れて管理不能になる。最後の手段であり、基本的には使わない。
現場使用例：実務では外部ファイル（style.css）に書くのが基本。1つのCSSを全ページで共有でき、修正も1箇所で済む。
<!-- ① 外部ファイル（実務の基本） -->
<head>
<link rel="stylesheet" href="style.css">
</head>
/* style.css の中身 */
p {
color: red; /* 文字色 */
font-size: 16px; /* 文字の大きさ */
}
<!-- ② head 内に直接書く -->
<head>
<style>
p { color: red; }
</style>
</head>
<!-- ③ インライン（その要素だけ） -->
<p style="color: blue;">この段落だけ青</p>
/* 優先順位：インライン > style/外部ファイル */
<style>p { color: red; }</style>
<p style="color: green;">緑になる</p>
/* 同じ強さなら後勝ち */
p { color: red; }
p { color: blue; } /* こちらが適用される */
/* 継承：親の指定が子に伝わる */
body { color: navy; } /* 中の p もすべて紺色に */
/* コメントはスラッシュとアスタリスクで囲む */
3基本ドリル（10問）
p の色が赤
<style>p { color: red; }</style> と書き、その後に <p> を置く。
<style>
p {
color: red;
}
</style>
<p>赤い文字です。</p>セレクタ { プロパティ: 値; } が基本形。p というセレクタが「どの要素に適用するか」を決めている。
A. p = color: red; B. p { color: red; } C. p(color: red) D. color(p) = red 選択★☆☆無料
解答 == B
波カッコで囲み、コロンで区切る。
B
セレクタ・波カッコ・プロパティ・コロン・値・セミコロン——この6要素がCSSの基本構造。
h1 のサイズと色が正しい
1つのセレクタに複数のプロパティを書ける。それぞれセミコロンで区切る。
<style>
h1 {
font-size: 32px;
color: navy;
}
</style>
<h1>見出し</h1>1つのセレクタに何個でもプロパティを書ける。各行の末尾のセミコロンを忘れると、それ以降が無効になる。
<style>
p {
____: blue;
}
</style>
<p>青い文字</p>p の色が青
「色」を意味する5文字のプロパティ。
color
color は文字色。背景色は background-color で、別のプロパティになる（HT10）。
A. style タグ B. インライン C. 両方混ざる D. エラーになる 選択★☆☆無料
解答 == B
より要素に近い指定が強い。
B
インラインが最優先。だからこそ安易に使うと、後からCSSで変更できなくなり困ることになる。
p の色が緑
<p style="color: green;"> と書く。
<p style="color: green;">この段落だけ緑</p>
その要素だけに適用される。ただし他のページで再利用できず、修正も面倒になるので、実務では極力避ける。
<head> <____ rel="stylesheet" href="style.css"> </head>
link タグが存在する
「つなぐ」を意味する4文字のタグ。閉じタグは不要。
link
link で外部ファイルを読み込む。実務ではこの方法が基本で、1つのCSSを全ページで共有できる。
A. 赤 B. 青 C. 紫 D. エラー 選択★★☆広告解放
解答 == B
同じ強さの指定なら、どちらが優先されるか。
B
後に書いたほうが勝つ。CSSが効かないときは、下のほうで上書きされていないか確認するのが第一手。
p の色が navy（継承）
body に指定すれば、中の要素すべてに受け継がれる。
<style>
body {
color: navy;
}
</style>
<p>1つ目の段落</p>
<p>2つ目の段落</p>文字色やフォントは子に継承される。全体の基本設定を body に書いておくと、個別指定が減って管理しやすくなる。
p の色が赤（コメントは無視される）
CSSのコメントはスラッシュとアスタリスクで囲む。HTMLとは書き方が違う。
<style>
/* 文字色の設定 */
p {
color: red;
}
</style>
<p>本文</p>CSSのコメントはスラッシュ＋アスタリスク。HTMLの <!-- --> とは書き方が違うので混同しない。
4実践シナリオ（5問）
h1 と p のスタイルが正しい
2つのセレクタを並べて書く。色は16進数でも指定できる。
<style>
h1 {
color: navy;
font-size: 28px;
}
p {
color: #333333;
font-size: 16px;
}
</style>
<h1>ページタイトル</h1>
<p>本文の段落です。</p>#333333 は少し薄い黒。真っ黒（#000000）より目に優しく、本文の色として広く使われている。
p の色が緑（インラインが勝つ）
style タグとインラインの両方で指定する。
<style>
p {
color: red;
}
</style>
<p style="color: green;">何色になるか</p>インラインが勝って緑になる。style タグの指定は無視される——この強さが、後から変更しにくい原因になる。
p の色が青（後勝ち）
同じセレクタを2回書く。
<style>
p {
color: red;
}
p {
color: blue;
}
</style>
<p>何色になるか</p>後に書いたほうが勝つ。これを知らないと「指定したのに効かない」と延々悩むことになる。
h1 が navy、p は gray（継承）
body の指定は継承されるが、h1 に個別指定すればそちらが優先される。
<style>
body {
color: gray;
}
h1 {
color: navy;
}
</style>
<h1>見出し</h1>
<p>本文です。</p>継承より個別指定が優先される。全体の基本を body に置き、変えたい要素だけ上書きする——これが効率的な書き方。
h1 と h2 が両方 navy
セレクタをカンマで区切ると、まとめて指定できる。
<style>
h1, h2 {
color: navy;
}
</style>
<h1>大見出し</h1>
<h2>中見出し</h2>カンマ区切りで複数のセレクタをまとめられる。同じスタイルを何度も書かずに済み、修正も1箇所で完結する。
5仕上げ課題
CSSの指定（style タグに書くこと）
① body：文字色 #333333、文字サイズ 16px
② h1：文字色 navy、文字サイズ 32px
③ h2：文字色 navy、文字サイズ 24px
※ ②③はカンマ区切りで色をまとめて指定し、サイズは個別に書くこと
④ a：文字色 #0066cc
HTMLの内容
・h1「ゼロカラカフェ」
・段落「静かな時間を過ごせるカフェです。」
・h2「アクセス」
・段落（中にリンク「地図を見る」／href="#"）
確認したいこと：段落の色は body から継承され、リンクだけ別の色になる 総合★★★広告解放
すべての要素のスタイルが正しい
h1, h2 { color: navy; } でまとめ、その後に h1 { font-size: 32px; } と h2 { font-size: 24px; } を個別に書く。p には色を指定せず、body から継承させる。
<style>
body {
color: #333333;
font-size: 16px;
}
h1, h2 {
color: navy;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 24px;
}
a {
color: #0066cc;
}
</style>
<h1>ゼロカラカフェ</h1>
<p>静かな時間を過ごせるカフェです。</p>
<h2>アクセス</h2>
<p><a href="#">地図を見る</a></p>段落には色を1度も指定していないのに、#333333 になっている。これが継承の働きだ。body に基本設定を書いておけば、個別の指定が最小限で済む。
一方、リンクだけは継承されていない。a 要素はブラウザが最初から青色を割り当てているため、body の色を上書きしてしまう。だからリンクの色を変えたいなら、明示的に指定する必要がある。「継承されるはず」と思い込んでいると、ここで詰まる。
h1, h2 { color: navy; } のカンマ区切りにも意味がある。共通する部分はまとめ、違う部分だけ個別に書く——これがCSSを短く保つ基本の考え方だ。もし h1 と h2 に別々に color を書いていたら、色を変えるときに2箇所直す必要があった。
ここまでで「CSSをどこに書き、どう優先されるか」は理解できた。しかし今のセレクタは要素名だけで、「特定の1つだけ」を狙えない。次章ではクラスやIDを使い、狙った要素に正確にスタイルを当てる方法を学ぶ。