ホームページのネタ帳

iframe要素を使わずにcssでインラインフレームを作成する方法

2012年7月20日

インラインフレームは対応していないブラウザがあったり、 重たくなったりすることがあるので、
CSSで擬似的なインラインフレームを作成する方法を紹介します。
この方法なら、どんな環境でも対応できると思います。


■html

<div class="box">
   <p>テキストが入ります。テキストが入ります。</q>
   <p>テキストが入ります。テキストが入ります。テキストが入ります。</q>
   <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</q>
   <p>テキストが入ります。テキストが入ります。</q>
</div>

■css

.box {
         border: 1px solid #DCDCDC;
         width: 200px;
         height: 100px;
         padding: 15px;
         overflow: auto;
}



このようになります。↓

   

テキストが入ります。テキストが入ります。
   

テキストが入ります。テキストが入ります。テキストが入ります。
   

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
   

テキストが入ります。テキストが入ります。



width、height、paddingの値を変えることで、ボックスの幅、高さ、余白を変更することができます。


カテゴリー関連記事

お問い合わせはこちら

ご質問などございましたら、お気軽にご連絡ください。

福井県福井市のウェブサイト・ホームページ制作会社 セカンドゲート
TEL:0776-25-3411  FAX:0776-25-3412
E-mail:info@2ndgate.jp