Q&A
回答ありがとうございます！
確かに高さの指定は不要ですね…
まずそこからやり直してみます！！
header-rightの高さは指定していないはずなのに赤丸の部分に余分な余白が生まれて上手く模写できません。原因は何か教えて頂けると助かります。
html
1<body> 2 <header> 3 <div class="header-container"> 4 <div class="header-left"> 5 <a href="#"><img src="logo.svg" alt=""></a> 6 </div> 7 <div class="header-right"> 8 <ul class="header-list"> 9 <a href="#"><li class="about">About</li></a> 10 <a href="#"><li class="bicycle">Bicycle</li></a> 11 </ul> 12 </div> 13 </div> 14 </header> 15</body>
css
1header{ 2 background-color: aqua; 3 height: 60px; 4 padding:0px 250px; 5} 6.header-container{ 7 background-color: blue; 8 padding:10px 0px; 9 height:60px 10} 11.header-left{ 12 background-color: brown; 13 width: 120px; 14 float: left; 15} 16.header-right{ 17 background-color: chartreuse; 18 float:right; 19} 20 21.header-list li{ 22 text-decoration: none; 23 float: right; 24 color: #24292e; 25 font-size: 14.4px; 26 flex: auto; 27} 28 29.header-list{ 30 list-style: none; 31 display: flex; 32} 33 34.bicycle{ 35 margin-left: 40px; 36}
回答2件
0
ベストアンサー
画像の赤線で囲んだ部分の余白は、UL要素のブラウザのデフォルトの上下マージンです。(Chromeの場合1em)
UL要素の .header-list に下記のようにマージンを0にするスタイルを付加すれば余白はなくなります。
css
1.header-list{ 2 list-style: none; 3 display: flex; 4 margin: 0; /* 追加 */ 5}
このようなデフォルト値はブラウザ毎に異なったりする場合があるのでいろいろ厄介です。
そのために、このデフォルト値を打ち消すリセットCSSを使うのが一般的な手法です。
下記などを参考にリセットCSSの導入を検討されることをお勧めしておきます。
2021年、モダンブラウザに適したCSSリセットのまとめ | コリス
【2021年版】リセットCSSのガイドライン｜基礎から使い方を徹底解説 | WEBCAMP NAVI
追記
今回の質問の原因は上記のとおりですが、
float を使用したレイアウトは現在では避けたほうがいいでしょう。(他の方も指摘されてますが)
前後の要素のレイアウトに悪影響を与えるので、思い通りのレイアウトにするのに非常に面倒なことになります。
CSS FlexBox あるいは CSS Grid を使ったレイアウトが現在では主流ですのでそちらの学習をされることもお勧めしておきます。
投稿2021/02/28 13:59
編集2021/02/28 14:08
総合スコア34073
0
※あくまで仮説です
削りまくって分かったのですが、
html 自体の高さが影響してるかもしれません。
デベロッパツールで見ると分かりますがpaddingという意味での「余白」は存在せず
純粋に要素の高さとなっています。
レイアウトの是非はともかく.header-rightのfloat:right;を削除すると本来の高さにはなります。
他にも親要素にheightが指定されてるので、それらも含めて原因と言えます。
投稿2021/02/28 10:44
編集2021/02/28 10:45
総合スコア80875
floatやpositionは色んな要素の影響を受けます。
その辺をよろしくやってくれるのがflexの印象です。
flex使いこなせは実質的にはfloat不要になるみたいで（私自身使いこなせてませんが）
あ、書くの忘れてましたが「色々削った」には親要素すべてのheightを削ったことも含まれます。全て削ったうえで出てきたhtml自体の61.6pxでした。
1.6pxはデフォルトの余白ですね。html{padding:0;}で消えそうです。
プロゲートやっててfloatから覚える為、なかなかFlexは馴染めませんね…YouTube等見てると上手な人は直ぐFlex使ってるので無理してでも使い続けた方が良さそうですね！
html自体のpaddingを0にする発想も勉強になります！
今後とも宜しくお願い致します<(_ _)>〈 ｺﾞﾝ!〕
Progateでの講義を妄信しすぎるのも良くないとは思います。
柔軟な発想ができなくなりますからね。
機能を知っているのなら、いろいろ試してみて挙動を確認し、自分のものになるようにしていくと良いと思います。
※ただ、昨今は自前で全部書くことは少なく、CSSフレームワークを基盤に⁺αを自分で作りこんでいくパターンが多い印象です。もちろん「機能を知っているか否か」で使いこなし具合に差はできます
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/28 14:17