FIRST CH TOOLS LOCAL PROCESSING — サーバー送信なし EN

FIRST CH TOOLS / 27 アスペクト比計算

アスペクト比計算＆レスポンシブサイズ算出

16:9 や 4:3 を選んで幅を入れると高さが、高さを入れると幅がその場で決まります。幅と高さから比率を割り出すこともでき、aspect-ratio: 16 / 9; のCSSスニペットとブレークポイントごとの高さ早見表をそのままコピーできます。

比率を選んで、幅か高さを入れると残りが決まります

よく使う比率
幅
px
高さ
px
よく使う幅
1280
幅（px）
720
高さ（px）
16:9
比率（約分）
1.7778
小数にすると
CSSに貼る形

    
    
  
    

  
    計算はこのページの中だけで行われ、入力がブラウザの外へ出ることはありません。URLパラメータで直接呼び出せます: /aspect-ratio/?ratio=16:9&w=1280 ／ /aspect-ratio/?w=1920&h=1080
    
  
    

  

  

  

  
    
    
    How to Use
    
    
      
      
    1. 比率を選ぶ16:9 や 9:16 のボタンを押すか、左右の欄に直接入力します。1.85 のような小数でも構いません（37:20 に約分されます）。
      2. 
      
    2. 幅か高さを入れる片方を入れるともう片方が即座に決まります。動画に使うなら丸め方を「偶数へ丸める」にしてください。
      3. 
      
    3. CSSごとコピーする「CSS」タブで aspect-ratio のスニペットとHTMLを、「早見表」タブでブレークポイントごとの高さをまとめて書き出せます。
      4. 
    
    
  
    

  
    
    
    About This Tool
    
    
    アスペクト比は幅と高さの比です。16:9 は「幅が16のとき高さが9」という意味なので、高さは 幅 × 9 ÷ 16 で求まります。幅1280pxなら 1280 × 9 ÷ 16 = 720px。逆に幅と高さが分かっているときは、最大公約数で両方を割ると比率になります。
    
    
    CSSでは aspect-ratio を使えば高さを書かずに比率を保てます。2021年以降のブラウザで使えるプロパティで、aspect-ratio: 16 / 9; と書けば幅がいくつになっても高さが自動で決まります。それ以前は padding-top: 56.25% の比率ハック（パーセントの余白が親要素の幅を基準にする性質を使う）が定番でした。
    
    
    
      
    画像には width と height 属性を書く
    
      
    CSSで width: 100%; height: auto; にしていても、HTMLの width / height 属性は書いてください。ブラウザは属性値から比率を計算して、画像が届く前に場所を確保します。属性が無いと画像の読み込み完了時に高さが増え、下のテキストが押し下げられます（Core Web Vitals の CLS が悪化します）。属性に書くのは実寸で構いません。表示サイズはCSSが決めます。
    
    
    
    
    
      
    動画の幅と高さは偶数にする
    
      
    H.264 / H.265 は色の情報を縦横それぞれ半分の解像度で持ちます（YUV 4:2:0）。このため幅や高さが奇数だと色の画素が割り切れず、エンコーダがエラーを出すか黙って1px分を引き伸ばします。16:9 で幅1366pxのように「切りの良い幅」から高さを出すと 768.375 → 768 のように端数が出るので、動画向けには「偶数へ丸める」を選んでください。
    
    
    
    
    
      
    21:9のモニタは21:9ではない
    
      
    ウルトラワイドとして売られている 2560×1080 は約分すると 64:27（2.370）、3440×1440 は 43:18（2.389）です。21:9 は 2.333 なので、CSSに 21:9 と書くと実機では端に1px前後の隙間や切れが出ます。製品名の比率と実際の比率は一致しないことがあるので、迷ったら実際の解像度を「比率とはめ込み」タブに入れて確かめてください。
    
    
    
    
    
      
    cover は切り、contain は余白を出す
    
      
    比率の違う枠に画像を入れるときは object-fit: cover か contain を選びます。cover は枠を埋めてはみ出した部分を切り落とし、contain は全体を見せる代わりに上下か左右に余白（レターボックス・ピラーボックス）を作ります。「比率とはめ込み」タブで、実際に何px切れるのか・何pxの余白が出るのかを先に確かめられます。人物の顔が切れる位置を避けたいときは object-position で寄せます。
    
    
    
    
    
      
    SNSの推奨サイズは比率で覚える
    
      
    OGP画像の 1200×630 は 40:21（約1.91:1）、Instagramの縦は 1080×1350 で 4:5、ストーリーやReels・TikTokは 9:16 です。推奨ピクセル数は各社が変えますが、比率はほとんど変わりません。比率で覚えておけば、解像度だけ上げた版を作るのも「比率とはめ込み」で切れ方を確かめるのも簡単になります。
    
    
    
    
    
      
    小数の比率は約分できる
    
      
    映画のビスタサイズ 1.85:1 は 37:20、シネマスコープの 2.39:1 は 239:100 です。このツールは入力した桁数ぶんを10倍して整数にしてから約分するので、小数で入れても整数の比が出ます。aspect-ratio は aspect-ratio: 1.85; のように小数1つでも書けますが、2つの整数で書いた方が意図が伝わります。
    
    
    
  
    

  
    
    
    From AI Agents
    
    
    この計算ロジックは、MCP（Model Context Protocol）サーバー @first-ch/tools-mcp の aspect_ratio_calc ツールとしても提供しており、ブラウザを使わずAIエージェントから直接呼び出せます。導入方法の詳細は AIエージェントからの使い方 を参照してください。
    
    
    導入
    
    
    claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp
    
    
    呼び出し例
    
    
    # 16:9 で幅1280のときの高さ
aspect_ratio_calc(ratio="16:9", width=1280)

# 1920×1080 の比率を調べる（約分・近い定番比率・向き）
aspect_ratio_calc(width=1920, height=1080)

# ブレークポイントごとの高さ早見表とCSS
aspect_ratio_calc(ratio="16:9", widths=[320, 768, 1280, 1920], snippet=true)

# 1920×1080 を 1280×400 の枠に cover ではめ込むと何px切れるか
aspect_ratio_calc(width=1920, height=1080, box="1280x400", fit="cover")
    
  
    

  
    
    
    Other Tools