ここでは、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】

見出しとリスト(新人エンジニア研修向け解説)最後までお読みいただきありがとうございました。

新人エンジニア研修のプログラムを見てみる

当社は研修講師を募集中です(サブ講師のため未経験者可)