

そんな悩みにお答えします。
初学者初見殺しトップ3に入るのが「padding-top」です。
ブラウザ幅に合わせて画像のアスペクト比を維持したまま拡大縮小をする際には、padding-topを”%”で指定します。
「paddingって余白をとるために使うものじゃないの?」
「仕組みがさっぱりわからない」
コードを見てもなぜそう書いているのかが全然わかりませんでした。
これは人によるとは思いますが、仕組みを理解するよりかはコードのパターンを覚えてしまった方が早いのではないでしょうか。
今回はカードコーディングの場合にどのように使っているのかを見ていきましょう。
目次
カードコーディングでのpadding-topの使い方
今回の条件は次のとおりです。
- 用意する画像は物理的に縦横のサイズがバラバラである
- 一律4:3の比率でトリミングして拡大縮小するように指定する
この場合画像のサイズを固定で指定すると拡大縮小できません。
かといって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をググると次の文章に出会います。
padding-topを%で指定すると、親要素の横幅に対する相対的な値となる
どの解説サイトを見ても同じようなことが書かれています。
ですが初学者にはこの意味がよくわからない。
イメージできないからピンとこないのです。
ここで悩んでしまうと沼にはまります。
一旦ざっくりと説明します。
CSSは高さ方向にpaddingを%で指定した場合、基準値をwidth(100%)から取得する性質があります。
つまり widthの値が変化するとpaddingの値も同じ量だけ変化する のです。
よってwidthが可変した時、高さ方向のpaddingも同じく可変するという仕組みです。
これによりつねにアスペクト比(幅と高さの比、縦横比)が一定に固定されたままのボックスを作ることができます。
- 1:1のアスペクト比 = 1 / 1 = 1 = padding-top: 100%;
- 4:3のアスペクト比 = 3 / 4 = 0.75 = padding-top: 75%;
- 3:2のアスペクト比 = 2 / 3 = 0.66666 = padding-top: 66.67%;
- 16:9のアスペクト比 = 9 / 16 = 0.5625 = padding-top: 56.25%;
たとえば、幅1280px 高さ960px の可変要素を作るとします。
画角計算 = 「高さ ÷ 幅 × 100」なので
960(高さ)÷1280(幅)× 100 = 75
となり、「padding-top: 75%;」と指定します。
コーディング解説
ここからコードの解説に戻ります。
どのような流れで行っているのかをつかむためには、次のことがポイントです。
padding-topで指定した箱にposition:absoluteで画像を乗せる
まず .card-img に padding-top: 75%; を指定して画角を決定します。
次に .card-img > img の画像を position: absolute; によってpadding-topで指定した箱に乗せます。
top: 0; left: 0; width: 100%; height: 100%; でぴったりとはめ込みます。ですがこのままでは画像の比率が崩れる可能性があるので object-fit: cover; を指定します。
IEに対応する場合はポリフィルを読み込む必要があります。
すべてがバラバラのサイズの画像を用意しました。
きれいにおさまっています。
レスポンシブ対応できています。
アスペクト比を保ったまま拡大縮小します。
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>
それぞれ違う画像を指定する必要があるので、HTMLに「style=””」として画像指定しています。
.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;
と同じです。
ここでのポイントは background-size: cover; です。
これにより画像の比率を保ったまま、表示領域を全部満たすようにして画像表示されます。
ちなみに画像の比率を保ったまま、表示領域内に画像がすべて収まるようにして表示させたい場合は background-size:contain; とします。
これで最初のパターンとまったく同じ表示になります。
styleをHTMLに書くのは慣れないなという方は最初のパターン(IEに対応する場合はポリフィルの読み込み必要)、object-fitは使いたくないという方はあとのパターンで書きましょう。
どちらにせよpadding-topは初学者には難しいですよね。
この場合はこのパターン、この場合は違うこのパターンという風に実際実装しながら覚えていくしかないと思います。
習うより慣れろってことがコーディングにはたくさんあります。
早く慣れてしまいましょう。
以上です。
投稿者 トシ
コメントを残す