HTML&CSS

比率を保ったままレスポンシブ対応する

今回は、画像やブロックなどの比率を保ったままレスポンシブ対応を行う方法を解説致します。

ブロック要素のアスペクト比を揃える

まずは、下の青いボックス、幅800px、高さが400pxで指定しています。

アスペクト比を保ったまま、レスポンシブにするとはどういうことかをまず説明します。
現在、横幅が800pxの高さは400pxです。つまり比率は「2：1」になります。
たとえ幅が変わってもこの比率が変わらないようにします。

つまり幅が400px の時は高さ200px 、幅が200pxの時は高さ1０0pxになるようにします。
その方法を２つ記載致します。

比率 ２：１

「padding-top」で指定する

まずは下記のボックスを検証ツールなどで画面幅を変えてご確認ください。
比率を保ったままサイズが変動しているのが分かると思います。

こちらのボックスはpadding-topで指定しています。
CSSの勉強を始めた方は、なんでここでpaddingが出てくるんだよ！！

と思われるかもしれません。
ですが、これは先人のコーダーたちが考えたテクニックなのです。

比率 ２：１ 

<p class="color_box">
  比率 ２：１
</p>
/* 親要素 */
.color_box　{

  /* 横幅を指定（100%等で指定しても構いませんが、今回は分かりやすく800px） */
  width:800px;

  /* ボックスのスタイルの記述（比率には関係ない） */
  background-color: aqua;
  display:flex;
  align-items: center;
　justify-content: center;
  font-size:20px;
  font-weight: bold;
}

//before要素でpadding-topを指定
.color_box::before {
  content:"";
  display:block;
  padding-top:50%;
}

paddingに%を指定すると横幅に応じた値が設定されます。
上記のボックスの例でいうと、

【比率計算公式】
800px(幅) ： 400px(高さ)＝比率 2：1
400px ÷ 800px = 0.5（ 50%）　もしくは
1 ÷ 2 = 0.5 （50%）

つまり高さは「padding-top:50%」ということになります。
これを直接ボックスに指定してもうまくいきませんので、before等の疑似要素に指定しましょう。

今回は比率2:1 でわかりやすかったですが、1：1 でも,３：１など他の比率でも可能ですし、たとえ中途半端な値でも、「高さ　÷　幅」で「padding」に指定する値が計算できますので、ぜひお試しください。

aspect-ratio　プロパティで比率を固定する

もう一つは　「aspect-ratio」プロパティを使用する方法です。
長々とpadding-topを使用する方法を記載しましたが、おすすめはこちらになります。

これまではあまり使われていないプロパティでしたが、今後はこちらが主流になると思われます。
なぜかといいますと、「aspect-ratio」プロパティはインターネットエクスプローラー（IE）で使用できなかったためです。
ですが、IEは2022年６月よりサポートが終了し、Edgeに移行しています。

それによって「aspect-ratio」などの新しいプロパティを使用できるようになりました。

aspect-ratio: 2 / 1;

CSSは下記の通りになります。

.color_box　{

  /* 横幅を指定（100%等で指定しても構いませんが、今回は分かりやすく800px） */
  width:800px;

  /* アスペクト比を指定 */
  aspect-ratio: 2 / 1;

  /* ボックスのスタイルの記述（比率には関係ない） */
  background-color: aqua;
  display:flex;
  align-items: center;
　justify-content: center;
  font-size:20px;
  font-weight: bold;
　max-width: 100%;
}

こちらのプロパティはそのままアスペクト比を指定できるという便利なプロパティです。
指定は　幅　/ 高さ　の順に指定します。
aspect-ratio: 2（幅） / 1（高さ）

これでアスペクト比を指定できます！　
padding-topを使用する方法と違って凄く簡単ですね。
IEがなくなったおかげでコーディングも楽になりました。

アスペクト比の計算方法がわからない方

「aspect-ratio」プロパティが簡単なのはわかったけど、そもそもアスペクト比の計算が分からない！！
っていう方いらっしゃると思います。
実際のコーディングでは、横幅も高さも300pxみたいにぴったりな数値であることのほうが少ないと思います。

そんなときは、下記のようなアスペクト比を計算してくれるツールを使用しましょう。

■アスペクト比計算ツール
https://aspect.arc-one.jp/

横幅と高さを指定して「計算する」ボタンを押すだけで、アスペクト比を計算して表示してくれます。
ぜひ、ブックマークに登録しましょう。

-HTML&CSS
-, ,