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

投稿日:2016/06/20 更新日:

最近は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:スクロールバーの出る出ないを自動判別する

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

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

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

まとめ

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

-ウェブ・ブログ
-,

Copyright© カリルノ , 2018 All Rights Reserved.