注目新着
画像Image Gallery Grid
An even, responsive grid of square thumbnails that steps from two up to four across.
#image#gallery#grid
2 個のフレームワーク初級
Loading…
An image and its caption tied together with figure and figcaption, in a rounded frame.
<!-- figure + figcaption ties the caption to the image semantically. The image
is decorative to the caption's text, but here it carries its own meaning,
so it keeps real alt. -->
<figure class="mx-auto w-full max-w-lg">
<div class="aspect-[4/3] overflow-hidden rounded-xl bg-gray-100 dark:bg-gray-800">
<img src="/images/photo-1.jpg" alt="Sunrise over a mountain ridge" loading="lazy" class="h-full w-full object-cover" />
</div>
<figcaption class="mt-3 text-sm leading-relaxed text-gray-500 dark:text-gray-400">
First light on the ridge, shot on a 35mm lens at f/8.
</figcaption>
</figure>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
src必須 | string | - | カードの画像の URL。 |
imageAlt | string | '' | 画像の代替テキスト。title で内容が伝わる場合は空文字にします。 |
caption | string | - | 表のキャプション。内容より先にスクリーンリーダーへ読み上げられます。 |
className | string | - | ルート要素にマージされる追加クラス。 |
`<figure>` with `<figcaption>` links the caption to the image semantically, so assistive tech reads them as one unit. The image keeps real `alt` because it carries meaning of its own here; make the `alt` empty only when the caption fully describes it. The `aspect-[4/3]` box reserves height so the caption never jumps up as the photo decodes.