「グローバルメニューを同じ幅で並べたい」
「メニューの個数が変わるたびにCSSを変えるのが面倒」
こういった悩みにお答えします｡
個数が変わってもCSSを変更せずに均等幅にするには「display:table;」「display:flex;」の2つの方法があります｡
私は､2015年頃からWeb制作の仕事をはじめて､160件ほどのWebサイトを制作してきました｡
その間､いろいろな失敗を繰り返し､クライアントからのフィードバックや本などで勉強することにより､多くのノウハウを得ることができました｡
この記事では､横並びリストを個数が変わっても均等幅で並べる方法を解説しています｡
横幅や個数を気にしない単純な横並びをする方法は以下の記事で解説しています｡
HTMLどうやって横に並べるの？CSSで要素を横並びにする方法 5選
HTMLコーディングのときにどうやって横並びさせればいいか悩んでいますか？この記事では横並びさせる方法を具体的に5つ紹介しています。ぜひご覧ください。
横並びリストを自動で均等幅にする方法
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を変更せずに均等幅にする方法を解説しました｡
- 親要素にdisplay:table;､table-layout:fixed;を指定する
- 親要素にdisplay:flex;､子要素にflex:1;を指定する
グローバルメニューに改行､折り返しが発生するほどテキストを詰め込むことはあまりないと思いますが､ここまでCSSを指定しておくと個別に数値を変更せずに均等幅を使いまわすことができると思います｡
