AI向け説明 AI Description

カード形式のスケルトンローディング。各要素（画像、タイトル、テキスト）を`div`で表現し、背景色と`border-radius`で形状を定義します。シマーアニメーションは`@keyframes shimmer`で実装し、`linear-gradient`と`background-position`をアニメーションさせて光沢効果を表現します。実際のコンテンツのレイアウトに合わせて要素のサイズを調整します。

A card-style skeleton loading placeholder. Each element (image, title, text) is represented with `div` elements, defining shapes with background color and `border-radius`. Shimmer animation is implemented with `@keyframes shimmer`, animating `linear-gradient` and `background-position` to create a shine effect. Adjust element sizes to match your actual content layout.

調整可能パラメータ Adjustable Parameters

• --shimmer-duration — シマーアニメーションの速度 shimmer animation speed
• card layout — カードのレイアウトと要素の配置 card layout and element arrangement
• element sizes — 各要素のサイズと幅 size and width of each element

実装 Implementation

HTML + CSS + JS

<div class="skeleton-card">
  <div class="skeleton-card__image"></div>
  <div class="skeleton-card__title"></div>
  <div class="skeleton-card__text"></div>
  <div class="skeleton-card__text"></div>
</div>

<style>
.skeleton-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #dfe3f6;
}

.skeleton-card__image {
  width: 100%;
  height: 200px;
  background: #f0f2f8;
  border-radius: 8px;
  margin-bottom: 16px;
  animation: shimmer 1.5s infinite;
}

.skeleton-card__title {
  width: 60%;
  height: 24px;
  background: #f0f2f8;
  border-radius: 4px;
  margin-bottom: 12px;
  animation: shimmer 1.5s infinite;
}

.skeleton-card__text {
  width: 100%;
  height: 16px;
  background: #f0f2f8;
  border-radius: 4px;
  margin-bottom: 8px;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-card__image,
.skeleton-card__title,
.skeleton-card__text {
  background-image: linear-gradient(
    90deg,
    #f0f2f8,
    rgba(255, 255, 255, 0.5),
    #f0f2f8
  );
  background-size: 200% 100%;
}
</style>

React (JSX + CSS)

// react/S-005.jsx
import "./S-005.css";

export default function SkeletonCard() {
  return (
    <div className="skeleton-card">
      <div className="skeleton-card__image"></div>
      <div className="skeleton-card__title"></div>
      <div className="skeleton-card__text"></div>
      <div className="skeleton-card__text"></div>
    </div>
  );
}

/* react/S-005.css */
.skeleton-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #dfe3f6;
}

.skeleton-card__image {
  width: 100%;
  height: 200px;
  background: #f0f2f8;
  border-radius: 8px;
  margin-bottom: 16px;
  animation: shimmer 1.5s infinite;
}

.skeleton-card__title {
  width: 60%;
  height: 24px;
  background: #f0f2f8;
  border-radius: 4px;
  margin-bottom: 12px;
  animation: shimmer 1.5s infinite;
}

.skeleton-card__text {
  width: 100%;
  height: 16px;
  background: #f0f2f8;
  border-radius: 4px;
  margin-bottom: 8px;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-card__image,
.skeleton-card__title,
.skeleton-card__text {
  background-image: linear-gradient(
    90deg,
    #f0f2f8,
    rgba(255, 255, 255, 0.5),
    #f0f2f8
  );
  background-size: 200% 100%;
}