ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

HTML横並びリストを均等幅に!個数が変わってもCSSそのまま

HTML横並びリストを均等幅に!個数が変わってもCSSそのまま

「グローバルメニューを同じ幅で並べたい」
「メニューの個数が変わるたびにCSSを変えるのが面倒」

悩み

こういった悩みにお答えします。

目次
  1. 横並びリストを自動で均等幅にする方法
    1. display:table;
    2. display:flex;
  2. まとめ

横並びリストを自動で均等幅にする方法

display:table;

親要素にdisplay:table;、子要素にdisplay:table-cell;にすることで、tableタグと同じ扱いにすることができます。
tableの状態になったことによって、table-layout:fixed;というtableを均等幅にするCSSを使うことができます。

アルファベットのときは改行されないので、word-wrap: break-word;で単語の途中でも改行するようにします。

See the Pen display:table;均等幅 by hashi84 (@hashi84) on CodePen.

POINT
親要素にtable-layout:fixed;で均等幅になる。

display:flex;

親要素にdisplay:flex;にします。
孫要素の高さをそろえるために子要素もdisplay:flex;にします。
テキストを上下中央揃えにするには、さらに孫要素もdisplay:flex;にします。

See the Pen display:flex;均等幅 by hashi84 (@hashi84) on CodePen.

POINT
子要素にflex:1;で均等幅になる。

まとめ

横並びリストを個数が変わってもCSSを変更せずに均等幅にする方法を紹介しました。

グローバルメニューに改行、折り返しが発生するほどテキストを詰め込むことはあまりないと思いますが、ここまでCSSを指定しておくと個別に数値を変更せずに均等幅を使いまわすことができると思います。