【コピペ可能】htmlとcssを使ったヘッダーの作り方

Webサイトのヘッダーの作り方を調べてもいろんな方法が出てきて結局どう作ればいいのかわからない！

kentos

コピペですぐ使えるヘッダーメニューを解説していくよ。
基本的な内容だからソースコードの中身も是非理解してみてね！

今回はWebサイトを作るにあたって必ず必要になってくるヘッダーメニューの作り方を解説します。
コピペ可能なようにコードを掲載しますので是非ご活用ください。

▼この記事のポイント

ヘッダーを設計する

今回作るヘッダー

今回は下記のようなシンプルなヘッダーを作成していきます。
左にはロゴ画像があり右端に4つのメニューリンクがある形です。

メニューは右寄せになっており、画面サイズが変わってもそれに連動して位置が移動していくようになっています。

仕様

kentos

先にコピペ用の全コードを見たい方はページ最後に載せてあるから確認してみてね。

それぞれのサイズや余白は下記の画像をご参照ください。
赤字がサイズや余白の大きさで、単位はピクセルです。
青字で記載しているのはflexレイアウトの形式ですがこちの意味は後の章で解説しますのでご安心ください。

htmlを作る

ヘッダーのhtml全文は下記の通りです。

    <header>
        <div class="header">
            <img src="logo.png" alt="" class="header__logo">
            <nav>
            <ul class="header-menu">
                <li class="header-menu__item"><a href="index.html">Top</a></li>
                <li class="header-menu__item"><a href="about.html">About</a></li>
                <li class="header-menu__item"><a href="news.html">News</a></li>
                <li class="header-menu__item"><a href="contact.html">Contact</a></li>
            </ul>
            </nav>
        </div>
    </header>

headerの中にロゴの領域とナビゲーションリンクを設定しています。

シンプルな構成ですので解説はほとんどいらないかと思いますが、
１点、他ページへのリンクはulリストをnavタグ（ナビゲーションタグ）で囲むようにしましょう。

これでページは下記のようになったかと思います。

CSSを作る

続いてCSSを作っていきます。ここからは段階的にご説明していきます。

リストのマーカーを消す

各リンクにある「・」というマーカーですが、ヘッダーメニューに使うには邪魔ですので消しましょう。

.header-menu {
    list-style: none;
}

list-styleにnoneを設定することでマーカーを消すことができます。

ロゴとヘッダーメニューを横並びにする(flexレイアウト)

ロゴとメニューが縦並びになっているため、横に並ぶようにします。
さまざまなやり方がありますが現在主流となっているflexレイアウト手法を使っていきましょう。

 .header {
    /* flexboxの設定 */
    display: flex;
    justify-content: space-between;
    /* フォントや色の設定 */
    height: 70px;
    font-size: 18px;
    background-color:gray;
}

headerクラスに上記の通りcssを設定しましょう。

flexレイアウトって何？

flexレイアウトとは親要素に対して子要素をどのように配置するかを指定する方法です。
基本的な機能一覧は下記です。

flexレイアウトを使うには親要素にdisplay:flexを指定して、justify-contentを上記いずれかから選択します。

今回はロゴとヘッダメニューを両端に配置したいため、space-betweenを使用しています。

そうしますと下記のように両端に配置されるかと思います。

ヘッダーメニューを横並びにする（flexレイアウト）

では最後に、先ほどのflexレイアウトを使ってヘッダメニューを横並びにしていきます。
今度はヘッダーメニューのul要素を親要素、liを子要素として考えます。

右寄せにするため、flex-endを使います。
CSSを下記のようにしましょう。

.header-menu {
    display: flex;
    justify-content: flex-start;
    list-style: none;
}
.header-menu__item {
    margin: 0 25px;
}

メニューを順番に並べるためにflex-startを指定しています。
また、リンク同士が重なってしまうため、左右に25pxずつのマージンを取っています。

そうすると下記のようなメニューの完成です！

まとめ

いかがでしたでしょうか。今回はWebサイトを作る際には必須のヘッダーについて、flexレイアウトを用いて基本的な作り方をご紹介しました。

今回作成したヘッダーをベースに改良するのも良いかと思います。

最後に丸ごとコピペできるようにソースコードを載せておきます。

コピペ用

▼HTML

    <header>
        <div class="header">
            <img src="logo.png" alt="" class="header__logo">
            <nav>
            <ul class="header-menu">
                <li class="header-menu__item"><a href="index.html">Top</a></li>
                <li class="header-menu__item"><a href="about.html">About</a></li>
                <li class="header-menu__item"><a href="news.html">News</a></li>
                <li class="header-menu__item"><a href="contact.html">Contact</a></li>
            </ul>
            </nav>
        </div>
    </header>

▼CSS

.header {
    /* flexboxの設定 */
    display: flex;
    justify-content: space-between;
    /* フォントや色の設定 */
    height: 70px;
    font-size: 18px;
    background-color:gray;
}

.header__logo {
    margin-left: 25px;
    height: 70px;
    width: 70px;
}

.header-menu {
    display: flex;
    justify-content: flex-start;
    list-style: none;
}


.header-menu__item {
    margin: 0 25px;
}