アスペクト比計算ツールとは？

幅と高さからアスペクト比を求めたり、比率を保ったまま寸法を計算したりできるツールです。画像や動画の縦横比の確認、サムネイルやSNS投稿画像のサイズ調整に使えます。入力した値はその場で計算され、比率は簡約した形と小数比の両方で表示されます。

CSSのaspect-ratioやTailwindのクラスもコピーできます。

使い方

1. 幅と高さを入力します。
2. 比率を保ったまま寸法を変えたいときは、「比率を固定」をオンにします。
3. よく使う比率はプリセットから選びます。任意の比率は「カスタム」で入力します。
4. 必要に応じて、CSSまたはTailwindのコードをコピーします。

コード

CSSのaspect-ratioとTailwindのクラスを切り替えて表示できます。表示中のコードはコピーして、そのまま実装に貼り付けられます。

主な設定項目

比率を固定

オンのとき、片方の寸法を変えると、もう片方が現在の比率で計算されます。オフのときは、幅と高さから比率を計算します。初期状態はオフです。

比率プリセット

よく使う比率をプリセットから選べます。選ぶと、現在の寸法の大きい方を基準に比率が適用されます。横長の寸法から縦長のプリセットを選ぶと、長辺を保ったまま縦横が入れ替わります。

カスタム比率

プリセットにない比率は、幅と高さの比率を整数で入力します。16と9のように指定すると、16:9として扱われます。比率の項を変えると、現在の寸法の大きい方を基準に寸法が更新されます。

縦横を入れ替え

幅と高さを入れ替えます。比率を固定しているときは、比率の向きも入れ替わります。

活用シーン

• 画像や動画の素材が16:9や4:3になっているか確認したいとき
• SNS投稿やサムネイル用に、比率を保ったまま幅または高さを決めたいとき
• デザイン案の比率を、実装で使うCSSやTailwindの値に変換したいとき
• 動画の縦横を入れ替えて、縦型のサイズを確認したいとき

使うときの注意点

• 寸法は1〜100000の整数で扱います
• 比率を固定して寸法を変えると、計算結果は整数に丸められるため、比率がわずかにずれることがあります