`aspect-ratio`プロパティとレスポンシブデザイン
この記事ではaspect-ratioプロパティとレスポンシブデザインについて説明します。
aspect-ratioプロパティを使ったレスポンシブデザインのテクニックを紹介します。
YouTube Video
プレビュー用のHTML
css-responsive-aspect-ratio.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-aspect-ratio.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>aspect-ratio</h2>
20 </header>
21 <article>
22 <h3>aspect-ratio Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26aspect-ratio: <ratio>;
27</pre>
28 </section>
29 </article>
30 <article>
31 <h3>aspect-ratio 1:1</h3>
32 <section>
33 <header><h4>CSS</h4></header>
34<pre class="sample">
35.square {
36 width: 200px;
37 aspect-ratio: 1 / 1;
38}
39</pre>
40 </section>
41 <header><h4>HTML+CSS</h4></header>
42 <section class="sample-view">
43 <img src="example.jpg" class="square">
44 </section>
45 </article>
46 <article>
47 <h3>aspect-ratio 16:9</h3>
48 <section>
49 <header><h4>CSS</h4></header>
50<pre class="sample">
51.widescreen {
52 width: 100%;
53 aspect-ratio: 16 / 9;
54}
55</pre>
56 </section>
57 <section class="sample-view">
58 <img src="example.jpg" class="widescreen">
59 </section>
60 </article>
61 <article>
62 <h3>aspect-ratio 2</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66.custom-ratio {
67 width: 400px;
68 aspect-ratio: 2;
69}
70</pre>
71 </section>
72 <section class="sample-view">
73 <img src="example.jpg" class="custom-ratio">
74 </section>
75 </article>
76 <article>
77 <h3>aspect-ratio Example</h3>
78 <section>
79 <header><h4>HTML</h4></header>
80<pre>
81<div class="video-container">
82 <iframe src="https://www.youtube.com/embed/example"></iframe>
83</div>
84</pre>
85 <header><h4>CSS</h4></header>
86<pre class="sample">
87.video-container {
88 width: 100%;
89 aspect-ratio: 16 / 9;
90}
91</pre>
92 </section>
93 </article>
94 </main>
95</body>
96</html>aspect-ratioプロパティ
aspect-ratio プロパティは、要素の横幅と高さの比率（アスペクト比）を設定するために使用されます。これは、特に画像や動画などのメディアコンテンツ、またはレスポンシブデザインにおいて、一定の比率で要素を表示したい場合に便利です。
基本構文
1aspect-ratio: <ratio>;<ratio>は、幅と高さの比率を指定します。比率は「横:縦」の形式で書くか、1つの数字で横縦比を表します。
例
1:1 のアスペクト比 (正方形)
1:1のアスペクト比の場合には、このようになります。
1.square {
2 width: 200px;
3 aspect-ratio: 1 / 1;
4}- この場合、
.squareクラスを持つ要素は常に幅と高さが同じになるよう設定され、正方形として表示されます。
16:9 のアスペクト比 (横長のビデオや画像)
横長のビデオや画像など16:9のアスペクト比の場合には、このようになります。
1.widescreen {
2 width: 100%;
3 aspect-ratio: 16 / 9;
4}- この場合、
.widescreenクラスを持つ要素は、16:9 のアスペクト比を保ちながら幅に応じて高さが自動調整されます。
比率を 1 つの数字で指定
比率を1つの数字で指定する場合には、このようになります。
1.custom-ratio {
2 width: 400px;
3 aspect-ratio: 2;
4}- ここでは、
2という数字が2 / 1の比率を表し、要素の幅が高さの2倍になります。
aspect-ratio プロパティの利点
- レスポンシブデザイン 異なるデバイスやウィンドウサイズに対して、要素のアスペクト比を維持しながらサイズを自動的に調整できます。
- 簡単な実装
特定の比率を維持するために、従来は
padding技法などを使用していましたが、aspect-ratioを使うとシンプルに設定できます。
実際の使用例
例えば、YouTubeなどのビデオプレーヤーは 16:9 のアスペクト比で表示されることが一般的です。この比率を保持するために、aspect-ratio プロパティを使うと簡単にレスポンシブなビデオコンテナを作成できます。
1<div class="video-container">
2 <iframe src="https://www.youtube.com/embed/example"></iframe>
3</div>1.video-container {
2 width: 100%;
3 aspect-ratio: 16 / 9;
4}- これにより、ビデオがどんなデバイスでも16:9の比率を維持して表示されます。
まとめ
aspect-ratioは、要素の横幅と高さの比率を指定するプロパティです。- 比率を指定することで、レスポンシブなデザインが簡単に実装できます。
- 画像、ビデオ、カードレイアウトなど、特定のアスペクト比を維持する必要がある要素に非常に便利です。
従来の複雑な CSS 技法と比べ、aspect-ratio は簡潔で直感的に使える点が特徴です。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。