質問: ### 前提・実現したいこと PHPでサイトを作成しています。 の個数が条件により3個になったり、4個になったりする時に のwidth指定をcalc(100%/3)にしたり calc(100%/4)にしたりするいい方法はないでしょうか。 条件みたいなもの はページにより、1〜6と変動する。 ### 該当のソースコード ``` メニュー1 メニュー2 メニュー3 ``` ### css ``` #pagenav{ width: calc(100%/6);//←ここの数字を変動させたい cssで無理なのは理解してます。 } ```
回答: ### 実現方法 CSSのみで実現可能です。 親要素の大きさを変えるのではなく、子要素の大きさを1つ辺り決める事で解決します。 `nth-child()`などはとても便利なので良く調べる事を勧めます。 ### HTML ``` メニュー1 メニュー2 メニュー3 ``` ### CSS ``` * { padding: 0; margin: 0; } #pagenav { width: auto; display: flex; list-style: none; text-align: center; } /* 1つの場合 */ .item:only-child { width: 100%; } /* 2つの場合 */ .item:first-child:nth-last-child(2), .item:first-child:nth-last-child(2) ~ .item { width: calc(100%/2); } /* 3つの場合 */ .item:first-child:nth-last-child(3), .item:first-child:nth-last-child(3) ~ .item { width: calc(100%/3); } /* 4つの場合 */ .item:first-child:nth-last-child(4), .item:first-child:nth-last-child(4) ~ .item { width: calc(100%/4); } /* 5つの場合 */ .item:first-child:nth-last-child(5), .item:first-child:nth-last-child(5) ~ .item { width: calc(100%/5); } /* 6つの場合 */ .item:first-child:nth-last-child(6), .item:first-child:nth-last-child(6) ~ .item { width: calc(100%/6); } ``` ### 参考文献 下記のサイトを参考にすると分かりやすいと思います。 * 要素の個数に応じてスタイルを出し分けるCSSメモ