Flexボックスレイアウトと、Gridレイアウトを使用すれば、CSSでのレイアウトが手軽に構築可能になりました。
しかし、組まれたレイアウト内にアイテムやパーツなどを細かく作っていく中で、文字数によるレイアウトの崩れ、絶対配置で用意したアイコンがビューポート変化時にうまく表示されないなど、 理論上正しいコードが、実際ブラウザ上では考えた通りに表示されなかったりなども、Web制作を始めた頃にはよくあると思います。

今回は、色々なWebサイトでよく見かける「カードコンポーネント」を作るにあたって、カードコンテナ内の画像サイズを統一したい時に、 よく使われるコードの書き方を見ていきます。

カードコンポーネントの作り方

ユーザーにたくさんの情報を確認してほしい時に、同じ機能・カテゴリを持つアイテムを整列された状態で一覧で表示したい場面で使われるレイアウトです。
簡単に説明すると、アイテムごとに見出しとコンテンツ抜粋文をセットにしたリストアップだけでは、情報としてユーザーの興味を引く効果が低い為、アイキャッチ画像を加えた形が一般的となっていますので、 ECサイトの商品リスト、ギャラリー・ポートフォリオサイトのサムネ付き画像リストなど、様々なWebページで使われています。
レイアウト構築の基本やボックスモデルさえ理解していれば、カード1枚を作るのに然程時間が掛りません。しかしここでのポイントはアイキャッチ/サムネ画像のコンテナ(親要素)サイズを固定したうえ、画像そのものの比率を維持することです。

<ul>
<li>
<figure><img src="sample.jpg" alt="sample" /></figure>
<div>
<h3>Title</h3>
<p>Message</p>
</div>
</li>
</ul>

コンテナ内の画像サイズを維持する

先ずは土台となるカードリストを用意します。
ここでは、コンテンツの中身が「画像」⇒「見出し」⇒「本文の抜粋」の順で並べるタイプのカードを作っていきます。

  • 1.親要素のリスト(ul > li)を用意し、カードの数を3つとします(li * 3)
  • 2.カードコンテナ内に「画像のコンテナ(figure)」と「画像(img)」を追加
  • 3.さらに「見出し」+「本文の抜粋」を追加
  • 4.CSSで横並びレイアウトを作る

ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    margin: 0;
    align-items: flex-start;
    padding: 0;
}

li {
    flex-basis: 31%;
}

方法1:【padding-top】

これまでのカードコンポーネントの画像部分を作るのに、コンテナ自体の高さを0にし、「padding-top」で高さの計算を行うことで、 後に配置する画像そのもののアスペクト比を維持していました。同時に「img」を絶対配置にした上、コンテナに「overflow:hidden」を追加する必要もあります。

  • 画像に絶対配置をかける
  • 画像コンテナ:「padding-top:値%(アスペクト比)」
  • 画像そのもの:「height: 100%」+ 位置調整
.figure{
    position: relative;
    padding-top: 75%;
    overflow: hidden;
}

.figure img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
}

「height」ではなく、「padding-top/padding-bottom」を利用して高さを作り出すので、少々強引に感じることあるし、なかなか自力では思いつかない方法でもありますが、 絶対配置をさせることで、画像の配置する場所を細かく調整することができます。

方法2:【aspect-ratio】+【object-fit】

近年CSSの機能大幅にアップグレードしたことにより、コンテナに画像や動画コンテンツを埋め込む方法も増えて、さらにコンテンツのアスペクト比を直観的設定できるプロパティも ほぼすべてのブラウザにサポートされたことから、今では特に注意することなく使用出来ます。
早速実装方法を見ていきましょう。

  • 1.「aspect-ratio」の値でアスペクト比を決める
  • 2.「object-fit」で画像をコンテナ全体に埋める様に設定する
ul img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

こちらの方法で実装する際に、主にアスペクト比のみを意識すれば非常に少量なコードでカードコンポーネントが作れます。
但し、「object-fit」はアスペクト比を維持した状態でコンテナ内いっぱいになる様に画像を埋め込むことは出来る為、アイキャッチ画像であれば縦横比がバラバラの画像でもそこまで気にしないと思いますが、 被写体や文字などが画像内に入っている場合、一部が切り取られた様になることもあります。
結論として、画像書き出しの際にアスペクト比を多少考慮すれば大きな問題は起きることはないと思います。

コード応用例・まとめ

最後に、今回紹介した2つ方法で作ったカードコンポーネントを実際にWebページのプレビュー画面から確認して見てください。
(※「Result」画面をクリック(タップ)し、画面サイズに合わせて倍率を変更してください)

まとめ

以上がWebサイトで、もっともよくみるコンポーネントの1つ「カード」をモダンなコーディングで作る方法でしたが、技術の入れ替わりが激しい業界なので、 未経験から独学でWeb制作にチャレンジしているが、スキルが身に付く実感がなく、学習のゴールが見えないという方には、コンピー塾の講座をおすすめしています。

この記事の提供元:「コンピー塾」

コンピー塾とは、幅広い年代に対してエンジニア育成に注力した教育サービスを展開しているITスクールです。
AIソリューションや3Dコンテンツ開発、ゲーム開発などを手掛けるIT複数企業による出資により、事業を運営しています。
3DCG、Web、RPAやAIなど、先端技術を主とした短期集中での目的別実践講座の開発・展開に注力し、初心者を含めた個人や企業における幅広いIT人材の発掘や育成を支援しています。
【コンピー塾HP】:https://compy-school.com/

コンピー塾のWeb講座

コンピー塾ではWeb制作に必要なスキルを身に付けることが出来、ご都合に合わせて学習できる入門コースを提供しています。
未経験からWEBサイト(コーポレートサイト、LPなど)を作成してみたい方必見です!
受講される方のご要望に合わせて最適な学習プランをご提案いたします。

全 10 回の受講により、HTML・CSS(Sass)・JavaScript(jQuery)を基礎から学び、1つのWebサイトを最終的に完成していきます。
講座には無料体験を実施しており、将来Webデザインを副業にしたい方や、Webクリエイター志望の方、更に自社でHP作成をご検討の方にもぜひ受講していただき、受講を通してご自身のお悩みをお聞かせください。
詳しくは下記の詳細ページをご覧ください。
【Webサイトコーディング・制作講座】(コンピー塾):https://compy-school.com/2021/08/06/web-coding/