★このページでは、CSSの基本的な仕様について解説しています。

動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。

　

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL９. 配置に関する設定　その４ ★ 内容が指定サイズ内に収まりきらない場合の処理方法

　

overflow: <値>;

boxに幅や高さが指定されていると、内容によってはその範囲内に収まりきらない場合が出てきます。このような時に、はみ出る部分の表示方法を指定することができます。このプロパティに<値>として設定出来るのは、以下の4つです。

visible ... boxのサイズ指定を無視して、はみ出る部分も表示させる。（デフォルト）

hidden ... はみ出る部分は表示しない。

scroll ... boxサイズはそのままで、縦横にスクロールバーが出て内容をスクロール出来るようにする。

auto ... ブラウザが自動的に処理する。

　

※CSSを実際に動作させるとブラウザによって表示が異なるため、以下の例は、CSSを使って動作させた時の表示を画像化して掲載しています。実際に動作している実例は、こちらでご覧下さい。ただし、実例が動作確認されているのはIE6.0のみですので、ブラウザによっては正しく表示されていない場合があります。

ⅰ）「overflow: visible;」

この要素は幅100px、高さ100pxに設定されていますが、「overflow: visible;」に指定されているので、サイズ指定は無視されて、 幅147px、高さ143pxの画像の、本来はみ出る部分も表示されています。　

　

ⅱ）「overflow: hidden;」

この要素は幅100px、高さ100pxに設定され、「overflow: hidden;」が指定されているので、はみ出る内容は表示されません。

　

ⅲ）「overflow: scroll;」

この要素は幅100px、高さ100pxに設定されていますが、「overflow: scroll;」に指定されているので、はみ出る部分はスクロールによって見ることが出来ます。

　

ⅳ）「overflow: auto;」

この要素は幅100px、高さ100pxに設定されていますが、「overflow: auto;」に指定されているので、ブラウザが自動的に判断して処理しています。

　

上の例では「overflow: scroll;」と「overflow: auto;」は表示が同じになっていますが、下の例のように内容が全て表示できるだけの幅もしくは高さが確保された場合、 「overflow: auto;」は不必要なスクロールバーを表示しません。

ⅰ）「overflow: scroll;」

この要素は幅170px、高さ100pxに設定されているので、内容の幅を全て表示できますが、「overflow: scroll;」に指定されているので、横方向のスクロールバーも表示されています。

　

ⅱ）「overflow: auto;」

この要素は幅170px、高さ100pxに設定されているので、内容の幅を全て表示できますから、「overflow: auto;」を指定すると、横方向のスクロールバーは表示されません。　

この要素は幅100px、高さ170pxに設定されているので、内容の高さを全て表示できますから、「overflow: auto;」を指定すると、縦方向のスクロールバーは表示されません。

以上7つの例について、CSS外部ファイルとHTMLのサンプル部分は以下のように書かれています。

div.visible { width: 100px;
height: 100px;
overflow: visible; 
}

div.hidden { width: 100px;
height: 100px;
overflow: hidden; 
}

div.scroll { width: 100px;
height: 100px;
overflow: scroll; 
}

div.auto { width: 100px;
height: 100px;
overflow: auto; 
}

div.scroll2 { width: 170px;
height: 100px;
overflow: scroll; 
}

div.auto2 { width: 170px;
height: 100px;
overflow: auto; 
}

div.auto3 { width: 100px;
height: 170px;
overflow: auto; 
}

サンプル部分のHTML記述

<div class="visible">
<img src="aa_linkwear_star_welcome.jpg" width="147" height="143">
</div>

<div class="hidden">
<img src="aa_linkwear_star_welcome.jpg" width="147" height="143">
</div>

<div class="scroll">
<img src="aa_linkwear_star_welcome.jpg" width="147" height="143">
</div>

<div class="auto">
<img src="aa_linkwear_star_welcome.jpg" width="147" height="143">
</div>

<div class="scroll2">
<img src="aa_linkwear_star_welcome.jpg" width="147" height="143">
</div>

<div class="auto2">
<img src="aa_linkwear_star_welcome.jpg" width="147" height="143">
</div>

<div class="auto3">
<img src="aa_linkwear_star_welcome.jpg" width="147" height="143">
</div>

　

　

画像を使って解説しましたが、テキストでも同様に指定できます。サイズ指定された枠内からはみ出すテキストに対して「overflow: scroll (auto);」を指定すると、画面上での見た目はインラインフレームを使ったのと同じようになります。これを利用すれば面白いデザインが実現できるのではないでしょうか。

※このサンプル実例は、こちらでご覧になれます。

なお、CSS外部ファイルとHTMLは以下のように書かれています。

body { margin: 50px 50px; 
color: #003366;
background-color: #9b9bff;
font: normal normal bold 10pt/1.2 "ＭＳ Ｐ明朝"; 
}

h2 { text-align: left;
font-size: 10pt;
margin: 10px; }

h3 { text-align: left;
font-size: 10pt;
margin: 4px;
}

p { text-align: right;
}

div { text-align: left;
width: 250px;
height: 100px;
overflow: auto; 
border-width: 2px;
border-style: inset;
padding: 10px;
scrollbar-base-color: #036;
scrollbar-3dlight-color: #9b9bff;
scrollbar-highlight-color: #8484ff;
}

サンプル部分のHTML記述

<div>

<h2>&lt;今月の更新予定&gt;</h2>

<h3>ホームページを作ろうヨ!!</h3>

<ul>

<li>配置に関する設定</li>

<li>テーブルに関する設定</li>

</ul>

<h3>Sweets! Sweets!「いちごづくし」</h3>

<ul>

<li>イチゴのショートケーキ</li>

<li>イチゴのタルト</li>

<li>イチゴのヴァシュラン</li>

</ul>

<p>お楽しみに!!</p>

</div>

　

　

初級篇2.VOL9. 配置に関する設定・その3 <<

>> 初級篇2.VOL10. テーブルに関する設定・その1

　

　

2007.2.12.-2.13.+2.21.