縦横比が固定されたレスポンシブ枠を作成する - CSS
縦横比(アスペクト比)が固定されたレスポンシブ枠を作成するCSS, HTMLのコードを紹介します。
概要
レスポンシブに対応したページで、枠の大きさをあらかじめ決定したい場合があります。高さを固定する場合はwidthプロパティ等に高さを設定すればよいですが、
枠の幅に応じた比率で高さを設定したい場合にはwithプロパティに値を代入しても、ウィンドウ幅の変化に伴い高さが変化するため、希望した動作にはなりません。
この記事では、レスポンシブ枠で縦横比が一定で表示される枠を表示するコードを紹介します。
方針
CSSの
aspect-ratioプロパティを利用します。
書式
横幅を指定すると、aspect-ratioで指定した、横:縦の比率を維持します。
プログラム
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="FixAspectFrame.css" />
</head>
<body>
<h2>アスペクト比が固定されたレスポンシブ枠のデモ</h2>
<div class="AspectFixedFrame">
<p>枠です。ペンギンは南極だけに生息しているわけではない。ぺんぺん！</p>
</div>
<p>コンテンツです。ABCDEFG</p>
</body>
</html>
.AspectFixedFrame {
margin:2rem auto 2rem auto;
width: 60%;
aspect-ratio: 4/1;
background-color: #b8e0db;
text-align:left;
}
解説
AspectFixedFrameクラスが縦横比を固定した枠になります。
aspect-ratio: 4/1; を記述しており、
横:縦 = 4:1 の比率を維持します。
widthプロパティで60%を指定しており、ページの幅の60%の幅で表示します。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
水色の枠がページの中央に表示されます。横:縦の比率は、4:1 で表示されています。
Webブラウザのウィンドウ幅を狭めます。枠の横幅は60%で指定していますので枠の幅が狭くなります。同時に高さも小さくなり、
横:縦の比率は、4:1 の状態から変わらず、縮小表示になります。~
さらにウィンドウを狭めても、縦横比は変化せずに枠の大きさが小さくなります。
縦横比が固定されたレスポンシブな枠を作成できました。
方針:古いWebブラウザの場合
aspect-ratioに対応していない古いWebブラウザの場合の対応方法です。
height プロパティに設定できると良さそうですが、幅の値を%指定でheightプロパティに設定できないため、うまく設定できません。
vwの単位を利用してheightを設定する方法もありますが、マージン等の計算を事前にする必要があります。
別の方法として、before疑似クラスを利用して、
padding-topを指定して、本来の枠の手前にpaddingの領域を表示することで、
枠の幅に応じて高さを変更できる枠を表示できます。padding-top プロパティに%単位で記述した場合、枠の幅の%の扱いになります。
プログラム
コード
以下のHTML、CSSを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="SingleFixAspectFrame.css" />
</head>
<body>
<div class="PageFrame">
<p>アスペクト比が固定されたレスポンシブ枠のテストです。</p>
<div class="AspectFixedFrame">
<p class="AspectFixedFrameContents">
レスポンシブな枠です。<br />
ABCDE<br />
FGHIJ<br />
てすとてすとてすと。
</p>
</div>
<p>てすとてすと、あいうえお、かきくけこ</p>
</div>
</body>
</html>
body {
text-align:center;
}
.PageFrame {
margin-left: 4rem;
margin-right: 4rem;
}
.AspectFixedFrame {
width: 100%;
background-color: #C0C0C0;
font-size: 0.5rem;
position: relative;
}
.AspectFixedFrame:before {
content: "";
display: block;
padding-top: 25%;
}
.AspectFixedFrameContents {
font-size: 0.5rem;
position: absolute;
top: 0;
left: 0;
}
解説
下記の
AspectFixedFrameクラスがアスペクト比が固定の枠になります。
<div class="AspectFixedFrame">
AspectFixedFrameクラスでは
position: relative を指定しています。これは内部のコンテンツを
position:absolute で位置指定するため、AspectFixedFrameクラスの要素の相対座標で表示位置を設定できるようにするためです。表示座標に関する動作は
こちらの記事も参照してください。
.AspectFixedFrame {
width: 100%;
background-color: #C0C0C0;
font-size: 0.5rem;
position: relative;
}
AspectFixedFrameクラスにbefore疑似クラスを記述し、AspectFixedFrameクラスの枠の手前に要素を表示します。
display: blockを指定しブロック要素として表示します。contentに値を設定しないと要素が何も表示されないため、
content:"" を記述します。
padding-top: 25% がpaddingの高さになります。25%を指定すると、枠の幅の25%がpaddingの高さとして表示されます。
.AspectFixedFrame:before {
content: "";
display: block;
padding-top: 25%;
}
枠の内部に表示するコンテンツのクラスです。before疑似クラスが指定されるため、本来の枠の上部に領域が描画されるため、
position:absoluteを指定して親要素の左上の位置(top:0, left:0)に描画開始位置を設定します。
.AspectFixedFrameContents {
font-size: 0.5rem;
position: absolute;
top: 0;
left: 0;
}
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
灰色のAspectFixedFrameの枠の高さが、枠の幅の25%(4分の1)で表示されていることが確認できます。
ウィンドウの幅を狭めます。ウィンドウの幅に応じてAspectFixedFrameの枠の幅も狭くなり、合わせて枠の高さも狭くなります。
枠の高さは枠の幅の25%のまま表示されていることが確認できます。
ウィンドウ枠の幅を広げます。AspectFixedFrameの枠の幅も広がり、枠の高さは枠の幅の25%の高さで表示されていることが確認できます。
アスペクト比が固定されたレスポンシブな枠を作成できました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
掲載日: 2021-01-11
改訂日: 2024-08-19
