サイト運営をされているみなさま、レスポンシブ対応は思った通りにできていますか？
スマホで見たとき、PCで見たとき、画面幅が違うので各コンテンツはそれぞれに合ったサイズを指定する必要があります。
たとえばGoogle Map等を埋め込むときに、PCだと横長の地図、スマホだと縦長の地図になりませんか？
結論を言うとこちらは全く問題はありません。
しかし、小さいスマホで縦長の地図を見たとき、地図以外をスクロールしたくても画面いっぱい地図が表示されてしまうと、思った通りの操作ができず、ユーザビリティが下がってしまうこともあり得ます。
そうしたユーザビリティを考えたとき、またはデザイン的に「PCから見てもスマホから見ても統一したい」というときに使える、CSSでアスペクト比を固定する方法があります。
CSSでアスペクト比を固定する
アスペクト比の固定は以下のコードで行います。
.クラス名 {
width: 100%;
padding-top: ●●%;
}横幅を100%に指定して、それに対して縦をサイズではなく比率で指定する方法です。
「padding-top」としていますが、「padding-bottom」でも構いません。
上記コードの「●●」で入れる数値によって、指定したクラスの要素のアスペクト比が決まります。
数値については、以下の計算で算出します。
「（縦幅の比率）÷（横幅の比率）×100=●●」
計算が面倒くさい方に、よく使う比率の場合を記しておきます。
アスペクト比16:9で固定
.クラス名 {
width: 100%;
padding-top: 56.25%;
}動画などで統一されている比率、16:9で固定したい場合は上記コードで指定します。
よく使われるアスペクト比ですね。
アスペクト比4:3で固定
.クラス名 {
width: 100%;
padding-top: 75%;
}こちらもよく使われる横長のアスペクト比です。
覚えておくと便利です。
アスペクト比1:1で固定
.クラス名 {
width: 100%;
padding-top: 50%;
}正方形のアスペクト比です。
あまりPCのメインコンテンツで使う機会は少ないかもしれませんが、横並びデザインにしたりサイドバー などでも使えますね。
まとめ
PCとスマホのデザインを合わせたいときに必須のアスペクト比固定。
コードに少し加えるだけで、簡単に固定することができるんです。
数値を変えるだけで比率も変えられるので、手軽にデザイン変更も可能。
ぜひ使ってみてくださいね。