padding-topで要素の比率を保ちつつサイズを可変させる方法

padding-topの使い方がわからない…

そんな悩みにお答えします。

初学者初見殺しトップ３に入るのが「padding-top」です。

「paddingって余白をとるために使うものじゃないの？」

「仕組みがさっぱりわからない」

コードを見てもなぜそう書いているのかが全然わかりませんでした。

これは人によるとは思いますが、仕組みを理解するよりかはコードのパターンを覚えてしまった方が早いのではないでしょうか。

今回はカードコーディングの場合にどのように使っているのかを見ていきましょう。

カードコーディングでのpadding-topの使い方

今回の条件は次のとおりです。

この場合画像のサイズを固定で指定すると拡大縮小できません。

かといってwidth:100%と指定しても高さがどうにもできません。

そこで使うのがpadding-topということになります。

コード

まずはコードを貼っておきます。

<section class="hoge">
  <a href="" class="card">
    <div class="card-wrapper">
      <div class="card-img">
        <img src="img/01.jpeg" alt="">
      </div>
      <div class="card-body">
        <h2 class="card-title">タイトル</h2>
        <p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
  </a>
<!-- 上記<a></a>があと6回続く -->
</section>

.hoge {
  display: flex;
  flex-wrap: wrap;
}

.card {
  display: block;
  width: calc(33.33% - 30px * 2 / 3);
  margin-right: 30px;
  margin-top: 30px;
  background-color: #fff;
}

.card:nth-child(3n) {
  margin-right: 0;
}

.card-wrapper {
  padding: 15px;
}

.card-img {
  padding-top: 75%;
  position: relative;
}

.card-img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body {
  padding: 10px;
}

.card-title {
  color: #333;
  font-weight: bold;
}

.card-text {
  color: #aaa;
}

解説

.card-img {
  padding-top: 75%;
  position: relative;
}

.card-img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

padding-topって何？

ポイントは上のコードです。

ここで引っかかるのがpadding-topです。

初見では何をしているのかがわかりません。

ここでpadding-topをググると次の文章に出会います。

どの解説サイトを見ても同じようなことが書かれています。

ですが初学者にはこの意味がよくわからない。

イメージできないからピンとこないのです。

ここで悩んでしまうと沼にはまります。

一旦ざっくりと説明します。

CSSは高さ方向にpaddingを%で指定した場合、基準値をwidth(100%)から取得する性質があります。

つまり widthの値が変化するとpaddingの値も同じ量だけ変化する のです。

よってwidthが可変した時、高さ方向のpaddingも同じく可変するという仕組みです。

これによりつねにアスペクト比（幅と高さの比、縦横比）が一定に固定されたままのボックスを作ることができます。

たとえば、幅1280px　高さ960px　の可変要素を作るとします。

画角計算 = 「高さ ÷ 幅 × 100」なので

960（高さ）÷1280（幅）× 100  =  75

となり、「padding-top: 75%;」と指定します。

コーディング解説

ここからコードの解説に戻ります。

どのような流れで行っているのかをつかむためには、次のことがポイントです。

まず .card-img に padding-top: 75%; を指定して画角を決定します。

次に .card-img > img の画像を position: absolute; によってpadding-topで指定した箱に乗せます。

ですがこのままでは画像の比率が崩れる可能性があるので object-fit: cover; を指定します。

すべてがバラバラのサイズの画像を用意しました。

きれいにおさまっています。

レスポンシブ対応できています。

アスペクト比を保ったまま拡大縮小します。

backgroundで指定するパターン

object-fit:coverでのIE対応が面倒な場合は画像をbackgroundで指定する方法もあります。

コード

<section class="hoge">
  <a href="" class="card">
    <div class="card-wrapper">
      <div class="card-img" style="background-image: url(./img/husky01.jpg);"></div>
      <div class="card-body">
        <h2 class="card-title">タイトル</h2>
        <p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
  </a>
<!-- 上記<a></a>があと6回続く -->
</section>

.hoge {
  display: flex;
  flex-wrap: wrap;
}

.card {
  display: block;
  width: calc(33.33% - 30px * 2 / 3);
  margin-right: 30px;
  margin-top: 30px;
  background-color: #fff;
}

.card:nth-child(3n) {
  margin-right: 0;
}

.card-wrapper {
  padding: 15px;
}

.card-img {
  padding-top: 75%;
  background: no-repeat center center / cover;
}

.card-body {
  padding: 10px;
}

.card-title {
  color: #333;
  font-weight: bold;
}

.card-text {
  color: #aaa;
}

解説

<div class="card-img" style="background-image: url(./img/husky01.jpg);"></div>

.card-img {
  padding-top: 75%;
  background: no-repeat center center / cover;
}

background: no-repeat center center / cover;

は

background-repeat: no-repeat;
background-position: center center;
background-size: cover;

これで最初のパターンとまったく同じ表示になります。

styleをHTMLに書くのは慣れないなという方は最初のパターン（IEに対応する場合はポリフィルの読み込み必要）、object-fitは使いたくないという方はあとのパターンで書きましょう。

どちらにせよpadding-topは初学者には難しいですよね。

この場合はこのパターン、この場合は違うこのパターンという風に実際実装しながら覚えていくしかないと思います。

習うより慣れろってことがコーディングにはたくさんあります。

早く慣れてしまいましょう。

以上です。

• Twitter
• Facebook

投稿者 トシ

関連記事

【CSS】marginの相殺を理解しよう

カード型レイアウトでよく使う定番のマウスホバーパターン４選

【CSS】写真と背景色を重ねてずらす表現方法　

CSSで画像を上下左右中央配置にする方法３選

【徹底解説】animationとkeyframesの使い方をマスターしよう！【CSS】

【Flexbox】デスクトップでは横、スマホでは縦に並ぶナビゲーションの作り方