ここでは、IT系企業の新入社員向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
見出しを作成する
前回は「１．HTMLとCSSの雛形を作成する」方法について学びました。
今回は、その雛形に見出しとヘッダーとフッターを追加することで、読み手に文章の構造が伝わりやすくしてみたいと思います。
見出し
見出しを使うと文章の構造を示すことができます。
＜アウトプット＞
h1の見出しです
h2の見出しです
h3の見出しです
h4の見出しです
h5の見出しです
h6の見出しです
（注：このページにはCSSによる装飾がかかっています）
＜ソースコード＞
|
1 2 3 4 5 6 |
<h1>h1の見出しです</h1> <h2>h2の見出しです</h2> <h3>h3の見出しです</h3> <h4>h4の見出しです</h4> <h5>h5の見出しです</h5> <h6>h6の見出しです</h6> |
h1～h6まであり、数字が大きいほどだんだん細かい見出しになります。
表示したい見出しのサイズに応じて、h1～h6を使い分けます。
ちなみに、“h”というのはheading(見出し)という意味です。
リストを作成する
番号付きリストや箇条書きリストを使うことがあります。
＜アウトプット例：番号付きリスト＞
- ひつまぶし
- ういろう
- もつ煮込み
- 天むす
＜アウトプット例：箇条書きリスト＞
- ひつまぶし
- ういろう
- もつ煮込み
- 天むす
＜ソースコード＞
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<h5>＜アウトプット例：番号付きリスト＞</h5> <ol> <li>ひつまぶし</li> <li>ういろう</li> <li>もつ煮込み</li> <li>天むす</li> </ol> <h5>＜アウトプット例：箇条書きリスト＞</h5> <ul> <li>ひつまぶし</li> <li>ういろう</li> <li>もつ煮込み</li> <li>天むす</li> </ul> |
どちらも<li>タグを使うという点では同じです。
ちなみに、“li”というのはlistという意味です。
このリストを<ol>タグで囲めば番号付きになり、<ul>タグで囲めば箇条書きになります。
それぞれ、“ol”はordered list の略で順序のあるリスト、“ul”はunordered listの略で順序がないリストです。
とても覚えやすいですね。
