HTMLで文章は表示できたものの、余白も色も思うようにならない。そんなときは、CSSを別ファイルに分けて小さく試しましょう。ここでは一つのページを装飾し、CSSが読み込まれない場合の確認まで扱います。
HTMLをまだ保存していない場合は、HTMLの基本構造と最初の1ページから準備できます。
CSSとは？HTMLのどこを、どう見せるかを書くもの
CSSは、HTMLの文字色・余白・配置などを指定するスタイルシートです。たとえばHTMLのh1という見出しを残したまま、色だけ青へ変えられます。下の例では、HTMLが文章、CSSが見た目を担当します。
二つのファイルを同じフォルダに置く
index.htmlとstyle.cssを用意します。まずは、以下の練習用サンプルで表示の違いを確かめましょう。
index.html
index.html（全体を保存）
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSSを試す</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="card"><h1>Web制作のメモ</h1><p>色と余白を調整します。</p></main>
</body>
</html>style.css
style.css（全体を保存）
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; color: #172235; background: #eef3f8;
font-family: system-ui, sans-serif; line-height: 1.8; }
.card { max-width: 640px; margin-inline: auto; padding: 24px;
background: white; border: 1px solid #ccd6e2; border-radius: 12px; }
h1 { color: #175ea8; font-size: 1.6rem; }
変える値を一つに絞る
まずh1の色だけを変えて、保存・再読み込みします。次に.cardのpaddingを変更して、文字と枠の距離を見ます。一度に多くの値を変えると、何が結果に影響したか分からなくなります。
セレクターは適用先を選び、プロパティは変える性質、値は具体的な指定です。.cardはclassがcardの要素を選びます。colorは主に文字色、backgroundは背景を指定します。
リセットと文字コードは別の話
ブラウザには標準の余白や文字サイズがあります。この例ではbodyのmarginを0にする等、必要な部分だけ指定しています。リセットCSSを使う場合は別途そのファイルを読み込む必要があります。書いていないリセットが自動的に適用されるわけではありません。
ファイルはUTF-8で保存してください。文字化けはCSSの宣言一つで必ず解消できる問題ではなく、保存形式や配信される文字コードも確認します。
反映されないとき
- HTMLとCSSを保存したか。
- link要素のファイル名がstyle.cssと一致するか。
- HTTPで開いている場合は、検証ツールのNetworkでCSSの404を調べる。ファイルをダブルクリックして開くfile://ではHTTPの404と表示が異なるので、下のDevTools記事にあるローカルサーバーの手順を使います。
- Stylesに指定が表示されるか。別の指定に上書きされていないか。
余白の仕組みはボックスモデル、原因の切り分けはChrome DevToolsでの確認へ進めます。
色や余白以外の指定を試すときは、CSSの基本プロパティ12個を使う例で、文字・枠・配置を分けて確認できます。
自分のページへ応用するなら、自己紹介ページの配色と写真を変える例へ進めます。小さなカードから、完成したページへ広げられます。
