web サイトでキャプションつき画像の作成
#14 キャプション付き画像を作ろう
http://dotinstall.com/lessons/website_html/9014
を参考にキャプションがついた画像を設置
<div class="sample"> </div>
で領域を指定して
キャプション画像をこの中に設置する
<img src="dummy.png" width="60" height="60"> <p>補足</p>
これをCSSで画像を右よりにする
div class=”sample” なので
div.sample{
}
として設定を書いていく
float:right;
で右寄せ
float したら width で幅を指定するのが必須なので
width:60;
文字と画像がくっつかないように
margin-left:10px;
としておく
margin-left なのは、今回画像が右だから
次に、div class=”sample”
の中にある p の解説も設定する
div.sample > p{
font-size:10px;
}
として文字を小さめにする
また、わかりやすく見やすくするため
画像に枠をつける
div.sample>img{
padding:2px;
background:#fff;
border:1px solid #ccc;
}
まず、
padding:2px;
で余白をつくって
background:#fff;
で背景を白くして
border:1px solid #ccc;
で実線を引いている
ただし、この枠をつける場合、これらの指定した枠の分だけ幅を広げる必要がある
このため、
div.sample の
width:60px;
から
余白２px *2 + 1px *2 分の 6px 追加するため
width:66px;
と変更する必要がある
これで、画像に枠線をつけることができる