Google MapsやYoutubeなどを埋め込み表示したiframe要素をレスポンシブ対応（表示サイズをブラウザに合わせてくれる）するのに便利なCSS「Fluidity」のご紹介です。
fluidity.css のダウンロード
以下のページより、Fluidityのcssファイルをダウンロードします。Fluidity
ifrmae要素をレスポンシブ対応
ダウンロードしたfluidity.cssを<head>タグ内に設置します。|
1 |
<link rel="stylesheet" type="text/css" href="./fluidity.css"> |
あとは、HTMLファイル側に以下のようなiframeのコードを書きます。
Youtube
|
1 |
<iframe width="640" height="480" src="https://www.youtube.com/embed/14gdNSfHF60" frameborder="0" allowfullscreen></iframe> |
Google Maps
|
1 |
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d51840.06005295!2d139.70920705!3d35.70152525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d2059b7fd4b%3A0xec61c68fe232efd2!2z5p2x5Lqs6YO95paw5a6_5Yy6!5e0!3m2!1sja!2sjp!4v1443681637275" width="100%" height="320" frameborder="0" style="border:0" allowfullscreen></iframe> |
fluidityによるifrmae要素のレスポンシブ対応デモはこちらです。
Fluidity によるiframe 要素のレスポンシブ対応デモ
table要素をレスポンシブ対応
fluidity.cssは、HTML5のcanvas、video、svg にも対応している他、table 要素の表組にも対応しています。table要素の場合は、以下のような親要素（.overflow-container）を使います。
|
1 2 3 4 5 |
<div class="overflow-container"> <table> … </table> </div> |
fluidityによるtable要素のレスポンシブ対応デモはこちらです。
Fluidity によるtable 要素のレスポンシブ対応デモ
fluidityはファイルが軽量で使いやすく、過去に作ったiframe やtable まみれのサイトを簡単にレスポンシブ対応する場合などに便利だと思います。
コメント