【CSS】iframeを使用せず擬似インラインフレームを作る方法

最近はiframe（インラインフレーム）を使うことはなくなりましたが、お知らせや更新履歴などの部分はボックスでスクロールできる形にしている方もまだまだ多いのではないでしょうか。

その場合はCSSで擬似インラインフレームを使用すると良いようです。

擬似インラインフレームの使用方法

HTMLの記述はこんな感じ

divなどでボックスを作り、適当にテキストを入れます。

<div class="flame">
お知らせや更新履歴など、どんどん追加されていくタイプコンテンツは擬似インラインフレーム使うことで表示範囲を抑えつつ、目立つ場所に掲載することが可能ですよ。
</div>

CSSの記述はこんな感じ

高さを指定し、高さを超えた場合にoverflowでスクロールするようにします。（ハイライトの部分）
その他の部分はデザイン調整です。

 .flame{
    overflow:auto;
    height:100px;
    width:200px;
    border:1px #333 solid;
    background:#fff;
    padding:10px;
} 

■overflowで指定できる値
scroll：スクロールバーを表示
visible：スクロールバーを表示
hidden：スクロールバーを隠す
auto：スクロールバーの出る出ないを自動判別する

擬似インラインフレーム完成サンプル

スクロールできるようになりました、

まとめ

けっこう簡単ですね。
これで省スペースで多くの情報を掲載することができますね。