[CSS]この発想はなかった！たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity

画像やテーブル、地図などを配置するiframe, video, canvas, svgなど、主にボックス系のHTML要素をシンプルなコードでレスポンシブ対応にするスタイルシートを紹介します。

外部ファイルとして使用するのでそれでも一行ですが、中身も一行（115文字）の超軽量スタイルシートです。

Fluidity
Fluidity -GitHub

• Fluidityのデモ
• Fluidityの使い方

Fluidityのデモ

デモでは画像、テーブル、codeを配置したpre要素、canvasを使ったイメージ、Google Mapsを配置したiframe要素があります。

img要素を使った画像

table要素を使ったテーブル

これらの要素はシンプルなHTMLで、Fluidityを加えるだけでレスポンシブ対応になります。

幅を780pxに変更

Google Mapsなどを配置したiframeにも対応しています。

iframeを使った地図

Fluidityの使い方

使い方は簡単です。

Step 1: 外部ファイル

head内に当スタイルシートを追加するだけで完了です。

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

Step 2: HTML

あとは、通常通りにHTMLを記述するだけです。

画像の場合

<img src="image.png">

テーブルの場合
テーブルの時はclassを加えます。

<div class="overflow-container">
 <table>
   <!-- table contents -->
 </table>
</div>

地図の場合

<iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" frameborder="0" style="border:0"></iframe>

fluidity.cssの中身

Fluidityは非常にシンプルで、中身は一行で115文字です。
max-width, overflow-yを使用して、レスポンシブ対応にします。

img,canvas,iframe,video,svg{max-width:100%}.overflow-container{overflow-y:scroll;-webkit-overflow-scrolling:touch}

プロパティごとにまとめても、わずか2行です。

img, canvas, iframe, video, svg { max-width: 100%; }
.overflow-container { overflow-y: scroll; }