ここでは、IT系企業の新入エンジニア向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

なぜ、新人エンジニア研修で見出しとリストを学ぶのか、その理由。

ユーザーにとって読みやすいWebサイトは構造化されています。

その構造をつくるのが見出しです。

また、弊社の新人エンジニア研修ではメニューを作ることがあります。

実はメニューはリストから作成されていることが多いのです。

ということでこの知識は大切になります。

見出しを作成する

前回は「１．HTMLとCSSの雛形を作成する」方法について学びました。

今回は、その雛形に見出しとヘッダーとフッターを追加することで、読み手に文章の構造が伝わりやすくしてみたいと思います。

見出し

見出しを使うと文章の構造を示すことができます。

＜アウトプット＞

h1の見出しです

h2の見出しです

h3の見出しです

h4の見出しです

h5の見出しです

h6の見出しです

（注：このページにはCSSによる装飾がかかっています）

＜ソースコード＞

<h1>h1の見出しです</h1>
<h2>h2の見出しです</h2>
<h3>h3の見出しです</h3>
<h4>h4の見出しです</h4>
<h5>h5の見出しです</h5>
<h6>h6の見出しです</h6>

h1～h6まであり、数字が大きいほどだんだん細かい見出しになります。

表示したい見出しのサイズに応じて、h1～h6を使い分けます。

ちなみに、“h”というのはheading(見出し)という意味です。

リストを作成する

        <div>
            <h5>＜アウトプット例：番号付きリスト＞</h5>
            <ol>
                <li>ひつまぶし</li>
                <li>ういろう</li>
                <li>もつ煮込み</li>
                <li>天むす</li>
            </ol>
            <h5>＜アウトプット例：箇条書きリスト＞</h5>
            <ul>
                <li>ひつまぶし</li>
                <li>ういろう</li>
                <li>もつ煮込み</li>
                <li>天むす</li>
            </ul>
        </div>

【今回の復習Youtube】

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

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

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