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

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

ただいまの
回答率

89.98%

overflow-hiddenの特性について

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,083

kazin

score 6

 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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

①以前、同様の条件で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 17:16

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

    キャンセル

  • 2018/10/17 22:09

    ご回答ありがとうございます。

    一つ一つの疑問に対して、丁寧に紐解いてくださりまして、きれいに理解することができました。

    また知っておきたい豆知識等も加えて、ご教授いただきまして助かりました。
    ありがとうございます。

    キャンセル

+1

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/17 22:07

    ご回答ありがとうございます。

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

    ありがとうございます。

    キャンセル

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

  • ただいまの回答率 89.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る