トップページ > 便利な小技 > インラインフレーム風コラム

CSSレイアウト[便利な小技]

インラインフレーム風コラム

Column
インラインフレーム風のコラムをつくるのもCSSなら簡単。オーバーフロウを「オート」か「スクロール」にすれば、すぐにスクロールバーの付いたコラムが作れます。ぜひお試しを！
左のように、文章のあふれた分をスクロールで読ませる「インライン風」のボックスは、CSSで簡単に作ることが出来る。
これは「overflow」プロパティに「auto」を指定するだけ。「auto」は内容が収まらない場合、高さのスクロールバーを出す。

このプロパティの値は他に「visible」「hidden」と「scroll」がある。
「visible」は収まりきらない内容をそのまま表示する（天地サイズが延びる）。
「hidden」は収まりきらない内容を非表示にする。メニューなどに利用するとレイアウトが崩れない。

（注）MACのIE5での「overflow : hidden」は、オーバーフロウ分どころか内容全部が非表示になる。
（注）scrollにすると、横のスクロールバーもでる。
インラインフレーム風コラムの作り方
ボックス（column）の天地左右のサイズを決め、「overflow: auto;」と指定するだけ。囲み罫や背景色が無いとスクロールバーだけが浮いて見えるので、「border」くらいは指定したほうがいい。
.column {
width: 200px;
height: 90px;
overflow: auto;
background: #FEFCDE;
border: 1px solid #6666CC;
padding: 10px;
}
kwz2.css
HTMLは下記の通り。タイトルの<h5>には「.clm-ttl」というCSSを指定している。これはタイトルの画像を配置したもの。
<div class="column">
<h5 class="clm-ttl">Column</h5>
インラインフレーム風のコラムをつくるのもCSSなら簡単。オーバーフロウを「オート」か「スクロール」にすれば、すぐにスクロールバーの付いたコラムが作れます。ぜひお試しを！
</div>
ページの最上部へ