navやul liで横並べしつつ中央寄せ【レスポンシブ対応】

navやulを使ってメニューを作ることがあるでしょう。そしてそのメニューを横並べしつつ中央寄せしたいのでしょう。

navやul liで横並べしつつ中央寄せし、さらにレスポンシブ対応する方法を紹介します。

【結論】親にdisplay: flexとjustify-content: center

ブラウザの幅を狭くしても中央寄せになります。レスポンシブにも対応しています。

<style>
.example ul{
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.example li{
    list-style: none;
}
.example a{
    display: block;
    padding: 10px;
    border: 1px solid #999;
    border-right: none;
    text-decoration: none;
    color: #333;
    background: #f2f2f2;
}
.example li:last-child a{
    border-right: 1px solid #999;
}
</style>
<nav class="example">
    <ul>
        <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>
</nav>

中央寄せの方法はいくつかありますが、navやulの中身を中央寄せしたいならdisplay: flexとjustify-content: centerを利用するとよいでしょう。子要素を横並べしつつ中央寄せできます。

この方法の場合widthを指定する必要がありません。

もしwidthを指定する場合はpxでの指定ではなく%の指定にするとレスポンシブ対応になります。

navについて

navはメニューなどで使うhtml5のタグです。しかし機能としてはdivと同じただのブロック要素です。

今回横並べしたい要素はliであり、ulにdisplay:flexを指定すると横並べしつつ中央寄せができます。navに指定した場合はliは横並べにならないためnavにはCSSを指定しませんでした。

レスポンシブ対応について

上記の形でもレスポンシブ対応していますが、スマホのメニューデザインとしては利用しにくいですね。

スマホの時は2列のメニューになるようにしてみましょう。

↓ブラウザ幅を狭くして確認してください。

<style>
.example2 ul{
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.example2 li{
    list-style: none;
}
.example2 a{
    display: block;
    padding: 10px;
    border: 1px solid #999;
    border-right: none;
    text-decoration: none;
    color: #333;
    background: #f2f2f2;
}
.example2 li:last-child a{
    border-right: 1px solid #999;
}
@media(max-width:750px){
    .example2 ul{
        /*コレ*/flex-wrap: wrap;
        border-bottom: 1px solid #999;
        border-right: 1px solid #999;
    }
    .example2 li{
        /*コレ*/width: 50%;
        margin: 0;
    }
    .example2 a{
        border-bottom: none;
    }
    .example2 li:last-child a{
        border-right: none;
    }
}
</style>
<nav class="example2">
    <ul>
        <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>
</nav>

「@media(max-width:750px)」はブラウザ幅が750px以下のときだけ効かせるメディアクエリです。

liにwidth: 50%を指定しています。これにより2列になります。

ulにflex-wrap: wrapを指定しています。これはflexの改行を許可するCSSです。

まとめ

• 横並べしつつ中央寄せするには親要素にdisplay: flexとjustify-content: centerを指定する。
• レスポンシブ対応するにはwidthは%指定。
• スマホでも利用しやすいようメディアクエリを利用してデザインを変更する。

以上、navやulで横並べしつつ中央寄せ【レスポンシブにも対応】でした。