[CSS]この発想はなかった！たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity
Post on:2014年3月26日
sponsors
画像やテーブル、地図などを配置する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; }
sponsors
