CSSとは｜Webページの見た目を整えるスタイル言語

自分の言葉で説明してみよう

CSSを理解するには、実際の画面で「見た目のルール」を探すのが近道です。

1. ページで一番大きな見出しを探す
2. その見出しの色、文字サイズ、下の余白を見る
3. 本文の行間と左右の余白を見る
4. リンクやボタンの色、形、押しやすさを見る
5. スマホ幅にしたとき、並び方や余白が変わるかを見る

CSSとは、Webページの＿＿＿＿＿＿＿＿＿＿＿＿を整える言語です。
セレクタは、CSSを当てる＿＿＿＿＿＿＿＿＿＿＿＿を選びます。
思った見た目にならないときは、別のルールが＿＿＿＿＿＿＿＿＿＿＿＿いないか確認します。

答えの例は、「見た目」「対象」「上書きして」です。CSSを読むときは、対象、変える項目、値、ルールの重なりに分けると落ち着きます。

マコト

HTMLの骨組みにCSSを重ねると、画面の雰囲気が変わって見えるね

イト

色とか余白とか、並び方はどこで決まるの？

ピコ

そこに関わるのがCSSだよ。HTMLの部品に見た目のルールを重ねるんだ

HTMLが「ページに何があるか」を表す骨組みだとすると、CSSはその骨組みに「どう見せるか」のルールを重ねます。見出しを大きくする、文章の間に余白を作る、リンクの色を変える、スマホでは縦並びにする、といった見た目の調整にCSSが関わります。

第66話「CSSは何を着せる？」では、HTMLの骨組みの横にあるCSS衣装室へ入ります。実際の画面のむこう側で、どの部品にどんな見た目のルールが当たるのかを順序立てて確かめます。

HTMLの部品に見た目のルールを重ねる

HTML側の役割を先に確認したい場合は、HTMLとは を横に置くと、骨組みと見た目の分担が分かれます。

Webページは、HTMLだけでも内容の骨組みを表せます。けれど、普段見るページのように読みやすい余白、わかりやすい色、スマホに合わせた並びを作るには、見た目のルールが必要になります。

ラボのたとえでは、HTMLは設計図、CSSは衣装室です。HTMLの見出し、段落、リンク、画像といった部品に、CSSが色、余白、サイズ、並び方のルールを重ねます。実際には、ブラウザがHTMLとCSSを読み、どの要素にどのスタイルを当てるかを判断します。

1. HTMLでページの部品を作る
2. CSSで対象を選ぶ
3. 色・余白・文字サイズなどを指定する
4. ブラウザがルールを重ねる
5. 画面の見た目として表示される

CSSが使われる場面と変えられるもの

CSSは、見た目に関わる多くの要素を調整できます。

• 色: 文字色、背景色、線の色
• 文字: サイズ、太さ、行間、フォント
• 余白: 要素の外側や内側の空き
• 配置: 横並び、縦並び、中央寄せ
• サイズ: 幅、高さ、最大幅、最小幅
• 装飾: 角丸、影、枠線
• レイアウト: カード、メニュー、2カラム、グリッド
• 画面幅への対応: スマホとパソコンで見た目を変える

「デザイン」と聞くと色や飾りだけを想像しがちですが、CSSは読みやすさや使いやすさにも関わります。ボタンが押しやすい大きさか、本文の行間が詰まりすぎていないか、スマホで横にはみ出していないか。そうした確認にもCSSの考え方が出てきます。

ユイ

CSSは飾りだけではなく、読みやすさや使いやすさにも関係するんですね

イト

ボタンが押しにくいのも、見た目のルールで変わる場合があるんだ

セレクタ・プロパティ・値

CSSの基本は、「どの部品に」「何を」「どう当てるか」です。

簡単な例を見てみます。

h1 {
  color: blue;
  font-size: 32px;
  margin-bottom: 16px;
}

このCSSでは、h1 が対象を選ぶ部分です。これをセレクタと呼びます。color、font-size、margin-bottom は何を変えるかを表すプロパティです。blue、32px、16px はどう変えるかを表す値です。

最初は、次の三つに分けるだけで読みやすくなります。

CSSが暗号のように見えるときも、この三つに戻すと落ち着きます。

HTMLの構造に重ねる

CSSは、HTMLと切り離して考えるより、HTMLの部品に重なるルールとして見ると理解しやすくなります。

たとえばHTMLに見出し、段落、リンクがあるとします。

<h1>CSSとは</h1>
<p>CSSはWebページの見た目を整える言語です。</p>
<a href="/guides/what-is-javascript/">JavaScriptへ進む</a>

ここにCSSを当てると、見出しだけを大きくしたり、段落の行間を広げたり、リンクを押せる場所だとわかる色にしたりできます。

CSSは、HTMLの意味そのものを置き換えるものではありません。見出しは見出し、段落は段落、リンクはリンクです。その構造の上に、読みやすく見せるためのルールを重ねます。

CSSで間違いやすいルールの重なり

CSSの名前は Cascading Style Sheets の略です。Cascading は、複数のルールが重なり、最終的な見た目が決まっていく考え方と関係します。

同じボタンに、ページ全体のルール、ボタン共通のルール、特別なボタンだけのルールが重なることがあります。その場合、どのルールを優先するかがブラウザの中で判断されます。

最初に押さえるなら、次の三つで十分です。

1. CSSのルールは一つだけとは限らない
2. 後から書かれたルールや、より具体的な指定が効くことがある
3. 思った見た目にならないときは、別のCSSが上書きしていないか確認する

実際の制作では、「CSSを書いたのに変わらない」ということがあります。そのときは、対象のセレクタが合っているか、別のルールが重なっていないか、ブラウザに古いCSSが残っていないかを確認します。

スマホとパソコンで見た目を変える

CSSは、画面の幅や条件に合わせて見た目を変えることもできます。

パソコンでは横並びにしたカードを、スマホでは縦並びにする。大きな画面では余白を広くし、小さな画面では余白を少し狭くする。画像が画面からはみ出さないようにする。こうした調整にもCSSが関わります。

第66話のCSS衣装室では、鏡がスマホの幅に変わると、カードの並びや余白が変わりました。これはたとえですが、実際のWeb制作でも画面幅に応じてレイアウトを変えることがあります。

サイト運用でページを確認するときは、パソコンだけでなくスマホ幅でも見ます。文字が小さすぎないか、ボタンが押しにくくないか、横スクロールが出ていないかを確認すると、CSSの役割が現実の画面につながります。

HTMLとCSSがブラウザでどう画面になるかを広く見るなら、Webページ表示の仕組み で確認できます。

CSSの確認クイズ

Q1. CSSは何を整えるための言語ですか？

Webページの色、余白、文字サイズ、レイアウトなどの見た目を整えるための言語です。

Q2. CSSで「どの部品に当てるか」を選ぶ部分は何ですか？

セレクタです。

Q3. CSSはHTMLに対して何をしますか？

HTMLで作られた見出し、段落、リンク、画像などの部品に、色や余白や配置のルールを重ねます。