挿絵画像のキャプションをスタイルシートで

挿絵画像のキャプションをスタイルシートで

　挿絵に使用する画像のすぐ下に説明文（キャプション）を付けたい場合、どのようにスタイルシートを設定すればいいでしょうか？

　いくつか方法が考えられますが、ここでは最もシンプルな方法でキャプションを付けるＣＳＳをご紹介したいと思います。

段落要素に幅とフロートを設定する

　最もシンプルな方法の一つとして、段落タグ<p>に挿絵画像と同じ幅を設定し、画像とキャプションをまとめてテキストの横にフロートで回りこませる方法です。以下のサンプルでは、スイスのマッターホルンの画像にキャプションをつけた例です。

＜完成サンプル＞

スイスのマッターホルン（出典：Wikipedia）

　通貨のスイスフラン（CHF）は、金よりも堅いと言われるほどの世界で最も安定した通貨であり、1870年代の硬貨が未だにデザインも変更されずにそのまま製造され、流通している。

　国内の物価および賃金水準は高く、国民の貯蓄高も、日本並みに高い。また、輸入関税率は低く、高級外車などが比較的安く購入できる。スイスの欧州連合 (EU) 加盟の賛否を問う国民投票において、国民の過半数が反対票を投じる重大な理由はここにある（記事の出典：Wikipedia）。

＜ＨＴＭＬソースサンプル＞

　挿絵に使用した画像の横幅は153ピクセルなので、キャプション用の段落全体の幅をその画像と同じに設定します。

　次に、キャプション用の段落にフロートを設定し、テキストの左右に回り込ませます。ブロックレベル要素である段落の中に記述したテキストと画像はまとめてフロートされます。

＜スタイルシートサンプル＞

　画像と同じ幅を設定した上でフロートを設定しています。このＣＳＳをキャプションを格納する段落に設定します。