以前の記事で、padding-topの性質を利用して、要素のアスペクト比を固定しつつレスポンシブ化する方法を紹介しました。
しかしこの方法だと、比率を計算して%で表記する必要があり、パッと見ではわかりにくいですね。
padding-top: 75%; /* 4:3にしたい場合 */
padding-top: 56.25%; /* 16:9にしたい場合 */そこで今回の記事では、縦横比を手軽に指定できるaspect-ratioプロパティを紹介します！
IE以外のモダンブラウザには全て対応しており、また比率の計算も必要ないので、覚えておくと便利かと思います。
- aspect-ratioプロパティの記述方法
- aspect-ratioプロパティの使用DEMO
- aspect-ratioプロパティのブラウザ対応状況
上記について解説していきますので、ぜひ参考にしてください。
aspect-ratioプロパティの記述方法
aspect-ratioプロパティは、以下の2通りの方法で記述することができます。
記述方法①：aspect-ratio: width / height
まず1つ目は、aspect-ratioの値にwidthの比率・heightの比率を記述する方法です。
aspect-ratio: width / height;実際に使用するには、以下のように記述します。
aspect-ratio: 1 / 1; /* 横1:縦1 */
aspect-ratio: 4 / 3; /* 横4:縦3 */
aspect-ratio: 16 / 9; /* 横16:縦9 */縦横の比率をそのまま書けるので、padding-topを使用した方法よりもわかりやすいですね。
記述方法②：aspect-ratio: width
2つ目は、widthの比率のみを記述する方法です。
aspect-ratio: width;この場合、heightの比率は自動的に1となります。
aspect-ratio: 1; /* 横1:縦1 */
aspect-ratio: 2; /* 横2:縦1 */
aspect-ratio: 0.5; /* 横0.5:縦1 */以上でaspect-ratioの記述方法の解説は終わりです！
次で実際のDEMOを見ながら挙動を確認していきましょう。
aspect-ratioプロパティを使用したDEMO
ここでは実際にaspect-ratioを使用してどのような見た目になるのかを確認していきます。
- ブロックレベル要素
- YouTube動画埋め込み(iframe)
- Google Map埋め込み(iframe)
3通りの例を用意しましたので、それぞれ見ていきましょう。
ご利用中のブラウザでaspect-ratioが対応されていない場合は、以下のDEMOの表示が崩れますのでご注意ください。
aspect-ratioの使用例①：ブロックレベル要素
まずは一番シンプルな例から紹介していきます。
ブロックレベル要素であるdivタグを、さまざまな比率で表示してみます。
縦横の比率が1：1
.box {
width: 100%; /* 任意の横幅を指定 */
aspect-ratio: 1 / 1; /* アスペクト比を指定 */
/* 以下レイアウト調整 */
display: flex;
align-items: center;
justify-content: center;
background-color: #ccc;
}縦横の比率が4：3
.box {
width: 100%; /* 任意の横幅を指定 */
aspect-ratio: 4 / 3; /* アスペクト比を指定 */
/* 以下レイアウト調整 */
display: flex;
align-items: center;
justify-content: center;
background-color: #ccc;
}縦横の比率が16：9
.box {
width: 100%; /* 任意の横幅を指定 */
aspect-ratio: 16 / 9; /* アスペクト比を指定 */
/* 以下レイアウト調整 */
display: flex;
align-items: center;
justify-content: center;
background-color: #ccc;
}以上、ブロックレベル要素のdivタグを使って、さまざまな比率で表示してみました。
画面幅を拡大・縮小してチェックしてみてください。
どの幅でも比率を保ったままレスポンシブ化されているのが確認できるかと思います。
aspect-ratioの使用例②：YouTube動画埋め込み
続いては、YouTube動画のアスペクト比を固定したままレスポンシブで表示する方法を見ていきます。
<div class="box">
<iframe width="560" height="315" src="https://www.youtube.com/embed/f02mOEt11OQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>.box {
position: relative;
width: 100%; /* 任意の横幅を指定 */
aspect-ratio: 16 / 9; /* アスペクト比を指定(YouTubeは16:9が一般的) */
}
.box iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}上記のコードで、以下のようにYouTube動画のiframeをレスポンシブ化することができます！
YouTube動画は、そのまま埋め込むと固定幅になってしまいますね。
なのでwidthを100%にしてaspect-ratioに16 / 9を指定することで、ブラウザ幅が変わっても比率を保ったままサイズが可変するようになります。
YouTube動画の埋め込み方法は以下の記事で紹介しましたので、そちらも合わせて読んでみてください。
aspect-ratioの使用例③：Google Map埋め込み
最後に、Google Mapを埋め込んでaspect-ratioで比率を固定する例を見ていきましょう。
<div class="box">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.827853402566!2d139.76493075176884!3d35.68124053747972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1637993729843!5m2!1sja!2sjp" width="600" height="450" style="border: 0" allowfullscreen="" loading="lazy"></iframe>
</div>.box {
position: relative;
width: 100%; /* 任意の横幅を指定 */
aspect-ratio: 4 / 3; /* アスペクト比を指定 */
}
.box iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}上記のコードで、Google Mapをレスポンシブで埋め込むことができます。
YouTubeを埋め込む場合とほぼ同じですね。
ここでは縦横の比率を4 / 3にしましたが、自由にカスタマイズしてOKです。
Google Mapの埋め込み方法についても別記事で詳しく紹介していますので、そちらもご覧ください。
aspect-ratioプロパティのブラウザ対応状況
これまでaspect-ratioの記述方法や実装DEMOを見てきましたが、比較的新しめのプロパティなのでブラウザ対応状況が気になりますよね。
なので、ここではブラウザ対応状況を確認してみます。
添付画像を見ていただくとわかると思いますが、IE以外のほぼ全てのモダンブラウザでは対応済みです。
ただし古いバージョンでは対応されていないことも多いので、注意が必要ですね。
特にSafariとiOSのSafariでは、2021年9月20日にリリースされたOS 15より古いバージョンは未対応なので、まだ最新版にアップデートしていない方も多いのではないかと思います。（2021/11/27時点）
もし確実に多くのブラウザ・バージョンで対応されている方法を使用したいなら、padding-topで比率を固定する方法をお勧めします。
【まとめ】aspect-ratioプロパティでアスペクト比を固定する方法
CSSプロパティaspect-ratioの使用方法と実装DEMO、ブラウザ対応状況について解説しました。
アスペクト比を簡潔に記述できるので、すごく便利なプロパティですね。
ほぼ全てのブラウザで対応されているので、ぜひ使ってみてください。
コメント