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

VOL13. IE独自拡張による設定　その6 ★ overflow を縦と横で個別に指定する（IE5.0以降で有効）

Boxの大きさを指定してある時に内容がはみ出る場合の処理は、基本的に「overflow:」を使って指定するわけですが、これだと縦と横の処理を個別に設定できません。そこでIEには「overflow-x:」と「overflow-y:」という独自のプロパティがあり、縦と横を個別に指定できるようになっています。(※「overflow:」については、Vol9.配置に関する設定・その4を参照して下さい。)

overflow-x: <値>;    ... 横方向の処理を指定

overflow-y: <値>;    ... 縦方向の処理を指定

<値>に指定できるのは、以下の4つです。

visible ... boxのサイズ指定を無視して、はみ出る部分も表示させる。

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

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

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

下のex1.) と ex2.) は、ボックスサイズは同じですが、ex1.) には縦横とも「hidden」が指定されているので一部しか表示されていません。ex2.) は、横方向は「visible」、縦方向は「scroll」となっているので、横は全て表示、縦のみスクロールバーが出ています。(CSSを実際に動作させるとブラウザによって正しく表示されない場合があるため、以下のサンプルは動作させた画面を画像化したものです。)

ex1.)　div { width: 100px; height: 100px; overflow-x: hidden; overflow-y: hidden; }

ex2.) div { width: 100px; height: 100px; overflow-x: visible; overflow-y: scroll; }

画像はこのように指定が反映されますが、テキストは枠内に収まりきらない場合には幅指定が生かされ、高さ指定が無視されて下に長くなるという性質があります。従って横方向には事実上はみ出しは発生しませんので、「overflow-x:」を指定しても無意味です。

ex3.) p { width: 200px; height: 200px; overflow-y: scroll; }

初級篇2.VOL13. IE独自拡張による設定・その5 <<