---
title: "アスペクト比計算 - 寸法から比率、比率から寸法"
description: "幅と高さからアスペクト比を計算し、比率を保ったまま寸法を求められるツールです。16:9や4:3などのプリセット、CSSのaspect-ratioとTailwindクラスのコピーに対応し、画像や動画のサイズ確認やレイアウト調整に使えます。"
canonical_url: "https://web-toolbox.dev/tools/aspect-ratio-calculator"
meta:
  author: K
  "og:description": "幅と高さからアスペクト比を計算し、比率を保ったまま寸法を求められるツールです。16:9や4:3などのプリセット、CSSのaspect-ratioとTailwindクラスのコピーに対応し、画像や動画のサイズ確認やレイアウト調整に使えます。"
  "og:image": "https://web-toolbox.dev/og/ja/tools/aspect-ratio-calculator-a690cf0f.png"
  "og:image:alt": アスペクト比計算
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "アスペクト比計算 - 寸法から比率、比率から寸法"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **アスペクト比計算**

寸法と比率を相互に計算

## **比率**

**16:9**

<dl>

<dt>小数比</dt>
<dd>**1.78:1**</dd>

<dt>向き</dt>
<dd>**横長**</dd>

</dl>

## **コード**

コードの形式

```
aspect-ratio: 16 / 9;
```

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

幅と高さからアスペクト比を求めたり、比率を保ったまま寸法を計算したりできるツールです。画像や動画の縦横比の確認、サムネイルや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の整数で扱います
- 比率を固定して寸法を変えると、計算結果は整数に丸められるため、比率がわずかにずれることがあります

**使ってみてどうでしたか？**

最終更新: 2026年10月21日

### **関連ツール**

- [<h4>**黄金比計算**</h4>](https://web-toolbox.dev/tools/golden-ratio-calculator)
- [<h4>**ネストBorder-Radius最適化**</h4>](https://web-toolbox.dev/tools/nested-border-radius-calculator)
- [<h4>**パーセンテージ・PX計算**</h4>](https://web-toolbox.dev/tools/percentage-px-calculator)
- [<h4>**PX・Rem計算**</h4>](https://web-toolbox.dev/tools/px-rem-calculator)
- [<h4>**営業日カレンダー**</h4>](https://web-toolbox.dev/tools/business-calendar)
- [<h4>**文字数カウンター**</h4>](https://web-toolbox.dev/tools/character-counter)
- [<h4>**カラーコントラストチェッカー**</h4>](https://web-toolbox.dev/tools/color-contrast-checker)
- [<h4>**エポック秒コンバーター**</h4>](https://web-toolbox.dev/tools/epoch-converter)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/aspect-ratio-calculator#webpage","@type":"WebPage","description":"幅と高さからアスペクト比を計算し、比率を保ったまま寸法を求められるツールです。16:9や4:3などのプリセット、CSSのaspect-ratioとTailwindクラスのコピーに対応し、画像や動画のサイズ確認やレイアウト調整に使えます。","name":"アスペクト比計算 - 寸法から比率、比率から寸法","url":"https://web-toolbox.dev/tools/aspect-ratio-calculator","breadcrumb":{"@id":"https://web-toolbox.dev/tools/aspect-ratio-calculator#breadcrumb"},"isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/aspect-ratio-calculator"]}]},{"@id":"https://web-toolbox.dev/tools/aspect-ratio-calculator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"幅と高さからアスペクト比を計算し、比率を保ったまま寸法を求められるツールです。16:9や4:3などのプリセット、CSSのaspect-ratioとTailwindクラスのコピーに対応し、画像や動画のサイズ確認やレイアウト調整に使えます。","name":"アスペクト比計算 - 寸法から比率、比率から寸法","operatingSystem":"Windows, macOS, Linux, Android, iOS"},{"@id":"https://web-toolbox.dev/tools/aspect-ratio-calculator#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"ホーム","item":"https://web-toolbox.dev/","position":1},{"@type":"ListItem","name":"計算","item":"https://web-toolbox.dev/categories/calculation","position":2},{"@type":"ListItem","name":"アスペクト比計算","item":"https://web-toolbox.dev/tools/aspect-ratio-calculator","position":3}]}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.