画像のレスポンシブ対応（画像上にキャプション表示）

画像のレスポンシブ対応 の画像上にキャプション表示する。

デモページを表示

CSS

補足

• 2行目：キャプションの位置を決めるために追加。
• 9行目以降：キャプションの位置やスタイルを設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• frame-img クラスを付けた span 要素内、img 要素に続けて em 要素でキャプションを指定する。

関連投稿

• 画像のレスポンシブ対応