【html/CSS】ul liのメニューを横並びにする方法

メニューを作る際htmlタグとしてはul liがふさわしいです。メニューはリストですからね。

しかしメニューを横に並べたいのにul liは通常縦並びです。

ul liを横並び2列にする方法を丁寧に解説します。

完成形

完成すると以下のようになります。ブラウザ幅を狭くすると2列2行になります。

<style>
.example4{
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}
.example4 li{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}
.example4 li a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 10px;
}
@media(max-width:800px){
    .example4{
        flex-wrap: wrap;
    }
    .example4 li{
        width: 50%;
    }
}
</style>
<ul class="example4">
    <li><a href="#">リスト</a></li>
    <li><a href="#">リストリストリストリストリスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
</ul>

以下で順を追って詳しく解説します。

1.html

htmlは下記のようにします。CSSはかかっていないので箇条書きの縦並びです。

<ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

2.シンプルな縦並び

まずはul liをシンプルな縦並びのメニューにしましょう。

<style>
.example{
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}
.example li{
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}
</style>
<ul class="example">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

ulとliはmarginやpaddingがブラウザ側で指定されているため0や任意の数値を指定します。

箇条書きの「・」を消すためにulかliに「list-style: none」を指定しましょう。

線を入れる場合はliの上か下、右か左それぞれに指定し、外側となるulにはふたをするように反対側の線を指定しましょう。

後述するレスポンシブ対応を意識してulは上と左、liは下と右に線を指定します。

3.flexで横並び

いよいよ横並べにします。

横並べにするにはulにdisplay:flexを指定します。

<style>
.example2{
    /*追加*/display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}
.example2 li{
    /*追加*/width: 100%;
    /*追加*/box-sizing: border-box;
    /*追加*/text-align: center;
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}
</style>
<ul class="example2">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

ulの幅とliの幅が合わないのでliにwidthを指定します。

liが4つなら100%÷4で25%を指定してもいいのですが、メニューの増減があるたびにCSSを直すのはメンドウです。

flex内の要素は崩れないことを利用しliにwidth:100%を指定しておきます。

こうするとliの幅を均等にし、メニューの増減があってもCSSを直さなくて済みます。

「box-sizing: border-box」はなくても崩れませんが、後述するレスポンシブ対応で必要になるため追加しています。

「text-align: center」は文字を中央寄せするものです。

が、後述する方法でいらなくなります。

さて、ここまでで「ul liをflexで横並び」はできましたが、メニューである以上、リンクが必要でしょう。aタグを追加してみます。

4.aタグを追加

aタグを追加しました。しかし、クリック範囲が小さく押しづらいですね。クリック範囲をliと同じにしましょう。

<ul class="example2">
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
</ul>

5.aタグを縦横いっぱいに引き延ばす

<style>
.example3{
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}
.example3 li{
    /*追加*/display: flex;
    width: 100%;
    box-sizing: border-box;
    /*削除text-align: center;*/
    margin: 0;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}
.example3 li a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    /*liから移動*/padding: 10px;
}
</style>
<ul class="example3">
    <li><a href="#">リスト</a></li>
    <li><a href="#">リストリストリストリストリスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
</ul>

aタグの範囲を大きくするといえば「display:block」です。

ただし、aタグ内の文字を上下中央寄せしたいので「display: flex」にして「justify-content: center」と「align-items: center」を指定します。

メニュー内の文字数によって2行になったメニューができたとき、1行のメニューが上寄せになり、下部分がクリックできなくなります。

これを回避するためにliにも「display: flex」を指定し、aタグの高さをliと同じにします。

このときaのwidthが小さくなるため100%を指定して横もいっぱいにします。

liにpaddingがかかっていると幅いっぱいにならないため、liのpaddingは0に、aのpaddingを調整します。

さて、これで完成ですが、もう一足踏み込んでスマホを意識したレスポンシブ対応もしてみましょう。

6.レスポンシブ対応 兼 2列にする

レスポンシブ対応の方法はいくつかありますが、ここでは「2列にする」をやってみましょう。

ブラウザ側を狭くして確認してみてください。2列になります。

<style>
.example4{
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
}
.example4 li{
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}
.example4 li a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 10px;
}
@media(max-width:800px){
    .example4{
        /*追加*/flex-wrap: wrap;
    }
    .example4 li{
        /*追加*/width: 50%;
    }
}
</style>
<ul class="example4">
    <li><a href="#">リスト</a></li>
    <li><a href="#">リストリストリストリストリスト</a></li>
    <li><a href="#">リスト</a></li>
    <li><a href="#">リスト</a></li>
</ul>

レスポンシブ対応

レスポンシブ対応するためにメディアクエリを利用します。

「ブラウザ幅800px以下の時」という指定は「@media(max-width:800px){}」でできます。

横並びの元となるulに「flex-wrap: wrap」を指定します。これは子要素の折り返しを許可するCSSです。あちこちにdisplay:flexを指定しているため、間違わないように気を付けましょう。

2列にする

liに「width: 50%」を指定します。100%÷2列=50%だからです。

3列にしたいなら「width: calc(100% / 3)」です。

これで完成です！

ボタンのデザインはサイトのデザインに合わせて調整しましょう。

【まとめ】ul liを横並び2列にする方法

1. ul liのmargin,padding,border,list-styleを整えシンプルな縦並びにする。
2. ulに「display:flex」を指定して横並びにする。
3. liとaにも「display:flex」を指定し、liとaの縦横をいっぱいにし、上下中央寄せする。
4. レスポンシブ対応として、「flex-wrap: wrap」で折り返しを許可し、2列にするためliのwidthを50%に指定する。

以上、ul liを横並び2列にする方法でした。