• RSS

[CSS]iframeを使わず、CSS で擬似インラインフレームを作成する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

iframe そのものを使うコトがほとんど無くなりましたが、ボックスにスクロールバーが付いた iframe 的な見せ方はまだまだ健在です。

やり方としては、まずは親要素を指定の幅や高さで固定し、要素内のコンテンツがはみ出した部分は overflow を使って制御するという感じです。

overflow:を使った擬似的なインラインフレーム

CSS の記述

.inlineframe 内のコンテンツが親要素の高さを超えてしまっても良いように、overflow で制御します。



HTML の記述

続いてHTML側の記述はこのような感じ。



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

デザインに合わせて width:padding:border: などの補正を入れています。
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください