ボックス領域からはみ出した内容の表示方法を指定する「overflow」プロパティ

最近のブログで「ブラウザにソースコードをそのまま表示する基本的な方法」についてメモりました。そこでHTMLの文字実体参照変換や<pre><code>タグについて書きました。今回はスタイルシートを使ったソースコード（ソースコードでなくてもいいのですが…）を入れる器についてのメモです。
表示するソースコードが大量になる場合や１行が長い時の横幅をはみ出してしまう場合は折り返してしまったりするので、その辺りの対処をするためのまとめです。


1.overflowプロパティを使った表示方法いろいろ
overflowプロパティはブロックの内容領域がwidthプロパティ、heightプロパティによって指定されている際に、横幅・高さの領域からはみ出した際の表示方法を指定することができます。横方向のみの指定や縦方向のみの指定を行なう際には横方向は「overflow-x」、縦方向は「overflow-y」で指定することができます。

ボックスにoverflowプロパティを設定するには、<per>のスタイルシートにoverflowプロパティの記述を行なうのもいいのですが、そうするとボックスのプロパティのバリエーションが多くなって管理しにくくなるので、HTMLの<div>か場合によっては<per>に「style」記述した方がいいのかなと思います。

No.	値属性	内容
01	visible	はみ出した内容を領域から溢れさせて表示する（規定値）
02	scroll	内容量に関係なく、常に縦、横スクロールバーを表示する
03	hidden	はみ出した内容は表示しない
04	auto	ウェブブラウザに依存。領域を超える際にスクロールバーを表示する

• visible

「visible」は規定値です。overflowプロパティの設定が無い場合の表示と同様になります。はみ出した内容については指定された横幅･高さの領域から溢れさせた状態で表示します。InternetExplorerでは内容量に合わせてボックスが自動的に広がります。

スタイルシート属性のoverflowプロパティはボックス領域をはみ出した要素についての扱いをどのように行なうかを指定します。
属性値「visible」は規定値です。overflowプロパティの設定が無い場合の表示と同様になります。はみ出した内容については指定された横幅･高さの領域から溢れさせた状態で表示します。InternetExplorerでは内容量に合わせてボックスが自動的に広がります。

• scroll

縦、横にスクロール・バーが表示され、枠からはみ出した部分はスクロール･バーを移動することで表示されます。

スタイルシート属性のoverflowプロパティはボックス領域をはみ出した要素についての扱いをどのように行なうかを指定します。
属性値「scroll」は縦、横にスクロール・バーが表示され、枠からはみ出した部分はスクロール･バーを移動することで表示されます。

• hidden

ボックス領域からはみ出した要素については枠からはみ出した部分を表示しません。

スタイルシート属性のoverflowプロパティはボックス領域をはみ出した要素についての扱いをどのように行なうかを指定します。
属性値「hidden」はボックス領域からはみ出した要素については枠からはみ出した部分を表示しません。

• auto

ブラウザに依存した表示を行ないます。多くのブラウザでは縦スクロールが表示され、ボックスをスクロールすることで見られるようになります。

スタイルシート属性のoverflowプロパティはボックス領域をはみ出した要素についての扱いをどのように行なうかを指定します。
属性値「auto」はブラウザに依存した表示を行ないます。多くのブラウザでは縦スクロールが表示され、ボックスをスクロールすることで見られるようになります。

News Source Site

• overflow：World Wide Web Guide
• スタイルシートリファレンス／overflow：HTMLクイックリファレンス