Q&A
CSSのコメントは /* コメント */ ですよ。
前提・実現したいこと
htmlのulを使ってcssで擬似的な表を表現したい
ただし画面サイズによって全てのセルを横1列に表記するか、横1列にセルを3〜4つずつ配置するかを切り替える予定なのでdisplay:flex; flex-wrap: wrap;は変えたくない。
発生している問題・エラーメッセージ
セルが横1列に4つずつだときれいに表示されるのに、3つずつだと意図していない余白のせいで右端のラインが太くなったように見えてしまう
該当のソースコード
test.html
1 2<!DOCTYPE HTML> 3<html> 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width,inital-scale=1" /> 7<link rel="stylesheet" href="test.css" type="text/css" /> 8<title>test</title> 9</head> 10 11<body> 12 <ul><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li><li>eeee</li><li>ffff</li><li>gggg</li><li>hhhh</li><li>iiii</li> </ul></body> 13</html> 14
test.css
1<!—- セル4つずつバージョン --> 2body { background-color: green; margin: 0; width: auto; } 3 4ul { display: flex; flex-wrap: wrap; box-sizing: border-box; width: 100%; margin: 0; padding: .25%; background-color: blue; } 5ul li { width: 24.5%; height: 3em; margin: .25%; list-style: none; background-color: pink; } 6 7<!—- セル3つずつバージョン --> 8body { background-color: green; margin: 0; width: auto; } 9 10ul { display: flex; flex-wrap: wrap; box-sizing: border-box; width: 100%; margin: 0; padding: .5%; background-color: blue; } 11ul li { width:32%; height: 3em; margin: .5%; list-style: none; background-color: pink; } 12 13
試したこと
まず先にセルが横1列に3つずつで作って右側に謎の隙間ができてしまいました。
なので考えた結果、ulのpaddingとliのmargin,widthの%の合計が、ulのpaddingまで含めたwidthである100%という考えが間違っているのと推測しました。
つまり、liのwidthの数値は、親要素のpaddingまで含めたサイズ100%に対する数値ではなくコンテンツ部分のみの99%に対する数値で書かないといけないのかもしれないと思いました。
しかしcalc関数で書くのかもしれないと試してみましたがうまくいかず、一度に横1列に4つずつで作ってみたらうまくいってしまい訳が分からなくなってしまいました…
回答2件
0
ベストアンサー
ulのpaddingとliのmargin,widthの%の合計が、ulのpaddingまで含めたwidthである100%という考えが間違っているのと推測しました。
つまり、liのwidthの数値は、親要素のpaddingまで含めたサイズ100%に対する数値ではなくコンテンツ部分のみの99%に対する数値で書かないといけないのかもしれないと思いました。
ulのwidthやpaddingに左右されず、liが並んだ状態でwidth,padding,marginの合計が100%となればよいのです。
4列の場合、(24.5% + 0.25% * 2) * 4 = 100%となりますが
3列の場合、(32% + 0.5% * 2) * 3 = 99%となり、あまりの1%が右端に表示されています。
なので、3列の場合はwidthをcalcを使って
css
1width: calc(100% / 3 - 0.5% * 2);
とすればよいです。
追記
CSS
1ul { display: flex; flex-wrap: wrap; box-sizing: border-box; width: 100%; margin: 0; padding: 1% 0 0 1%; padding-right:0;background-color: blue; } 2ul li { width:calc(100% / 3 - (1% / 0.99)); height: 3em; margin: 0 calc(1% / 0.99) calc(1% / 0.99) 0;list-style: none; background-color: pink; }
投稿2019/10/30 00:37
編集2019/10/30 02:47
総合スコア3191
ある程度は理解できました。ありがとうございます。
しかし、まだ不明瞭な点があるので失礼ながらお聞きしたいのですが、このCSSを使った場合ulのpaddingの0.5%とliのmarginの0.5%は完全に同じ値になりますか？
説明不足で申し訳ないのですが、私としましてはulのpaddingとliのmarginを合わせた線と、隣り合ったliのmarginを合わせた線を同じ太さにしてセルを綺麗に分けようとしていたのです。
しかし、この解答を聞くとliを全て合わさった100%はulにとってはpaddingを除いた99%になってしまうので異なる値になると思うのですが、どうでしょうか？
はい、理解されている通り、異なった値になります。
合わせるのであれば、ulのleft-paddingのみ0.5%とし、liはright-marginのみ指定するほうが簡易ですね。
わざわざ追加でcssの記述までつけていただき、本当にありがとうございました！
0
padding と同じなら
CSS
1ul > li { 2 width: calc(32% * 100 / 99); 3 margin: calc(0.5% * 100 / 99); 4}
しかし、width と margin の両方をいちいち計算したくないのでグリッドレイアウトがいいでしょう。
CSS
1ul { 2 display: grid; 3 grid-template-columns: repeat(3, 1fr); 4 gap: 1vw; 5 padding: 1vw; 6}
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout
投稿2019/10/30 04:45
総合スコア13749
あなたの回答
tips
プレビュー
