記事をカードで魅せるデザイン術

はじめに

今回は投稿した記事をカード型に綺麗に表示していこうと思います。私のサイトのUI表示で解説しますので、慣れてきた方は自分好みに調節してみましょう！

目的

• カード表示で綺麗に表示
• 画像の大きさなども調節して統一化

カード表示を作成

下記がカード表示する方法になります。今回重要でないCSSは割愛させていただきますが、ご了承ください。

import { client } from "./lib/microcms";

export default async function Home() {
  const data = await client.get({ endpoint: "blogs" }); //エンドポイント取得（API名）
  return (
    <main className="max-w-6xl mx-auto p-6 shadow">
      <ul className="space-y-1 grid grid-cols-1 sm:grid-cols-2 gap-4 bg-blue-300 p-3">
        {data.contents.map((post: BlogPost) => (
          <li key={post.id} className="bg-white rounded-lg shadow p-4 h-95">
            <a href={`/blogs/${post.id}`}>
              <h2 className="text-2xl font-semibold">{post.title}</h2>
              {post.thumbnail && (
                <img
                  src={post.thumbnail.url}
                  alt=""
                 className="w-full h-48 object-contain rounded mb-1"
                />
              )}
              <div className="pt-3">
                <p>更新日</p>
                {new Date(post.createdAt).toLocaleDateString("ja-JP", {
                  year: "numeric",
                  month: "short",
                  day: "numeric",
                })}
              </div>
            </a>
          </li>
        ))}
      </ul>
    </main>
  );
}

※このページのデータは microCMS から取得しているので、取得処理はクライアント側で行っています。

ポイント

grid

gridは中のコンテンツをグリッドアイテムとして使用することができます。
グリッドアイテムとは列や行、高さ、位置を自由に調整できるアイテムになります。

grid-cols-1 sm:grid-cols-2

グリッドの列数を1列、2列に調整することができます。この方法を使用することでスマホサイズでは1列、画面幅がsm以上なら、2列の表示を行うことができます。

3列表示にしたいときは lg:grid-cols-3
4列表示にしたいときは lg:grid-cols-4

より大きい画面で列の表示をする際は、微調整しましょう。

gap-4

グリッドアイテムの隙間を管理できます。gridを使用している際、限定のCSSなので注意しましょう。

h-95、h-56

h-95 でカードの枠の高さを指定し、さらにカードの中身である画像の大きさもこちらで指定しています。

object-contain

使用することで、画像の全体を表示することができます。ただし、画像がカードの高さや幅にあってないと小さく見えてしまいます。

object-cover は画像の縦横比を保ちながら枠いっぱいに画像を表示できますが、枠からはみ出た部分は切り取られてしまうので、こちらも注意が必要です。

何も設定していないときは、縦か横に圧縮されているように見えます。

完成UI

おわりに

お疲れ様でした。カード表示の綺麗な整え方に関して簡単ではありますが記述させていただきました。

gridの表示はflexと併用する場合は競合してしまい、もし「classname="grid flex"」と書いてしまうと後に書いた flex が優先されてしまうので注意して使用しましょう。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼

下記記事ではCSSの紹介ページを運営していますので参考にしていただければと思います。
▼▼▼