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

#概要

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

#ヘッダーの構成
![WS000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621361/c2549981-a3c1-7395-8b40-b997b7402844.jpeg)



こんなヘッダーを作っていきます。
まず、考えるべきことはレイアウトです。どんな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プロパティで指定することでヘッダータイトルとナビゲーションが横に並びます。
![WS000010.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621361/ff2ae684-4f0a-92ae-f673-f47133586990.jpeg)

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

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

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="swallow-enginer" data-slug-hash="RwRbMxq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RwRbMxq">
  <span>See the Pen <a href="https://codepen.io/swallow-enginer/pen/RwRbMxq">
  RwRbMxq</a> by swallow-enginer (<a href="https://codepen.io/swallow-enginer">@swallow-enginer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

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

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="swallow-enginer" data-slug-hash="oNLvdav" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="oNLvdav">
  <span>See the Pen <a href="https://codepen.io/swallow-enginer/pen/oNLvdav">
  oNLvdav</a> by swallow-enginer (<a href="https://codepen.io/swallow-enginer">@swallow-enginer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

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

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="swallow-enginer" data-slug-hash="RwRbyda" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RwRbyda">
  <span>See the Pen <a href="https://codepen.io/swallow-enginer/pen/RwRbyda">
  RwRbyda</a> by swallow-enginer (<a href="https://codepen.io/swallow-enginer">@swallow-enginer</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>