Fluidity – たった115 bytesでHTMLのレスポンシブ対応率を高める
レスポンシブWebデザインを考え始めるとメディアクエリーや細かな表示の制御など考えるべきところがたくさんあって、厄介な印象が強くなる訳ですが、もっとシンプルに考えて良いんじゃないと訴えかけてくるのがFluidityになります。 HTMLは元々素の状態でも“ほぼ”100%レスポンシブであると言います。そしてそのほぼから外れた部分を補正してくれるのがFluidityになります。しかもたった115 bytesで。
Fluidityのスクリーンショット
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のオープンソース・ソフトウェアです。