ITエンジニア/デザイナ向けにオープンソースを毎日紹介

レスポンシブWebデザインを考え始めるとメディアクエリーや細かな表示の制御など考えるべきところがたくさんあって、厄介な印象が強くなる訳ですが、もっとシンプルに考えて良いんじゃないと訴えかけてくるのがFluidityになります。

HTMLは元々素の状態でも“ほぼ”100%レスポンシブであると言います。そしてそのほぼから外れた部分を補正してくれるのがFluidityになります。しかもたった115 bytesで。

Fluidityのスクリーンショット

例えば画像。
例えば画像。

幅を縮めた場合。確かにレスポンシブですね。
幅を縮めた場合。確かにレスポンシブですね。

テーブル。
テーブル。

こちらも問題ないようです。
こちらも問題ないようです。

コードの場合。
コードの場合。

中がスクロールしてしまいます。ちょっと残念かな…。
中がスクロールしてしまいます。ちょっと残念かな…。

Canvasタグ。
Canvasタグ。

iframe。こちらもちゃんとレスポンシブです。
iframe。こちらもちゃんとレスポンシブです。

Fluidityの使い方

使い方は簡単でスタイルシートを読み込めば良いだけです。

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

115 bytesな訳で特別なことはしていないのですが、以下のように記述されています。

/* FLUIDITY v0.1.0 @mrmrs - http://mrmrs.cc MIT
*/
/*
 Responsive Utilities

*/
img, canvas, iframe, video, svg { max-width: 100%; }

/* Wrap tables or pre elements in a div with this class */
.overflow-container { overflow-y: scroll; -webkit-overflow-scrolling: touch; }

実にシンプル…。幅の設定とテーブルタグのオーバフロー指定くらいです。これだけでもそれなりの表示にできる訳で、コーディングを複雑なものにしない限りは素のHTMLでほぼ十分なのですね。モバイルファーストなデザイン指向であれば特にそうかも知れません。

Fluidityはスタイルシート製、MIT Licenseのオープンソース・ソフトウェアです。

Fluidity

mrmrs/fluidity

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2