iframeそのものを使うコトがほとんど無くなりましたが、ボックスにスクロールバーが付いたiframe的な見せ方はまだまだ健在です。
やり方としては、まずは親要素を指定の幅や高さで固定し、要素内のコンテンツがはみ出した部分はoverflowを使って制御するという感じです。
overflow:を使った擬似的なインラインフレーム
CSSの記述
.inlineframe内のコンテンツが親要素の高さを超えてしまっても良いように、overflowで制御します。
|
1 2 3 4 5 6 7 8 9 |
<style> .inlineframe { background-color:#FFFFFF; height:200px; overflow:auto; overflow-y:scroll; overflow-x:hidden; } </style> |
HTMLの記述
続いてHTML側の記述はこのような感じ。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="inlineframe"> <ul> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul> </div> |
擬似インラインフレームのサンプル
デザインに合わせてwidth:やpadding:、border:などの補正を入れています。
コメント