Topスタイルシートの基本イメージ > 図や画像にキャプションをつける

図や画像にキャプションをつける

画像として作成した図や表をページの中にレイアウトする時は、図や表の内容がわかりやすいようにキャプションをつけて情報を捕捉するのがオススメです。


アルさまですお試し画像のキャプションです。


<p class"images"><img src="○○.gif" width="100" height="100" alt="お試し画像なのです。">
お試し画像のキャプションです。</p>


.images{
float:left;
margin-left:20px;
font-size:0.85em;
color:#FF0000;
width:100px;
}

※「float:left」で図と表を文章に回りこませ、「margin-left」はテキストと画像の間のスペースです。
「font-size」や「color」はキャプション部分の色や大きさになります。
「width」でキャプションの幅を決めます。画像の横幅と同じ大きさにするときれいになります。特に「float:right」の場合はこの幅を設定しないと、回り込みがきれいに表示されません。

画像とキャプションの間の間隔を調整したい場合は

.images img{
margin:10px;
}

これで10pxの間隔が出来ます。

「図や画像にキャプションをつける」関連本

Akasa Rira
みつけたきせき