【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法

レスポンシブ対応をする際に、「ブロック要素の比率を保持したままサイズを可変させたい」という場合がよくありますよね。

img要素だと以下のように指定するだけで、画面幅に合わせて画像の比率を保持したまま拡大・縮小することができます。

img {
  width: 100%;
  height: auto;
}

しかしdivなどのブロック要素だとどうなるでしょうか。height: autoと指定しても、要素の持つ高さがそのまま指定されるため、比率を保持することはできませんね。

そこで今回の記事では、CSSのpaddingをうまく利用してブロック要素の比率を固定したままリサイズする方法を紹介します！

このテクニックはよくYouTube動画の埋め込みやサムネイル画像などに利用されますね。

DEMOやコピペで使える実装コードも用意していますので、ぜひ参考にしてみてください。

【DEMO】padding-topで要素の比率を指定するDEMO

以下に数パターンのDEMOを用意しました。

ウィンドウの幅を拡大・縮小してみてください。

一定の比率を保ったまま要素のサイズが可変するのが確認できるかと思います。

1:1

4:3

3:2

16:9

2:3

1:2

ウィンドウサイズを拡大・縮小しても、比率を保ったままサイズが変化していますね。

次で実装コードを確認してみましょう。

【コピペ用】padding-topで要素の比率を指定する実装コード

以下が実際のコードになります。

ここでは例として、比率が1:1のものを紹介していきます。

<div class="box">
  <div class="box__content">1:1</div>
</div>

/* コンテナ要素 */
.box {
  position: relative;
  width: 100%; /* 任意の横幅を指定 */
}

/* コンテナ要素の擬似要素(ここで比率を調整) */
.box::before {
  content: "";
  display: block;
  padding-top: 100%; /* 比率を指定 */
}

/* 中の要素 */
.box__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

上のコードは比率が1:1なので、他の比率を指定したい方は以下から選んでください。

.box::before {
  padding-top: 100%;   /* 1:1 */
  padding-top: 75%;    /* 4:3 */
  padding-top: 66.66%; /* 3:2 */
  padding-top: 56.25%; /* 16:9 */
  padding-top: 150%;   /* 2:3 */
  padding-top: 200%;   /* 1:2 */
}

これで実装コードは終わりです！

次で比率の指定方法やコードの解説を見ていきましょう。

【解説】padding-topで要素の比率を指定する方法の実装コード解説

ここでは、上で紹介したコードの解説を行います。

の順番でみていきましょう。

HTML

まずはHTMLから解説していきます。

<div class="box">
  <div class="box__content">1:1</div>
</div>

HTMLでは、

をそれぞれ用意します。

まずはコンテナの役割をもつdivタグを用意し、boxクラスを付与します。

このdivに横幅と比率を指定するので、次は中に配置する要素を用意しましょう。

divやimgタグなど、配置したいコンテンツにbox__contentクラスをつけてください。

これでHTMLは完了です。

CSS

続いてはCSSを見ていきましょう。

/* コンテナ要素 */
.box {
  position: relative;
  width: 100%; /* 任意の横幅を指定 */
}

/* コンテナ要素の擬似要素(ここで比率を調整) */
.box::before {
  content: "";
  display: block;
  padding-top: 100%; /* 比率を指定 */
}

/* 中の要素 */
.box__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

CSSでは、

という指定をしていきます。

CSS1. コンテナ要素に横幅を指定する

まずはコンテナの役割をもつ.boxから説明していきます。

.box {
  position: relative;
  width: 100%; /* 任意の横幅を指定 */
}

1行目のposition: relativeは、中身の要素をposition: absoluteで絶対位置指定するために必要です。

DEMOではrelativeを指定していますが、デフォルト値であるstatic以外なら何でも構いません。

widthには、任意の横幅を指定してください。

ここで指定した横幅と、次で指定する比率で要素のサイズが決まります。

CSS2. コンテナ要素の::before擬似要素に比率を指定する

続いては、.boxクラスの擬似要素::beforeのスタイルです。

/* コンテナ要素の擬似要素(ここで比率を調整) */
.box::before {
  content: "";
  display: block;
  padding-top: 100%; /* 比率を指定 */
}

padding-topの%の値を調整することで、要素の比率を指定することができます。

公式は、以下の通りです。

高さの比率 ÷ 横幅の比率 × 100

ここでは横:縦の比率が1:1なので、100%になりますね。

以下にさまざまな比率の計算方法を記載しておきますので、参考にしてください。

上記の比率がよく使われますね。

正方形なら100%、横長の長方形なら100%以下を指定、縦長の長方形なら100%以上を指定することでそれぞれ実装することができます。

なぜpadding-topで比率を指定できるのか

なぜpadding-topで比率を調整できるのか気になる方もいるかと思いますので、簡単に説明しておきます。

結論からいうと、padding-topに%で値を指定した場合、要素の横幅を参照するという性質があるからです。

.boxの横幅が300pxとすると、.box::beforeの横幅も300pxになります。

これは.box::beforeにdisplay: blockを指定しているため、横幅を指定しない場合は親要素の100%を占める性質があるからです。

padding-top: 50%とすると300pxの半分の150pxになりますし、padding-top: 150%とすると、300pxの1.5倍の450pxになりますね。

要素のpadding-topが持つ性質を利用して、比率を指定しているというわけです。

CSS3. 中身のコンテンツを配置

コンテナ要素の横幅と比率が設定できたので、次は中に入れるコンテンツを配置していきましょう。

.box__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.boxクラスのコンテナにはposition: relativeを指定しましたね。

なので子要素であるコンテンツ部分は、position: absoluteで絶対位置を指定します。

上下左右の値を0にすることで、コンテンツのサイズを親要素いっぱいに広げることができます。

これでコンテンツを親要素に配置することができました。

以上でコードの解説は終わりです。

【まとめ】padding-topで要素の比率を保持しつつリサイズさせる方法

padding-topを利用して、ブロック要素の比率を保持したままサイズを可変させる方法を紹介しました。

<div class="box">
  <div class="box__content">1:1</div>
</div>

/* コンテナ要素 */
.box {
  position: relative;
  width: 100%; /* 任意の横幅を指定 */
}

/* コンテナ要素の擬似要素(ここで比率を調整) */
.box::before {
  content: "";
  display: block;
  padding-top: 100%; /* 比率を指定 */
}

/* 中の要素 */
.box__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

比率を指定するには、

高さの比率 ÷ 横幅の比率 × 100

この公式で数値を割り出して、padding-topの値に指定してください。