CSS

フレックスボックスで、センターにロゴが来るナビゲーションを作る

 

フレックスボックスでナビを作ろうとしている。
フレックスボックスをあまり使い慣れていない。

センターにロゴがあって、左右にメニューがくる書き方が知りたい。

そんな、問題を解決するのが本記事です。

この記事を読んで聞けば、センターにロゴがあって、左右にメニューがくる構成のナビのコードが書けるようになります。

この記事を書いている僕は、エンジニア経験５年ほど
WEB制作会社時代に経験を積みました。

目指すナビ

目指すナビの骨格

上記の画像のような構成のナビを作っていきます。
基本的な骨格のみを紹介しますので、デザインは各々好きにしてみてください。

CODEPENは0.25Xで見てください。

See the Pen Untitled by 須川誠 (@makotosugawa) on CodePen.

コードの説明

まず、大きな箱の中に３つの箱を作ります。
大きな箱は<nav class=”header_menu_wrap flex_wrap”>です。

小さな箱は、

<ul class="left_menu flex_wrap">
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー4</a></li>
</ul>

と

<li><a href="#"><img class="logo" src="./img/sugawa plants.png" alt="sugawa plants"></a></li>

と

<ul class="right_menu flex_wrap">
    <li><a href="#">メニュー5</a></li>
    <li><a href="#">メニュー6</a></li>
    <li>
        <div class="button_wrap flex_wrap">
            <div>
                <a href="#">
                    法人の方はこちら
                </a>
            </div>
            <button class="search_menu_button">
                <img src="./img/loupe (2).png" alt="loupe">
            </button>
            <a href="#" class="cart_button">
                <img src="./img/cart (2).png" alt="">
            </a>
        </div>
    </li>
</ul>

です。

次に、大きな箱をCSSでフレックス化します。

.flex_wrap {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
}

次に小さな箱についてです。

.left_menu {
    width: 50%;
    justify-content: space-around;
}

まず、left_menu　のwidthを50％にします。
続いて　justify-content: space-around　をかけまして、等間隔にいい感じの配置とします。

.right_menu {
    width: 50%;
    justify-content: space-around;
}

同様に、小さな箱　right_menu　もwidthを50％、justify-content: space-aroundを効かせます。

ロゴが入っている小さな箱は、ロゴの大きさをwidthを使って調整するのみです。

.logo {
    width: 85px;
}

まとめ

大きい箱の中に小さな箱を作るのが基本です。
そして、大きな箱をフレックス化してフレックスボックスを使います。

これからも、作業する中でフレックスボックスを触ったらブログをアップします。

最後までありがとうございました。