創作ポスト

創作物の力で元気になろう。すてきな創作物を知りたい人、自分で創作物を作っている人に向けて、手紙を書くように記事を届けます。

Flexboxならリスト(li要素)間に空白ができない横並びメニューが簡単に作れる

   

CSSを使ってリスト(li要素)を横並びにしようとした時、各項目の間に半角スペースくらいの謎の空白ができてしまったことはありませんか? CSSの指定は正確にできているはずなのに、各項目の間に変に隙間があいてしまい悩まされた方もいるのではないでしょうか。
この記事では、この問題を解決出来るだけでなく、項目数の増減にも対応できるFlexbox(フレキシブルボックスレイアウト)を用いた横並びメニューの作り方を紹介します。

スポンサーリンク


スポンサーリンク

リスト(li要素)を横並びにする方法とその問題点

CSSを使ってリスト(li要素)を横並びにする方法には、次のようなものがあります。

  • li要素にdisplay: inline-block;を指定する
  • li要素にfloat: left;を指定する
  • Flexboxを使用する

並べてみると色んな選択肢があるように見えます。
しかし、inline-blockやfloatの方法を使用する場合、面倒な問題が起きます

inline-blockで謎の空白が生成される

  • menu1
  • menu2
  • menu3
  • menu4

HTML

CSS

まず、inline-blockを使う場合です。
コードは上記の通りで、各項目のwidthを25%にしているので、本当であれば1行分のスペースが4等分され、各項目に割り当てられるはずです。
しかし、実際はこのようにリストの項目間に謎の空白(実態は半角スペース)ができてしまいます。
コードを汚くしてもいいのであればこの問題を回避することはできますが、コードを汚さずに解決できるならそれに越したことはありません

inline-block, floatの方法では、項目数が増減した場合にCSSの修正が必要

li要素のwidthをパーセントで指定しているため、項目数が増減した場合にはCSSを修正する必要があります。
例えば項目数が5つになった場合は、width: 20%;に書き換える必要があります。
メニューの項目数は増減することも考えられるため、それに柔軟に対応できるCSSの記述があるのであれば、そちらを利用するべきです。

リスト(li要素)の横並びにFlexboxを使うメリット

ここまででinline-blockやfloatでリストを横並びにする場合、少し面倒な問題が起きることを説明しました。
しかし、この問題はFlexboxを使えば解決できるのです!
Flexboxでリストを横並びにするメリットは次の通りです。

  • 項目間に意図していない空白が生成されない
  • 項目数の増減に対応できるCSSの指定方法が存在する

Flexboxでリスト(li要素)を横並びにする方法

  • menu1
  • menu2
  • menu3
  • menu4

Flexboxでリスト(li要素)を横並びにするとこのようになります。
inline-blockの場合とは違い謎のスペースが表示されていないおかげで、全項目が綺麗に1行分のスペースに収まっています
コードは以下の通りです。

HTML

CSS

Flexboxでリスト(li要素)を横並びにするポイントは次の2つ。

  • 横並びにしたい要素の親に対してdisplay: flex;を指定する
  • 項目数の増減に対応できるよう、横並びにしたい要素にflex-grow: 1;を指定する

どうしてこのようなプロパティを設定していくのかをこれから説明していきます。

横並びにしたい要素の親に対してdisplay: flex;を指定する

display: flex;を指定した要素は、flexコンテナボックスとして扱われます。
また、display: flex;を指定した要素の直接の子要素は、flexアイテムとして扱われます。
フレキシブルボックスレイアウトとは何かを簡単に説明すると、flexコンテナボックスの中で、flexアイテムを柔軟に配置するレイアウトです。

今回は、横並びにしたいli要素の親であるul要素にdisplay: flex;を指定しています。
これにより、flexコンテナボックスとなったul要素の中で、flexアイテムとなった各li要素を柔軟に配置することができます。

項目数の増減に対応できるよう、横並びにしたい要素にflex-grow: 1;を指定する

flexアイテムを柔軟に配置するとはどういうことなのか。
そのうちのひとつの答えが、このflex-growプロパティです。

flex-growプロパティとは、flexコンテナボックスにflexアイテムを配置した上で余ったスペースをどのように割り当てるかを指定するプロパティです。
今回、各li要素にwidthは指定していないため、親であるul要素が持つスペースの100%を各li要素が分け合うことになります。各li要素にはflex-grow: 1;を指定したので、それぞれのli要素が1:1の比率になるように余ったスペースを分け合います。
つまり、flexアイテムすべてにflex-grow: 1;を指定するということは、余ったスペースを各flexアイテムで等分するということなのです。

補足として説明しますが、例えば以下のようにflexアイテムのうちのひとつだけにflex-grow: 2;を指定し、残りすべてのflexアイテムにflex-grow: 1;を指定してみます。
各項目のwidthが分かりやすくなるよう、項目間にはborderを入れました。
スマホで見ると表示領域が小さくて差がわかりにくいかもしれませんが、横画面表示にしてもらえば差がわかるはずです。

  • menu1
  • menu2
  • menu3
  • menu4

HTML

CSS

結果は上記の通りです。flex-grow: 2を指定したもののwidthのみが長くなっています。
それは、余ったスペースを配分する際に、flex-grow: 1;を指定した項目に比べ、flex-frow: 2を指定した項目には2倍のスペースが割り当てられているからですね。

実際に使うことを想定したFlexboxの横並びメニュー

HTML

CSS

ここまでで説明した箇所との違いは以下の通りです。

  • 項目数を1つ減らした(CSSで幅の変更は行っていませんが、スペースが自動で再分配されていることがわかると思います)
  • メニューなのでクリックしたら移動できるように各li要素の中にa要素を作った
  • クリックやタップが効く範囲をボタンのようにするために、a要素をblock要素にした
  • a要素のリンク装飾を打ち消した
  • 各項目にマウスホバーした際に、背景色が変わるようにした

Flexboxで横並びメニューを作る際の注意点

flex-growプロパティは、あくまで余ったスペースをどのように割り当てるかを指定するプロパティだということです。
文字だけで横幅がいっぱいになってしまった場合などは、配分するスペースはなくなるため、各項目の横幅がキツキツになります。
これはFlexboxに限った話ではありませんが、あまり項目数が多くなる場合は、スマホに限り横並びを諦める、というのも選択肢のひとつとして考えておいた方が良いです。

終わりに

この記事では、リスト(li要素)を使って横並びメニューを作る際には、Flexboxを活用すると便利なことがたくさんあることを紹介しました。
フレキシブルボックスレイアウトは比較的新しい要素ですが、使いこなせれば非常に便利なものなので、是非マスターして下さい。

 - Webサイト運営, CSS

PAGE TOP