[CSS]これなら簡単!レスポンシブ対応、アスペクト比を維持したまま画像や要素を実装する -RatioBuddy

デスクトップやスマホなど、異なるスクリーンのサイズでも、黄金比や白銀比などのアスペクト比を維持したまま画像や要素を実装するスタイルシートを生成する便利なオンラインツールを紹介します。

このかわいいデザインに、癒やされますw

サイトのキャプチャ

RatioBuddy
by Damn Fine

ツールの使い方は、簡単です。
デフォルトは、1:1のアスペクト比で実装されています。

サイトのキャプチャ

アスペクト比に、デザインでよく使われる「黄金比」を指定してみます。
参考: 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ

サイトのキャプチャ

黄金比を適用
小数点は指定できないので、16:10で。

アスペクト比は、ロックすることができます。
アスペクト比の数値は、整数の公約数で表示されるようです。

サイトのキャプチャ

アスペクト比のロック

ちょっと変えるだけで、顔が変化するのも、楽しいですw

サイトのキャプチャ

アスペクト比をロックし、サイズを変更すると、比率を維持した値が反映されます。

サイトのキャプチャ

アスペクト比の計算

黄金比を維持したスタイルシートは、下記のように生成されます。

top of page

©2017 coliss