More than 5 years have passed since last update.

flexboxを使ってheaderメニューを作る【学習メモ】

Last updated at 2019-06-19Posted at 2019-06-18

#はじめに
headerでメニューを作る時、いつもはfloatを使って作成していましたが、今回はflexboxを使って作成してみたいと思います。

#flexboxとは？
CSS3から使えるようになった機能の一つで、flexboxを使うと要素の配置を簡単に揃えることができます。
子要素の配置を変える時、親要素に**display: flex;**を置くと使えるようになります。

今回はheader要素(親)の中央にメニュー（子）を置きたいので、垂直方向に中央揃えにすることができる**align-items: center;を使用していきます。
また子要素を両端に分けることができるjustify-content: space-between;**を使い、headerのタイトルとメニューを分けています。
他にも配置方法はたくさんあるのでこちらを参考にしてください。

#コード

index.html

<body>
    <header>
        <h1 class="title">header!!</h1>
        <nav class="nav-menu">
            <ul class="menu">
                <li class="menu-item"><a class="menu-link" href="">メニュー１</a></li>
                <li class="menu-item"><a class="menu-link" href="">メニュー２</a></li>
                <li class="menu-item"><a class="menu-link" href="">メニュー３</a></li>
                <li class="menu-item"><a class="menu-link" href="">メニュー４</a></li>
            </ul>
        </nav>
    </header>
</body>

style.css

body {
    margin: 0;
    padding: 0;
}

header {
    box-sizing: border-box;
    background: #c1ff0a;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
}
.menu {
    display: flex;
    list-style: none;
}
.menu-item {
    margin-right: 20px;
}
.menu-link {
    text-decoration: none;
}

#画面

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up