質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4668閲覧

overflow-hiddenの特性について

kazin

総合スコア12

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/10/17 04:24

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">&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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

①以前、同様の条件でoverflow-hiddenを指定した時には、効いたのになぜ今回は効かなかったのか。

通常、floatしている要素にoverflowを設定しても、兄弟要素や親要素に影響を及ぼしません。
前回は他の要件が今回と違ったと考えられます。

②なぜ「floatしていない要素」に対してのoverflow-hiddenは効いたのか。

おそらく、floatoverflowそれぞれを誤認されています。
そもそもpadding-leftははじめから効いています。
onsen1の要素がfloatで浮遊しているため、des1の要素は親要素の左端から始まっています。
padding-leftを設定した場合、親要素の左端からpaddingが正常にとられています。
誤認されている理由は、テキストのみ、float要素に対して回り込みを行うからです。

padding-left630px設定してみると、画像の600pxプラス30px親要素の左端から空くので画像から30px空いているように見えますよ。

さて、des1overflowを設定することで適切にpaddingが反映される理由ですが、実はoverflowのもともとの意図とは少し違います。
overflowはあくまで、コンテンツが要素からはみ出した場合にどう処理するか、ということです。
それでも今回のようにうまくいくのは、overflowvisible以外を設定すると新たなブロック要素を形成する、という特徴のためです。
このあたりは少し複雑ですので、そういうもの、とおぼえておいてもよいかと思います。

蛇足ですが、昨今floatはflexに置き換えられることが多いので、そちらを勉強されることをおすすめしたいとおもいます。

投稿2018/10/17 07:51

macaron_xxx

総合スコア3191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

colling

2018/10/17 08:16

②の件、なるほどーって感じです。新たなブロック要素を形成するんですね。φ(ー` )メモメモ
kazin

2018/10/17 13:09

ご回答ありがとうございます。 一つ一つの疑問に対して、丁寧に紐解いてくださりまして、きれいに理解することができました。 また知っておきたい豆知識等も加えて、ご教授いただきまして助かりました。 ありがとうございます。
guest

0

この場合、#des1floatになっていないため、<img src="images/onsen1.jpg" id="onsen1">の下にもぐり込んでいると思います。

意図されている状態を作るには、#desc1float: left;を適用すると、paddingまたはmarginで写真とのスキマを作れると思います。
overflow-hidden;は、ここのpaddingとは全く関係ないので消してもらって大丈夫です。

最後にどこか、floatが必要なくなったところで、clear:both;してください。

投稿2018/10/17 08:05

編集2018/10/17 08:09
colling

総合スコア798

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazin

2018/10/17 13:07

ご回答ありがとうございます。 要素が既に潜り込んでしまっているということにきづけませんでした。 また、clear both の使い方等も腑に落ちました。 今回、先にご回答いただいた方をベストアンサーにさせていただきますが、ご丁寧に回答してくださり助かりました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問