どうも7noteです。jsを使わなくても個数に合わせて自動で幅が調整されるメニューを作ります。

親要素の幅は固定で、子要素の数が変動しても子要素の幅が自動調整されるメニューの作り方。

作り終わったorある程度作ったホームぺージを修正・更新していると、よくメニューの数が変動したりすることがあります。
あとで追加や削除が起こると、その都度その都度CSSを調整する必要がでてきますよね。

・・・大変なので、1つ１つ自動調整するように書き換えていくように変えてしまいましょう。

CSSで要素1つ1つの幅を自動調整させる方法

みんな大好きflexboxで作っていきます。

index.html

<ul class="menu">
  <li>あいさつ</li>
  <li>私達について</li>
  <li>あいさつ</li>
  <li>あいうえお</li>
  <li>かきくけこ</li>
</ul>

style.css

.menu {
  width: 100%;
  display: flex;
  border: solid 1px #333;
}

.menu li {
  width: 100%; /* 可能な限り最大で表示 */
  background: #fff;
  border: solid 1px #333;
  text-align: center;
}

これで要素が4個や5個でも自動的に幅が調整されるようになります。

解説

横並びにする方法はflexboxを使います。
display: flex;を指定することにより、要素が横並びになります。
特徴として、幅いっぱいに要素を等分する性質があるので、これを利用し子要素にあたる<li>を5等分にしたり、4等分にしたりすることができます。

ただ、あまり極端に数が2個から8個とかになると、デザイン的にあまり綺麗にならない可能性などがあるので、基本的には5~7個など、変動しても2個か3個くらい変動する可能性がある場所に使うのがいいと思います。

phpなどでif文をかませて要素の数がページによってかわる場合など、使える箇所はちょくちょくあるかなと思います。

CSSグリッドを使った方法

コメントでCSSグリッドを使った方法もあると教えていただいたので、こちらも記載。

style.css

.menu {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* liの数だけ1frを記載 */
  border: solid 1px #333;
}

.menu li {
  background: #fff;
  border: solid 1px #333;
  text-align: center;
  min-width: 200px;
}