ここでは、IT系企業の新人エンジニア向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
目次
1. なぜ、新人エンジニア研修で見出しとリストを学ぶのか、その理由
ユーザーにとって読みやすいWebサイトは構造化されています。
その構造をつくるのが見出しです。
また、弊社の新人エンジニア研修ではメニューを作ることがあります。
実はメニューはリストから作成されていることが多いのです。
ということでこの知識は大切になります。
2. 見出しを作成する
前回は「1.HTMLとCSSの雛形を作成する」方法について学びました。
今回は、その雛形に見出しとヘッダーとフッターを追加することで、読み手に文章の構造が伝わりやすくしてみたいと思います。
2.1 見出しのhタグ
見出しタグのhを使うと文章の構造を示すことができます。
<アウトプット>
h1の見出しです
h2の見出しです
h3の見出しです
h4の見出しです
h5の見出しです
h6の見出しです
(注:このページにはCSSによる装飾がかかっています)
<ソースコード>
h1~h6まであり、数字が大きいほどだんだん細かい見出しになります。
表示したい見出しのサイズに応じて、h1~h6を使い分けます。
ちなみに、“h”というのはheading(見出し)という意味です。
3. リストを作成する
番号付きリストや箇条書きリストはどちらもliタグを使うという点では同じです。
ちなみに、“li”というのはlistの略です。
このliタグをolタグで囲めば番号付きになり、ulタグで囲めば箇条書きになります。
それぞれ、、“ol”はordered list の略で順序のあるリスト、“ul”はunordered listの略で順序がないリストです。
略語まで押さえれば覚えられますね。
以上、今回は「見出しとリスト表示」を学びました。
次回は、「段落と改行で見やすくする」方法について学んでいきましょう。
<まとめ:隣の人に正しく説明できたらチェックを付けましょう>
□見出しタグのhを使うと文章の構造を示すことができる
□番号付きリストや箇条書きリストはどちらもliタグを使う
□liタグをolタグで囲めば番号付きになり、 liタグを ulタグで囲めば箇条書きになる
【今回の復習Youtube】