Q&A
「効いてるか効いてないか」確かめたいなら大げさに大きい数字にしてみれば分かるのでは？
<!doctype html> <head><link rel="stylesheet" type="text/css" href="c.css"></head> <body> <header> <div class="leftimg"> <p>Progate</p> </div> <div class="rightobj"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </div> </header> <div class="wrapper"> <nav> </nav> <main> </main> <aside> </aside> </div> <footer> </footer> </body> </html>
body { margin:0; min-height:100vh; display:grid; grid-template-rows:100px 1fr 100px; grid-template-areas:"header" "wrapper" "footer"; } header { grid-area:header; display:flex; border-bottom:4px solid gray; } .leftimg { flex:1; color:lightblue; font-size:30px; margin:10px 15px; } .rightobj { flex:2; } ul { display:flex; } ul li { flex:1; list-style:none; margin-left:-10px; } .wrapper { grid-area:wrapper; display:grid; grid-template-columns:50px 1fr 50px; grid-template-areas:"left center right"; } nav { grid-area:left; border:1px solid gray; } main { grid-area:center; border:1px solid gray; } aside { grid-area:right; border:1px solid gray; } footer { grid-area:footer; border:1px solid gray; }
Progateという文字の周りに、マージンを設定しているのですが、この設定があろうがなかろうが、同じ見栄えです。どうすれば、このマージンを反映できますでしょうか。
今のところ「入ってます。効いてます」しか言えません。
「どうなってほしいのか」がないと何とも言えません。
ちなみに、あったときとなかったときは全く変わってます。
「見た目」ではなく「事実確認」をしてください。
回答1件
0
ベストアンサー
同じ見栄えです。
言い方きつくて申し訳ない。
どこが？
効いてるか効いてないか確かめたいならデベロッパツールで確かめれば良い話。
Firefoxの例
効いてなかったら（別のCSSで上書きされるとか）取り消し線が引かれる。
それに数字が小さいと変化が分かりにくいのは考えたら分かる話です。
それなら大げさなくらい大きくすればいいのです。
色とかサイズとか。
ただ、悪いですが、今回の指定時点でも「同じ見栄え」と言うには違いが大きすぎます。
「確認の仕方」を覚えてください。
単なる目視確認ではなく、文字列なら検索、
目視確認するにしても感覚的なものではなく画面キャプチャとって並べるくらいはするべきです。
この確認の仕方に技術は必要ないです。
投稿2021/02/21 09:11
編集2021/02/21 09:12総合スコア80850
あなたの回答
tips
プレビュー
