ピッと気になるコトとモノをご紹介「カリルノ」

Web

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

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

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

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

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

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

HTMLの記述はこんな感じ

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

CSSの記述はこんな感じ

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

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

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

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

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

まとめ

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

-Web
-,

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