Web

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

更新日:

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

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

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

HTMLの記述はこんな感じ

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

CSSの記述はこんな感じ

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

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

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

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

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

まとめ

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

殿堂入り記事一覧

1
ベビー用品の購入はメルカリがお得!"中古はちょっと"と思っているあなた損してます!122

子どもが生まれる前は、やっぱり私も「初めての赤ちゃんだし中古はちょっと」と思って、ベビー用品は新品のものばかりを揃えていました。 でも、ベビーチェアを探しているときに一度メルカリを覗いて見たら、思って ...

2
本当におすすめしたい!買ってよかった便利グッズまとめ!843

元々、その場の勢いでモノを購入しないタイプの私が悩みに悩み、調べに調べた上で購入したものの中から、厳選して、今でも本当に買ってよかった!と思っている生活雑貨やガジェットを紹介したいと思います。 使い所 ...

3
絶対読むべき!私が読んで面白かったオススメ漫画を紹介します!373

ほんとに世の中にはたくさんの面白い漫画があります。 その中でも私が実際に読んでみて面白かったと思った漫画をさらっとまとめていきます。 もくじ1 面白い漫画一覧1.1 かくかくしかじか1.2 動物のお医 ...

4
マザーズバッグはリュック型?トート型?どちらを買うべき?997

出産を前にマザーズバッグを探そうと思った時にトートにしたらいいか、リュックにしたらいいか悩みますよね。 正直にいうと、トートもリュックも用意して、かつトートが斜め掛けできるものだったら、ほぼどんなお出 ...

5
【保存版】出産準備用品リスト!安心して赤ちゃんを迎えるために!769

安定期に入った頃から準備を始めてベビー用品。 ただ、初めての出産で「何を買ったらいいのかさっぱりわからない」というママ・パパも多いのではないでしょうか。 そんなママ・パパのためにわかりやすい「出産準備 ...

6
本格的な水中撮影にはアクションカメラ「GoPro」が絶対オススメ!4,844

最近はスキューバーダイビングやシュノーケルの水中撮影でGoProを使用している方も多くなってきています。 以前は水中撮影をしようと思うと大型で高価な撮影機材を使用しなければいけませんでしたが、GoPr ...

7
山ガールにもおすすめ!富士登山グッズのレンタルショップ5選403

富士登山やトレッキングに行きたいと思っても装備のことで頭を抱えてしまいますよね。 勢い込んで装備を購入しても、「次も行きたい」となるか「もうこりごり」となるかは人しだいなところもありますし、かといって ...

-Web
-,

Copyright© カリルノ , 2017 AllRights Reserved.