小さなページにスタイルをつける

HTML コースのパン屋のページは、40 行ほどの CSS で色、余白、レイアウトが決まります。HTML はまったく変わりません。

ルールより先に決めごとを

ルールを書く前に、いくつか決めておきましょう。アクセントカラーを一つ、十分なコントラストのある文字色と背景色、フォントスタックを一つ、基本の大きさ、そしてどこでもくり返し使う余白の段階（たとえば 8、16、24 ピクセル）です。少しの値をくり返し使うページは、落ち着いていて意図がはっきり見えます。ボックスごとに少しずつ違うマージンがついたページは、なぜかはだれも言えなくても、ごちゃごちゃして見えます。CSS には、このための機能があります。カスタムプロパティです。

カスタムプロパティ

カスタムプロパティは、ハイフン二つで始まる自分で考えた名前で、値を一つもちます。--accent: #1a5fb4; のように書きます。決めごとは :root（html 要素のこと）に一度だけ定義し、var() でどこでも使います。background: var(--accent); のようにします。カスタムプロパティは文字のプロパティと同じように継承されるので、どの要素もルートで定義されたものを読めます。これで、サイト全体のアクセントカラーを変えるには一行を書きかえるだけになります。メディアクエリの中でプロパティを定義しなおすこともできます。たとえば prefers-color-scheme: dark のときに色を入れかえる、といった使い方です。

:root {
  --accent: #1a5fb4;     /* 6.29:1 on white */
  --ink: #222;
  --paper: #fffdf8;
  --space: 16px;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
header { display: flex; justify-content: space-between; align-items: center;
         flex-wrap: wrap; gap: var(--space); padding: var(--space); }
nav ul { display: flex; gap: var(--space); list-style: none; margin: 0; padding: 0; }
main { max-width: 60rem; margin: 0 auto; padding: var(--space); }
.cards { display: grid; gap: var(--space);
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.card { padding: var(--space); border: 1px solid #ddd; border-radius: 8px; }
img { max-width: 100%; height: auto; }
.btn { background: var(--accent); color: white; border: 0;
       padding: 8px var(--space); border-radius: 6px; font: inherit; }
.btn:hover { background: #154c90; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

スタイルシートを上から順に読む

上のスタイルシートには、ほとんどすべての単元の内容が使われています。ルートには決めごとが入っています。body はフォント、行の高さ、色を一度だけ指定し、継承によってそれがすべての段落に伝わります。ヘッダーは折り返しありのフレックスの行なので、せまいスマートフォンでは、メニューは押しこまれずに名前の下へ移ります。main には max-width と margin: 0 auto がついていて、行を読みやすい長さに保ち、広い画面では内容を中央に置きます。カードは auto-fill のグリッドの書き方を使っているので、メディアクエリなしで一列から何列にも組みかわり、画像ものび縮みします。ボタンにはホバーしたときの色がつき、そして同じくらい大事なこととして、キーボードを使う人のための見えるフォーカスのアウトラインがついています。

実際の画面で確かめる

CSS のテストとは、見ることです。せまいウィンドウ（WCAG のリフローの確認には 320 ピクセル）と広いウィンドウでページを開き、横スクロールや、端にくっついた文字がないか見ましょう。200 パーセントに拡大してみます。Tab キーでページを順にたどり、フォーカスの位置がいつも見えるか確かめます。開発者ツールで文字とボタンのコントラストを調べます。ダークモードや動きを減らす設定に合わせたスタイルを書いたなら、システムのその設定をオンにしてみます。ブラウザーの開発者ツールでは、どんな値でもその場で変えられ、どの要素のボックスモデルも見られます。なぜそれがそこにあるのか、という疑問に答えるいちばん速い方法です。

ここから先は、同じ部品をどんなサイトにも広げていけます。大きなプロジェクトでは、スタイルシートをいくつものファイルに分け、クラスにはその部品が何であるか（カード、ボタン、サイトのヘッダー）で名前をつけ、共有するカスタムプロパティを短い一覧にまとめます。それでも、その下にあるルールは、この九つの単元で学んだものです。