header（ヘッダー）ナビゲーションメニュー（nav）の作り方

「ナビゲーションメニュー（nav）をどうやってコーディングしたらいいですか？」という質問に答えます。

ナビゲーションメニュー（nav）とは

ナビゲーションメニューとは「Webページの上部に表示する、サイトの案内メニュー」です。ロゴ、メニューで構成されます。

ナビゲーションメニューの作り方

ナビゲーションメニューは、ロゴ部分とメニュー部分を分けて作っていきます。

HTML

①ロゴを作る

• 大枠である「headerタグ」の中に、ページの肝「h1タグ」を入れます。
• h1は「imgタグ（画像）」にします。
• クリックしたらページのトップにリンクできるよう「aタグ」にします。

<header>
  <h1><a href=""><img src="" alt=""></a></h1>
</header>

②メニューを作る

つづいてメニュー部分を作ります。

• メニューは「nav（ナビ）」タグで作ります。
• navの中にli（リスト）タグでリストを作ります。
• リンクで飛ばすために「aタグ」を指定します。

<nav>
    <ul class="main-nav">
        <li><a href="news.html">News</a></li>
        <li><a href="menu.html">Menu</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

ナビゲーションメニューHTMLの完成形

HTMLの完成形です。

headerが大枠になります。その中に「h1でロゴ画像」と「navでメニュー」を作ります。

<header class="page-header wrapper">
    <h1><a href="index.html"><img src="images/logo.svg" class="logo" alt="カフェ ホーム"></a></h1>
    <nav>
        <ul class="main-nav">
            <li><a href="news.html">News</a></li>
            <li><a href="menu.html">Menu</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

次は、CSSで見た目を整えていきます。

CSS

CSSでは、以下の５つをやります。

１．最大幅を指定する

headerに最大幅を指定します。

パソコンなどの大きい画面で見た時に広がりすぎるのを防ぐためです。

headerにwrapperクラスをつけて「max-width」を1100pxくらいにします。

２．ナビメニューを横並びにする

ulに対して「display: flex;」で横並びにします。

３．ナビメニューのリストの頭点を消す

ulに対して「list-style:none;」を指定すると、リストの頭点が無くなります。

４．ロゴ部分とメニュー部分を横並びにして両端に配置する

ロゴ部分とメニュー部分をdivで囲み、クラスをつけます。

クラスに対して「display: flex;」と「justify-content: space-between;」を指定します。

５．ナビメニューをマウスで選択したときに、色を変える

ulに対して、a:hover{color:を指定します。

CSSの完成形

.logo{
    width:210px;
    margin-top: 14px;
}

.main-nav{
    display: flex;
    font-size: 1.25em;
    text-transform: uppercase;
    margin-top: 34px;
    list-style: none;
}

.main-nav li{
    margin-left: 36px;
}

.main-nav a{
    color: #432;
}

.main-nav a:hover{
    color: #0bd;
}

.page-header{
    display: flex;
    justify-content: space-between;
}

.wrapper{
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}

「header（ヘッダー）のナビゲーションメニューのコーディング方法」を解説しました。

駆け出しエンジニアに向けて「Web制作の情報」を発信しています。これからもよろしくお願いします。