html - 画像のキャプション

Question

最新の HTML/CSS を使用して Web 上の画像にキャプションを付ける最も適切な方法は何ですか? デモコードをください。

score 16 · Accepted Answer

画像とそのキャプションをマークアップするには、セマンティックな方法がいくつかあります。

古い学校の方法

古い学校の方法は、HTML 定義リストを使用することです。セマンティックな方法での画像キャプションを参照してください。(この方法を示す他の素晴らしいチュートリアルがあります。)

<dl>
    <dt><img src="foo.jpg" /></dt>
    <dd>Foo</dd>
</dl>

通常のマークアップに適用される図のマイクロフォーマットもあります。

<div class="figure">
  <img class="image" src="foo.jpeg" alt="" /><br/>
  <small class="legend">Foo</small>
</div>

<figure>また、HTML5 は、および<figcaption>要素を介して、キャプション付きの画像に対してクリーンでストレートな方法を提供するようになりました。

<figure>
  <img src="foo.jpg" alt="">
  <figcaption>Foo</figcaption>
</figure>

score 2 · Accepted Answer

www.alistapart.com でいくつかの優れたコードを含む多くの記事を見てきましたが、ここから始めましょう: http://www.alistapart.com/articles/practicalcss/

score 1 · Accepted Answer

編集 -

ホバー画像キャプションの素敵なサンプルCSS

score 0 · Accepted Answer

ここの投稿ですべての詳細をリストするのは難しい.

CSS 画像キャプションについて詳しく説明しているいくつかのリンクを次に示します。

最後に、画像のキャプションに必要な CSS コードを生成するスタンドアロンツール:

score 0 · Accepted Answer

これらのクールな画像キャプション効果を使用できます。