1. なぜ、新人エンジニア研修で見出しとリストを学ぶのか、その理由
ユーザーにとって読みやすいWebサイトは適切な構造が整えられています。その構造をつくるのが見出しです。
また、弊社の新人エンジニア研修ではメニューを作ることがあります。実はメニューはリストから作成されていることが多いのです。ということで見出しとリストの知識は大切になります。
さらに、段落を使って意味のまとまりごとに区切りをつけた記事は読みやすくなります。そのため、当社の新人エンジニア研修でもこの知識は基本中の基本と言えます。
2. 見出しを作成する
前回は「HTMLとCSSの雛形を作成する」方法について学びました。今回は、その雛形に見出しとヘッダーとフッターを追加することで、読み手に文章の構造が伝わりやすくしてみたいと思います。
2.1 見出しのhタグ
見出しタグのhを使うと文章の構造を示すことができます。
＜アウトプット＞
h1の見出しです
h2の見出しです
h3の見出しです
h4の見出しです
h5の見出しです
h6の見出しです
（注：このページには当社が設定したCSSによる装飾がかかっています）
＜ソースコード＞
<html>
<head>
<meta charset="UTF-8">
<title>このタイトルはブラウザのタブに表示されます</title>
</head>
<body>
<h1>h1の見出しです</h1>
<h2>h2の見出しです</h2>
<h3>h3の見出しです</h3>
<h4>h4の見出しです</h4>
<h5>h5の見出しです</h5>
<h6>h6の見出しです</h6>
</body>
</html>h1～h6まであり、数字が大きいほど階層が深い見出しになります。ちなみに、“h”というのは【heading:見出し】という意味です。表示したい見出しのサイズに応じて、h1～h6を使い分けたくなりますが、表示サイズはCSSで変更できるため、意味的な分類（大項目から小項目）を意識して使いましょう。
3. リストを作成する
番号付きリスト(<ol>)や箇条書きリスト(<ul>)はどちらも<li>タグを使うという点では同じです。ちなみに、“li”というのは【list】の略です。このliタグをolタグで囲めば番号付きになり、ulタグで囲めば箇条書きになります。それぞれ、“ol”は【ordered list】の略で順序のあるリスト、“ul”は【unordered list】の略で順序がないリストです。略語まで押さえれば覚えられますね。
＜アウトプット＞
＜アウトプット例：番号付きリスト＞
- ひつまぶし
- ういろう
- もつ煮込み
- 天むす
＜アウトプット例：箇条書きリスト＞
- ひつまぶし
- ういろう
- もつ煮込み
- 天むす
＜ソースコード＞
<html>
<head>
<meta charset="UTF-8">
<title>このタイトルはブラウザのタブに表示されます</title>
</head>
<body>
<h5>＜アウトプット例：番号付きリスト＞</h5>
<ol>
<li>ひつまぶし</li>
<li>ういろう</li>
<li>もつ煮込み</li>
<li>天むす</li>
</ol>
<h5>＜アウトプット例：箇条書きリスト＞</h5>
<ul>
<li>ひつまぶし</li>
<li>ういろう</li>
<li>もつ煮込み</li>
<li>天むす</li>
</ul>
</body>
</html>4. 段落のpタグ
段落とは、テキストのブロックのことです。次のアウトプットは3段落の例です。
＜アウトプット＞
ひつまぶし
味噌カツ
手羽先
＜ソースコード(抜粋)＞
<p>ひつまぶし</p>
<p>味噌カツ</p>
<p>手羽先</p>段落を作るにはpタグを使います。
“P”は【paragraph：段落】の頭文字です。
HTMLファイルに改行コードがあってもブラウザには空白として扱われてしまうんですね。そこでpタグを使います。 pタグ には前後の行にマージンが入りますので、それが次の改行との違いです。また、段落には複数の文が集まった文章のまとまりという意味があります。したがって、単に改行したいときには次のbrタグを使います。
5. 改行のbrタグ
もしも、次の金子みすゞの詩を以下の＜アウトプット＞のように改行したい場合はどうしたらいいでしょうか？
朝焼け小焼だ、大漁だ
大羽鰮（おおばいわし）の大漁だ。浜は祭りのようだけど、
海の中では何万の、
鰮（いわし）のとむらいするだろう。
＜アウトプット＞
朝焼け小焼だ、 大漁だ
大羽鰮（おおばいわし）の 大漁だ。
浜は祭りの ようだけど、
海のなかでは 何万の、
鰮（いわし）のとむらい するだろう。
以下のように単にソースコードの中で改行するだけでは改行位置に半角スペースが入るだけで、改行はされません。
＜ソースコード：改行したつもりの例(抜粋)＞
<p>朝焼け小焼だ、 大漁だ
大羽鰮（おおばいわし）の 大漁だ。</p>
<p>浜は祭りの ようだけど、
海のなかでは 何万の、
鰮（いわし）のとむらい するだろう。</p>＜アウトプット：改行したつもりの例＞
朝焼け小焼だ、 大漁だ 大羽鰮（おおばいわし）の 大漁だ。
浜は祭りの ようだけど、 海のなかでは 何万の、 鰮（いわし）のとむらい するだろう。
以上のように半角スペースが入るだけです。
そこで登場するのが改行をするbrタグです。
＜ソースコード：改行できている例(抜粋)＞
<p>朝焼け小焼だ、 大漁だ <br>
大羽鰮（おおばいわし）の 大漁だ。</p>
<p>浜は祭りの ようだけど、<br>
<br>
海のなかでは 何万の、 <br>
鰮（いわし）のとむらい するだろう。</p>このようにbrタグは単独で使い、閉じタグは必要ありません。（空要素【Empty element】といいます）
“br”は【Break:改行】の略です。テキストや画像等をブラウザ上で改行させたいときに使用します。よく見ると<br>と<p>では行間のスペースが違っていますね。<p>の方が段落のまとまりですので、行間が広くなります。
なお、
- brタグは、pタグの中で使う
- brタグは2つ以上連続で使わない
ということを心がけてください。brタグを多用するとコードの可読性が下がり、ブラウザの解釈によって余計な空白ができる可能性があります。段落の区切りにはpタグを使用しましょう。
(上記のイワシの詩は、文学的な表現で途中で改行を入れていますが…)
brタグと同様に閉じタグがなく、単独で使うタグに水平線を表示するhrタグがあります。【horizontal rule:水平方向の罫線】の略語です。以下のような線です。
以上、今回は「見出し、リスト表示、段落と改行」を作成しました。
次回は、「スタイルを設定して表現力アップ」する方法について学んでいきましょう。