[CSS]iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[CSS]iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」

CSS

Fluidity

スポンサード

Google Maps やYoutube などを埋め込み表示したiframe 要素をレスポンシブ対応（表示サイズをブラウザに合わせてくれる）するのに便利なCSS「Fluidity」のご紹介です。

fluidity.css のダウンロード

以下のページより、Fluidity のcssファイルをダウンロードします。

Fluidity

ifrmae 要素をレスポンシブ対応

ダウンロードしたfluidity.css を<head>タグ内に設置します。

<link rel="stylesheet" type="text/css" href="./fluidity.css">

あとは、HTMLファイル側に以下のようなiframe のコードを書きます。

<!--Youtube-->
<iframe width="640" height="480" src="https://www.youtube.com/embed/-lVPDYQ6zdg" frameborder="0" allowfullscreen></iframe>

<!--Google Maps-->
<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）を使います。

<div class="overflow-container">
	<table>
	…
	</table>
</div>

fluidity によるtable 要素のレスポンシブ対応デモはこちらです。
Fluidity によるtable 要素のレスポンシブ対応デモ

fluidity はファイルが軽量で使いやすく、過去に作ったiframe やtable まみれのサイトを簡単にレスポンシブ対応する場合などに便利だと思います。

スポンサード