ページを組み立てる

いま見ているこのページも、あなたが毎日開いているサイトも、中身は文字でできている。HTML という書き方で「ここは見出し」「ここは段落」と意味をつけ、CSS という書き方で「見出しは大きく、青く」と見た目を決めている。この章では、その2つの入口に立つよ。

まず押さえたいのが、HTML と CSS の役割分担だ。HTML は「これは何か」を書く。CSS は「それをどう見せるか」を書く。文字を大きくしたいからといって見出しタグを使うのではなく、見出しだから見出しタグを使い、大きさは CSS で決める。この分担を最初に体に入れておくと、あとで迷わなくなる。

HTML の書き方は単純だよ。<p> で始めて </p> で閉じる。この囲みを タグ と呼び、囲まれた中身がそのタグの意味を持つ。段落なら <p>、見出しなら <h1> から <h6>、リンクなら <a>。覚えるタグはたくさんあるように見えて、よく使うものは20個くらいしかない。

タグは入れ子にできる。段落の中にリンクを入れる、リストの中に項目を並べる。入れ子の対応が崩れると表示も崩れるので、開いたら必ず閉じる、という習慣をここでつけておこう。

CSS のほうは「どれを、何を、どうする」の3点セットで書く。h1 { color: red; } なら、「h1 を、色を、赤に」だ。この「どれを」の部分を セレクタ と呼ぶ。タグの名前で指定するのが一番単純な方法だけれど、それだけだと「このボタンだけ色を変えたい」ができない。そこで出てくるのが class だよ。要素に自分で名前をつけておいて、その名前で狙い撃ちする。

もうひとつ大事なのが div だ。それ自体には意味がないタグで、いくつかの要素をまとめて1つの箱にするために使う。まとめておくと、その箱ごと位置を動かしたり、まとめて余白をつけたりできる。レイアウトの話に入ると、この「箱で考える」感覚が効いてくる。

章の後半では、ページ全体の骨組み（html head body の構造）と、余白と枠の扱いに進む。余白は地味だけれど、見た目の印象をいちばん大きく左右する部分だよ。要素の内側の余白と外側の余白は別のものとして指定する。この区別があいまいだと、思ったところに隙間ができない、という状態が延々と続くことになる。

CSS で覚えておきたいことがもうひとつある。同じ要素に複数の指定が当たったとき、どれが勝つかというルールだよ。タグ名で指定したものより class で指定したもののほうが強く、後から書いたもののほうが強い。「書いたはずのCSSが効かない」の原因は、たいてい別の指定に負けているだけだ。書きまちがえたと思って見直す前に、まず何かに上書きされていないかを疑ってみよう。

余白のところでは、内側の余白と外側の余白をきちんと区別しておこう。内側は枠の中の隙間で、背景色がついた範囲が広がる。外側は隣の要素との距離で、背景色はつかない。同じ「隙間を空ける」でも、どちらを使うかで見え方が変わるよ。

進めるときは、こまめに表示を確かめるのがいちばんだ。CSS は書いた結果がすぐ目に見えるので、少し書いては見る、を繰り返すのが速い。この教材ではプレビューが横に出るので、打ったそばから変化を確かめられるよ。

この章を抜けると、文章と画像が並んだ簡単なページを、自分の手で最後まで組めるようになる。まだ飾り気はないけれど、これがすべての Web ページの土台だ。この上に、次の章から見た目を積んでいこう。