linkerは「人と人」「人と情報」「人と物」をつなぐデザインユニットです。

特に用途はないけどoverflow:hiddenの話とか

2009年04月23日 HTML/CSS/JavaScript 柳谷 真志柳谷 真志

みなさん、こんにちは！まーしーです。
本日免許更新したんですが前回の更新をすっぽかしてしまったため次の更新もまた3年後。
ゴールドへの道は遠いです。。

前回もとくに使えない話をしてしまったのですが、今日も特に使えなそうです・・・
個人的に気になったことを書いてみようかな、と思います。
ネタ元は先日お手伝いさせてもらった新人研修です。Ｔさんありがとう。
頭が柔らかいってすばらしいですね！！

まずゴール

とりあえず、今回作りたいものっていうのが

sample00.jpg

こんなかんじのデザインだとします。メニュー部分はul , li でfloatで作ってあります。
（プレビューでPNGをjpgにしたらかなりにじんでるな・・・）

demoはこちら（以下、Firefoxでのみ確認してます）

HTML（抜粋）は


  
サンプル１

  
  

    
サンプル原稿１サンプル原稿２サンプル原稿３サンプル原稿４サンプル原稿５サンプル原稿６サンプル原稿７サンプル原稿８サンプル原稿９サンプル原稿１０サンプル原稿１１サンプル原稿１２サンプル原稿１３サンプル原稿１４サンプル原稿１５サンプル原稿１６サンプル原稿１７サンプル原稿１８サンプル原稿１９サンプル原稿２０

  

  

    
次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落

    
次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落次の段落

なかんじで、CSS（抜粋）は

ul{
	list-style:none;
	margin:0;
	padding:0;
}
ul li{
	margin:0;
	padding:0;
	width:120px;
	text-align:center;
	float:left;
	border:1px solid #111;
}
ul li a{
	display:block;
}
ul li a:hover{
	background:#CCCCFF;
}
#maincontent{
	clear:both;
	background:red;
}

となりますね。
#maincontentの clear:both; で全てが解決するので、普通の場合はそういうことで完了です。

clear:both; の代わりに overflow:hidden;

clear:both;がなかったらどうなるか？はおわかりだと思いますが、
その代わりにoverflow:hidden;がついてたらどうなるかと思います？  

sample01.jpg

こんな感じになるんですよね。
回り込みを解除してないのでまず回り込んで、div#maincontentがそこの幅になるようです。
width: auto;ということで。
ほ〜、ってなかんじです。

cssはこんな感じですね。

#maincontent{
        background:red;
        overflow:hidden;
}

demoはこちら

これってのは結局div#maincontentの幅が ul の右の余白サイズより小さい場合とほぼ同じですね。


sample02.jpg

おおむね、同じですね。
cssはこんな感じです。

#maincontent{
        width:230px;
        background:red;
        overflow:hidden;
}

demoはこちら。

なるほどなるほど、っていうかんじです。

開始位置次第

なんとなく開始位置次第っぽい、ということなので div#maincontent に margin-top が指定されてれば？というと

sample03.jpg

こうなりますね。幅全部に揃うことになるので自動的に広がりますよね。

cssはこんな感じ。

#maincontent{
        margin-top:4em;
        background:red;
        overflow:hidden;
}

demoはこちら

ということで、overflow:hidden をつかうとこういう動きになるんだ〜、という感じだったので書いてみました。

前回のもoverflow:hiddenでいけるかも

とやりながら思ったのが、前回のなかで最後のものがoverflow:hidden; でいけるのかも？とおもったのでやってみたところ、こんな感じです。

sample04.jpg

HTMLはこんなかんじ


  
あいうえお

  
あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

  
あいうえおあいうえお

  
あいうえおあいうえおあいうえおあいうえお

  
あいうえおあい

  
あいうえお

CSSはこんな感じ

dl{
        width:400px;
}
dt{
        margin-bottom:0.5em;
        float:left;
        margin-right:10px;
}
dd{
        border-left:2px solid #376122;
        padding-left:10px;
        margin-bottom:0.5em;
        overflow:hidden;
}

demoはこちら

ということです。

これがわかったから、なんなんだ？というのがあったりもしますが、
最初これに出会ったときに「なんでだろうな？」とおもったりもしたので書いてみました。

今回は「overflowが好き」といってたtaku-workさんの件とは関係ありません（笑

参考リンク

2009年04月23日