エンジニアなら知らないと恥をかく！CSSでヘッダーを作る方法

#概要

• ヘッダーを作るにはFlexBoxを使う
• リストマーク(・)を無効化するにはlist-style: none;
• リンクの下線を無効化するにはtext-decoration: none;

#ヘッダーの構成

こんなヘッダーを作っていきます。
まず、考えるべきことはレイアウトです。どんなHTMLで構成されているのでしょうか？

ヘッダー.html

<header class="header">
    <h1 class="header-title"><a href="#home">ヘッダータイトル</a></h1>
    <nav  class="header-nav">
        <ul class="header-nav">
            <li class="nav-list"><a href="#about">About</a></li>
            <li class="nav-list"><a href="#service">Service</a></li>
            <li class="nav-list"><a href="#contents">Contents</a></li>
        </ul>
     </nav>
</header>

大きな構成としては「ヘッダータイトル」と「ナビゲーション」の2つ。

そして、特徴的なのはナビゲーション内のそれぞれの項目(アイテム)がリストで構成されていることです。通常のHTMLでリストを表示すると**リストマーク(・)**が表示されますが、どうやって消すのでしょうか？
また、aタグのリンクによる下線も消されているのも気になります。

まとめると、CSSで実装するために課題となるのは以下の3つです。

• 項目を横に並べる方法
• リストマークを消す方法
• aタグの下線を消す方法

#項目を横に並べるには？
まず1つ目は「ヘッダータイトルとナビゲーション」や「ナビゲーション内の項目」を横並びにする方法です。この2つは同じプロパティを設定します。

それはFlexBoxです。FlexBoxとは「Flexible Box Layout Module」の略で、簡単かつ柔軟にレイアウトを組むことができるボックスレイアウトのことです。

このFlexBoxを使うことでそれぞれのアイテムを横に並べることができます。

header.css

.header {
    display: flex;
}

このようにFlexBoxを使用します。displayプロパティで指定することでヘッダータイトルとナビゲーションが横に並びます。

しかし、今のままではヘッダータイトルとナビゲーションが左に寄っている状態です。サンプルのヘッダーを見てもらったらわかりますが、それぞれの項目が端に寄っている（タイトルが左端、ナビゲーションが右端）ヘッダーを作りたいのです。

そんな時に使えるのがjustify-content: space-between;です。justify-contentは横方向の並び順を指定するプロパティで、space-betweenを指定すればアイテム間のスペースを均等に割り当てます。そのため、2つしかない項目は両サイドによって並べられるのです。

水平方向はこれで大丈夫ですが、垂直方向がまだです。今のままだと上に寄っている状態です。中央に寄せるにはjustify-align: center;を使います。justify-alignでFlexBoxの垂直方向の設定を行います。

See the Pen RwRbMxq by swallow-enginer (@swallow-enginer) on CodePen.

次にナビゲーション内のアイテムも横並びにしましょう。こちらは右端に項目を寄せたいのでjustify-content: flex-end;を使います。このプロパティを使えばアイテムを末尾に寄せることが可能です。

また、アイテムの間隔を空けるためにそれぞれのアイテムにmargin-leftを設定します。

See the Pen oNLvdav by swallow-enginer (@swallow-enginer) on CodePen.

#リストマークを無効化・リンクの下線の無効化
これでヘッダーのレイアウトの作成が完了しました。次にナビゲーションに表示されているリストマーク（・）を無効化します。
リストマークを無効化するにはlist-style: none;を使います。これを使えばリストについている「・」の表示を無効化できます。

最後はリンクの下線の無効化です。これは、aタグにtext-decoration: none;を設定するだけです。
これでヘッダーの完成です。

See the Pen RwRbyda by swallow-enginer (@swallow-enginer) on CodePen.