注目新着
画像Captioned Figure
An image and its caption tied together with figure and figcaption, in a rounded frame.
#image#figure#caption
2 個のフレームワーク初級
Loading…
A low-quality placeholder blurs in first, then the full image fades over it once loaded.
<!-- A gradient stands in while the photo loads; onload swaps opacity so the
real image fades in over it. A pure-CSS shimmer covers the wait. -->
<div class="relative aspect-video w-full max-w-md overflow-hidden rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700">
<img
src="/images/photo-6.jpg"
alt="City skyline through morning fog"
loading="lazy"
onload="this.style.opacity=1"
class="h-full w-full object-cover opacity-0 transition-opacity duration-500 motion-reduce:transition-none"
/>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
src必須 | string | - | カードの画像の URL。 |
imageAlt | string | '' | 画像の代替テキスト。title で内容が伝わる場合は空文字にします。 |
placeholder | string | - | Placeholder |
className | string | - | ルート要素にマージされる追加クラス。 |
A gradient (or a tiny blurred `placeholder` image) fills the frame while the photo loads, then `onLoad` flips opacity so the real image fades in - no empty box, no jump. The `motion-reduce:transition-none` opt-out drops the fade for anyone who asked for less motion. The plain-HTML tab uses an inline `onload` opacity swap; the React tab tracks a `loaded` state instead.