[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。

レイアウトテクニックあれこれ

ボックスの内容があふれたらどうする？

　サンプルとして、「絶対指定と相対指定その３」で使用したボックスを使用します。薄オレンジ色■のボックス003の中にネストされた薄緑色■のボックス002のサイズを縦横200ピクセルに拡大して、親要素よりはみ出るように設定すると、下図のようになります。かなりはみ出てます。

div001
div003
div002
div004
＜サンプルコード＞

<div style="width:100px; height:100px;">div001</div>
<div style="width:100px; height:100px;"
position:relative; left:200px >div003

　　<div style="width:200px; height:200px;
　　position:absolute; top:25px; left:25px;">div002</div>

</div>
<div style="width:100px; height:100px;">div004</div>

オーバーフロープロパティで対処せよ！

　枠内に収まるようにコンテンツを考えるのが基本ですが、やむを得ず内容があふれてしまう場合には、ＣＳＳの「overflow」（オーバーフロー）プロパティを使用することで、ある程度対処できます。値のキーワードは以下の4種類です。

オーバーフロー処理　サンプル１　HIDDEN（隠す）

　薄オレンジ色■のボックス003のオーパーフロープロパティの値に「HIDDEN」キーワードを使用した例が以下のサンプルです。あれだけはみ出ていた薄緑色■のボックスがきれいに切り捨てられています。しかし、表示されない部分は見えなくなってしまうため、使用には注意が必要です。

div001
div003
div002
div004
＜サンプルコード＞

<div style="width:100px; height:100px;">div001</div>
<div style="width:100px; height:100px;"
position:relative; left:200px; overflow:hidden;" >div003

　　<div style="width:200px; height:200px;
　　position:absolute; top:25px; left:25px;">div002</div>

</div>
<div style="width:100px; height:100px;">div004</div>

オーバーフロー処理　サンプル２　SCROLL（スクロール）

　今度は、薄オレンジ色■のボックス003のオーパーフロープロパティの値に「SCROLL」（スクロール）キーワードを使用した例が以下のサンプルです。あふれた部分はスクロールバーでスクロールすれば内容を確認することができます。見た目はあまり美しくありませんので、使う場面は限られるでしょう。

div001
div003
div002
div004
サイトトップページへ戻る