overflow-hiddenの設定対象として正しい要素の選び方を知りたい。
架空webサイトのコーディング時に以下の疑問が生じましたので、教えていただけると幸いです。
(目的は実現できたのですが、なぜそうなっているのかがわからないという状態です。)
■目的
横並びになっている要素に対して、paddingによって感覚を開けたい。
(横並びに成っている2つの要素の内、一つはfloatしていて、もう一つはfloatしていない)
■試したこと
「floatしている要素」に対してoverflow-hiddenによって、paddingが効くように試みたが効果なし。
一方で、「floatさせていない要素」に対して、overflow-hiddenを適用したところ効果があり、要素間の感覚が空いた。
■疑問
①以前、同様の条件でoverflow-hiddenを指定した時には、効いたのになぜ今回は効かなかったのか。
②なぜ「floatしていない要素」に対してのoverflow-hiddenは効いたのか。
■自分なりの解釈
おそらく私のoverflowの解釈が根本的に誤っているのではないか、、と思いました。
overflow:hidden;はfloatしている要素に対して使用し、浮いている要素を発見させて、それ以降の要素の効果を適用させる、という認識でいましたがここに誤りがあるのでしょうか。
よろしくお願いいたします。
■該当のソースコード
(念のため、全て記述しました。該当部分は点線でくくってあります。)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ご利用できる温泉</title> <link href="common/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="gnav"> <nav> <ul> <li><a href="#">当旅館について</a></li> <li><a href="#">料金/部屋</a></li> <li><a href="#">お食事</a></li> <li><a href="#">温泉</a></li> <li><a href="access.html">アクセス</a></li> <li id="lang"><a href="#">日本/EN</a></li> <li id="res"><a href="#">予約</a></li> </ul> </nav> </div> ↓----------【該当箇所】-------------------------↓ <div id="onsen"> <h1>温泉</h1> <div id="onsenpic1"> <img src="images/onsen1.jpg" id="onsen1"> <div id="des1"> <h2>温泉1</h2> <p>温泉の紹介</p> </div> </div> </div> --------------------------------------------- <div class="footer"> <p id="map">SITE MAP</p> <div id="mapmenu"> <p id="a"><a href="#">トップページ</a></p> <p id="b"><a href="#">新着情報</a></p> <p id="c"><a href="#">料金/部屋</a></p> <p id="d"><a href="#">お食事</a></p> <p id="e"><a href="#">温泉</a></p> <p id="f"><a href="access.html">アクセス</a></p> <p id="g"><a href="#">ご予約</a></p> </div> <p id="copy">©2018 KonohaOnsen,Inc.</p> </div> </body> </html> /*以下、css*/ @charset "utf-8"; /* CSS Document */ li{ list-style-type: none; } *{ margin: 0; padding: 0; } a {text-decoration: none; } #mapmenu a{ color: white; } #gnav a{ color: black; } a:hover{ text-decoration: underline; } #mainphoto{ background-image: url(../images/main.jpg); height: 640px; } #mes1{ padding-top: 450px; padding-left: 100px; } #mes2{ padding-left: 200px; } #mes1,#mes2{ font-size: 30px; font-style: italic; } #gnav{ width: 1406px; margin-right: auto; margin-left: auto; padding-top: 1px; } nav ul li{ background-image: url(images/button1.png); width: 198px; height: 60px; float: left; text-align: center; line-height: 60px; margin-left: 1px; } nav ul #lang{ background-image: url(images/button2.png); } nav ul #res{ background-image: url(images/button3.png); } #contents{ width: 1406px; margin-left: auto; margin-right: auto; overflow: hidden; clear: both; padding-top: 30px; } #welcome{ width: 600px; clear: both; float: left; margin-left: 30px; } #rela{ padding-left: 90px; } #welcome p{ padding-top: 20px; } #news{ margin-left: 100px; width: 600px; float: left; } table tr td{ padding-left: 30px; } .footer{ background-image: url(images/footer_03.jpg); background-repeat: repeat-x;/* なくても繰り返されるが不要?*/ height: 255px; clear: both; color:white; text-align: center; margin-top: 100px; } #map{ padding-top: 80px; } #mapmenu{ width: 588px; margin: auto; padding-top: 15px; } #a,#b,#c,#d,#e,#f,#g{ float: left; padding-left: 20px; } #copy{ clear: both; padding-top: 80px; } /*以下アクセスページ*/ #access{ margin-top: 80px; height: 300px; } #local,#how{ width: 300px; margin-left: auto; margin-right: auto; margin-top: 25px; } #access div p{ padding-top: 7px; padding-left: 40px; } #ac{ text-align: center; } #car,#train{ height: 30px; float: left; } #how div{ padding-top: 15px; } /*以下 温泉ページ*/ ------------------------該当箇所------------------------- #onsen{ width: 1406px; margin-left: auto; margin-right: auto; } #onsenpic1 img{ width: 600px; height: auto; float: left; overflow: hidden; } #des1{ padding-left: 50px; /*ここが効かない*/ /*overflow-hidden;ここに記述すると効く*/ } --------------------------------------------------------
###■ 補足情報(FW/ツールのバージョンなど)
PC :MacBookAir
使用エディタ:Brackets
ブラウザ :safari
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/17 08:16
2018/10/17 13:09