CSSデザインノートでタグ「overflow」が付けられているもの

コンテンツ量が少なくても常に縦スクロールバーを出す方法は、昔に以下の記事を書きました。

これらの記事を書いてから約2年が経ち、ブラウザの実装状況も変わってきました。

2010年5月現在は、主要の最新ブラウザで、以下の記述で、コンテンツ量が少なくても常に縦スクロールバーを出すことができます。

CSSコード

html {
   overflow-y:scroll;
}

最新のブラウザならCSS3の草案を取り入れているようですね。

また、以前は有効であったhtmlの高さを100%にし、マージンを1px空けて、縦スクロールバーを出す方法はFirefox3.6.3では効かなくなっていたので注意です。今のところ他のブラウザ(safari、Opera、Chome)には有効のようです。

CSSコード

html {
   height:100%;
   margin-bottom:1px;
}

例えば、Amazonのアフィリエイトみたいに、書籍の画像と説明文を横並びにする方法です。 説明文が長いとき画像の下に回りこまないのが美しいですよね。方法は二通りあります。

  1. marginで指定
  2. overflowで指定

以下にサンプル画像を示します。

サンプル画像

基本の(X)HTMLコードは以下のようになります。

(X)HTMLコード


<div class="column">
<img src="image.gif" alt="" />
<p>
テキストテキストテキストテキストテキスト
・・・(略)・・・
テキストテキストテキストテキストテキスト
</p>
</div>

1.marginで指定

画像の横幅が固定の場合は、その大きさ分をmarginで空けます。

CSSコード

.column img{
   float:left;
}

.column p{
   margin-left:160px;
}

この場合、次の要素も回り込んだままなので、clearなどを指定して回り込みを解除しなければなりません。

2.overflowで指定

画像の横幅が未知の場合は、余白を固定することが出来ません。overflowを使用することで、テキストが回り込まなくなります。

CSSコード

.column img{
   float:left;
}

.column p{
   overflow:hidden;
   zoom:1;
}

「zoom:1;」はIE6でレイアウトが崩れるのを防ぐために指定します。

横並びのメニューで、左側あるいは右側にmarginで余白を空けた際、最初あるいは最後のメニュー部分だけ余白は必要ではありませんよね。classを指定しないで余白を消す方法です。

横並びのメニュー

first-childあるいはlast-childセレクタを使用すれば簡単に実現できますが、IE6など一部のブラウザでは対応していません。そこで、ネガティブマージンを使用することで、無駄にclassを指定することなく、最後の余白だけ消すことが出来ます。

(X)HTMLコード

<div class="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</div >

CSSコード

div.menu {
   width:430px;
   border: solid 1px #000;
}

div.menu ul {
   margin:0;
   padding:0;
   margin-right:-10px;
   overflow:hidden;
   list-style:none;
   zoom:1;
}

* html div.menu ul { /* for IE6 */
   margin-right:-20px;
}

div.menu ul li {
   float:left;
   width:100px;
   margin-right:10px;
   padding:10px 0;
   text-align:center;
   background:#ddd;
}

liにmargin-right:10px;を指定して右側に余白を空け、ulにmargin-right:-10px;を指定してリストの一番右側の余白を相殺します。

IE6ではfloatしたボックスのmarginの値が2倍になるバグがあるので、* htmlハックを利用してIE6用に、2倍の-20pxをulの右側の余白に指定します。このバグを回避する方法はいくつかあるのですが(例えば「display:inline;」を指定する)、今回はこのような処置を取ります。

IE6でネガティブマージンを有効にするために「zoom:1;」を指定します。これはhasLayoutプロパティの値をtrueにするためです。hasLayoutに関しては、以下のサイトなどを参考にしてください。

floatを解除するのに「overflow:hidden;」を使用していますが、以下のページに書いてあるような方法でも構いません。

floatを使用してボックスやリストを横並びにした時、次のコンテンツも続いて横並びになってしまうので、回り込みを解除しなければなりません。

また、floatした親要素の内容が0になってしまい、親要素に背景やborderを適用しようとしても表示できません。

これを簡単に解決する方法がいくつかあります。

  1. 次のコンテンツに「clear」を指定する
  2. 親要素に「clearfix」を使用する
  3. 親要素に「overflow」を指定する

まず、サンプルとして共通の(X)HTMLコードを示します。

(X)HTMLコード

<div id="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</div>
<div id="contents">
・・・
</div>
</ul>

1.次のコンテンツに「clear」を指定する

回り込みを解除したい要素に「clear:both;」を指定します。

CSSコード

div#contents {
   clear:both;
}

2.親要素にclearfixを使用する

floatの親要素の高さを算出するメジャーな方法に「clearfix」と呼ばれるテクニックがあります。これを考えた人はすごいです。

CSSコード

div#menu {
   margin:0;
   padding:0;
}

div#menu li {
   float:left;
   list-style:none;
}

/* モダンブラウザ(Firefox Opera Safari)対策 */
div#menu :after{
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
   font-size:0;
}

/* Win版IE7とMac版IE5対策 */
div#menu {
   display:inline-block;
}

/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html div#menu {
   height:1px;
}

div#menu {
   display:block;
}
/* End hide from IE-mac */

3.親要素にoverflowを指定する

overflowを親要素に指定することにより、高さが算出されます。値はauto、hidden、scrollのいずれかを使用します。

CSSコード

div#menu {
overflow:hidden;
}

確認はしていないのですが、「overflow:hidden;」を使用した場合、ブラウザのバージョン(特に古いバージョン)によっては正常に動作しなかったり、印刷時に問題があったりすることもあるようです。

参考サイト

そのほかにもいろいろとfloatを解除する方法があるようです。

最近のブログ記事