この記事は、プログラミングをまったく知らない人が「AI に頼らず、自分の手でアプリやサイトを作れる」ようになるための連載（全85本）の第6回です。毎日1本ずつ公開します。
この記事でできるようになること
HTML で作ったページに CSS を足して、色・文字・余白で見た目を整えられるようになります。
説明
HTML は「中身」、CSS は「見た目」
今までに書いた HTML は、ページの中身と構造だけを決めていました。だから見た目は白い背景に黒い文字の、そっけない状態です。
家にたとえると、HTML は柱や壁（骨組み）、CSS は壁紙・家具の配置・照明です。骨組みは同じでも、CSS を変えれば別の家に見えます。
CSS の書き方は「だれに・何を・どうする」
CSS は次の形のかたまり（これをルールと呼びます）を並べて書きます。
h1 {
color: red;
font-size: 28px;
}
| 部分 | 呼び方 | 意味 |
|---|---|---|
h1 |
セレクタ | だれに（どのタグに）効かせるか |
color / font-size
|
プロパティ | 何を変えるか |
red / 28px
|
値 | どうするか |
{ } |
ブロック | ルールの範囲 |
プロパティと値の間は :、1行の終わりは ; です。この ; はとても大事で、あとの「よくあるエラー」で実際に壊してみます。
HTML と CSS をつなぐ
CSS は別のファイル（たとえば style.css）に書いて、HTML の <head> の中から読みこむのが基本です。
<link rel="stylesheet" href="style.css">
href には CSS ファイルの場所を書きます。HTML と同じフォルダにあるなら、ファイル名だけで通じます。
今日使うプロパティ
| プロパティ | 効果 | 値の例 |
|---|---|---|
color |
文字の色 |
red / #222222
|
background-color |
背景の色 | #f5f5f0 |
font-family |
書体 |
sans-serif（ゴシック系） |
font-size |
文字の大きさ | 16px |
line-height |
行の高さ（行間） |
1.8（文字の大きさの1.8倍） |
text-align |
文字のそろえ方 | center |
padding |
内側の余白 | 24px |
margin |
外側の余白 | 0 |
border |
枠線 | 2px solid #c0392b |
色の書き方にはいくつか種類があります。この連載では、はじめに覚える2つを使います。red のような名前と、#c0392b のようなカラーコードです。カラーコードは # のあとに6桁（0〜9 と a〜f）が続き、赤・緑・青の強さを表します。まずは名前で十分ですが、細かい色が欲しくなったらカラーコードを使います。
実は、ほかにも書き方があります。
-
カラーコードの桁数: 6桁のほかに、3桁（
#f09は#ff0099と同じ）、4桁・8桁（最後に透明度が付く）があります。 -
関数の書き方:
rgb(255 0 153)、hsl(150 30% 60%)のように、関数で指定する方法もあります（oklch()など新しいものもあります）。 -
キーワード:
currentColor（その要素の文字色）やtransparent（透明）などがあります。
全部を覚える必要はありません。「色の指定には種類がたくさんある」と知っておき、必要になったときに MDN の <color> や <hex-color> を引いてください。
（コメントでご指摘をいただき、「2つ」という書き方を直して、この説明を足しました。）
余白は「額縁」で考える
padding と margin はよく混ざります。絵を額に入れた様子で覚えましょう。
| 場所 | 額縁でいうと | CSS |
|---|---|---|
| 絵と枠線のすき間 | 台紙 |
padding（枠の内側） |
| 枠線そのもの | 額の縁 | border |
| 額と隣の額のすき間 | 壁の余白 |
margin（枠の外側） |
背景色は、padding の部分までぬられます。margin はいつも透明です。
手を動かす
コピーせず、自分で打ってください。
1. 準備
html-practice フォルダを VS Code で開きます。新しく style.css と index.html を作ります（前回までのファイルと名前が重なるときは、css-practice フォルダを作ってその中で進めてください）。
2. HTML を打つ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS の練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>OTOMO ふうの投稿フォーム</h1>
</header>
<main>
<p>今日は<strong>色・文字・余白</strong>を整えます。</p>
<p class="note">この段落だけ、目立たせます。</p>
<a href="#">投稿する</a>
</main>
<footer>
<p>手で書いて覚える個人開発</p>
</footer>
</body>
</html>
class="note" は、タグに自分で決めた名前札をつける属性です。同じ <p> の中でも、この1つだけに別の見た目を当てたいときに使います。
3. style.css を打つ
body {
background-color: #f5f5f0;
color: #222222;
font-family: sans-serif;
font-size: 16px;
line-height: 1.8;
margin: 0;
}
header {
background-color: #1a1a2e;
color: white;
padding: 24px;
}
h1 {
margin: 0;
font-size: 28px;
}
main {
padding: 24px;
}
.note {
color: #c0392b;
border: 2px solid #c0392b;
padding: 12px;
}
a {
color: #0b5fff;
}
footer {
text-align: center;
padding: 16px;
font-size: 14px;
}
見てほしい所が3つあります。
-
bodyに書いたcolorやfont-familyは、中の文字にも引き継がれます（bodyの中の見出しや段落が、何も書かなくても同じ書体になるのはこのためです） -
.noteの.（ドット） は「classがnoteのもの」という意味のセレクタです。ドットがないとnoteというタグを探してしまいます -
margin: 0は、ブラウザが最初から入れている外側の余白を消しています
4. ブラウザで開く
open index.html
濃紺の帯の中に白い見出し、薄いクリーム色の背景、赤い枠で囲まれた段落、青いリンクが出れば成功です。
5. 数字を変えて遊ぶ
.note の padding: 12px を 40px に変えて保存し、ブラウザを再読み込み（Mac は Command + R）してみてください。赤い枠の中の余白が広がります。次に padding を margin に変えると、今度は枠の外側が広がります。内側と外側の違いを目で確かめましょう。
練習問題
答えを見ずに解いてみてください。
-
h1の文字を中央にそろえてください。 -
footerの背景色を#1a1a2e、文字色をwhiteにしてください。 -
class="note"を、「ひとこと」の段落だけでなく、もう1つ別の<p>にも付けて、同じ見た目になることを確かめてください。
よくあるエラーと直し方
CSS も、間違えてエラーメッセージを出しません。「効いていない」だけで気づきにくいので、原因を知っておくと早く直せます。
;（セミコロン）を忘れた
color: #222222; の ; を消して保存してみます。実際にやってみると、この行だけでなく次の行の font-family まで効かなくなります（文字は黒に戻り、書体も指定したゴシックではなくブラウザの初期の書体になりました）。ブラウザが、; がないために次の行までを1つの値として読んでしまうからです。「1行だけでなく、その下の行も効かない」ときは、一番上の行の末尾の ; を疑います。
.（ドット）を忘れた
.note を note と書くと、note というタグを探すので何にも効きません。実際に枠線の太さを調べると 0px（なし）のままでした。クラスの名前札を当てたいときは、必ず . をつけます。
保存したのに変わらない
次の3つを順に確認します。
- VS Code で保存した（
Command + S） - ブラウザを再読み込みした
- HTML の
<link rel="stylesheet" href="style.css">のファイル名が、実際のファイル名と一字も違わない（styles.cssとstyle.cssのような違いに注意）
色の名前を書き間違えた
colour や bakground-color のようにプロパティの綴りが違うと、その行は無視されます。プロパティは英語のスペルの通りに書きます。
答え
1.
h1 {
margin: 0;
font-size: 28px;
text-align: center;
}
既に h1 のルールがあるので、その中に text-align: center; の1行を足します。同じセレクタを2回書くと読みにくくなるので、まとめる方が見やすいです。
2.
footer {
background-color: #1a1a2e;
color: white;
text-align: center;
padding: 16px;
font-size: 14px;
}
3. HTML 側に class="note" を足します。
<p class="note">もう1つの段落も、同じ見た目になります。</p>
CSS は1回書くだけで、class="note" をつけたタグすべてに効きます。これが「ルール」で見た目をまとめて決める CSS の強みです。
次回予告
次回は「#07 CSS のレイアウト：Flexbox と Grid」です。ここまでは上から下へ並ぶだけでしたが、次回は横に並べたり、カードを格子状に並べたりします。