見出しをつけよう

01 / 05

文章には見出しがある

本にも新聞にも見出しがある。「ここから何の話か」を短く示す行だね。

HTMLにも見出し専用のタグがあって、段落と組み合わせて文章の骨組みを作るよ。

02 / 05

<h1> は heading（見出し）の h。ページの主役になるタイトルに使う。

段落より大きく太く表示される。何もCSSを書いていないのに大きくなるのは、ブラウザが「見出しなら大きく出す」と決めているからだよ。

<h1>まなびや商店</h1><p>くだものを売っています</p>

03 / 05

見出しタグは <h1> から <h6> まである。数字が大きいほど小さな見出しになるよ。

<h1>まなびや商店</h1><h2>くだもの</h2><h3>りんご</h3>

04 / 05

「ちょっと小さくしたいから <h3>」という選び方はしない。話の階層で選ぶのが正しい使い方だよ。

大きさはあとからCSSで自由に変えられる。タグが表すのは意味のほうなんだ。

<h1>お店の名前</h1><h2>メニュー</h2><p>おすすめを並べました</p><h2>アクセス</h2><p>駅から歩いて5分</p>

05 / 05

見出しと段落、たった2種類でも文章の形はぐっと良くなる。

「見出し → 段落 → 見出し → 段落」のリズムを作ってみよう。