Tailwindでカード型のセクションを作成してみる。gridとaspect-ratioがポイント！

悩んでいる人

Tailwindでカード型のセクションを作ってみたいけど…

悩んでいる人

Tailwindでaspect-ratioが効かない??

今回はTailwind cssを使ってカード型のコンポーネントを作成してみます。

Reactで実装しておりますが､通常のHTMLでも同様に実装可能です。

カード型のコンポーネントを作成するときにTailwindでaspect-ratioが効かないときの対応方法についても記載しております。(自分が困ったので…)

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
現在は名古屋の自社開発企業のフロントエンドエンジニアしています。フリーランスとしても活動しています。

実装手順

今回作るのは下記のようなレイアウトになります。

では､どんなコードで実現できているのかを確認していきます。

対象のコード

今回はGrid表示を実現するためのコンポーネントCardList.jsxとカードのコンポーネントCard.jsx

import Card from "./Card";

const CardList = () => {
  return (
    <ul class="grid grid-cols-2 md:grid-cols-4 gap-5">
      <Card />
      <Card />
      <Card />
      <Card />
      <Card />
    </ul>
  );
};

export default CardList;

まず､Grid表示をするために､display:grid;があたるようにクラスを付与します。

ポイントはgrid-cols-2です｡これで2列にすることが可能です。3列4列それ以上も可能です｡
参考:Grid Template Columns

また､メディアクエリも簡単に付与することができます。md:grid-cols-4とすることで､768px以上でのデザイン表示を指定することができます｡
参考: Responsive Design

次にカードコンポーネントを見ていきます。

const Card = () => {
  return (
    <li class="px-4 py-4 shadow-lg shadow-gray-300 rounded-2xl">
      <a href="#">
        <h3>カードタイトルカードタイトル</h3>
        <div class="mt-3">
          <img
            src="https://okalog.info/wp-content/uploads/sample/sample1.jpg"
            class="w-full aspect-square object-cover rounded-2xl"
            alt="sample"
          />
        </div>
      </a>
    </li>
  );
};

export default Card;

ここで意識するコードは画像の表示部分です。
コーディング時に意識しないといけないこととして､どんなサイズの画像がきてもレイアウトがくずれないようにコーディングすることです｡

ここではimgタグにクラスを付与することでレイアウトがくずれないように実装しております。

w-full //width:100%に指定する。
aspect-square //画像のアスペクト比を指定する。
object-cover //画像の表示状態を指定する。object-fit:cover, object-fit:containなど。

参考: Aspect Ratio , Object Fit

w-fullクラスを付与しないとアスペクト比を固定することができないので気をつけてください｡

まとめ

今回はよくあるカード型のコンポーネントの実装方法について解説しました。

Gridの表示とaspect-ratioがポイントになると思います✏️

参考になれば幸いです。

オカ

動画教材でtailwindを学習することもできますので基礎から学習をしてみたいということであればこちらから