2016年12月13日

画像にキャプションを付ける

「縦横比を維持したまま横幅いっぱいに画像を表示」で表示された画像にキャプションを付けます。

HTML

補足

  • em 要素にキャプションとして表示する文字列を指定します。
  • キャプションを画像に重ねて表示する時は、 "frame-img" クラスを付けた span 要素の中に em 要素を置きます。
  • キャプションを画像の下に表示する時は、 "frame-img" クラスを付けた span 要素の外に em 要素を置きます。

CSS

サンプル

「画像にキャプションを付ける」のサンプル