写真をただ貼りつけるよりも、
少しの工夫で面白くみせることができます。
例えばCSSで枠線をつけるだけで、
淵つきのポラロイド写真のように見えるから不思議ですよね。
<head>〜</head>の間に
<style TYPE="text/css">
<!--
-->
</style>
と書いてから、
CSSは、
.test1 img {
padding: 5px 5px 15px 5px;
border: 1px solid #ccc;
}
HTMLは、
<div class="test1">
<img src="任意の画像" />
</div>
すると、以下のような表示になります。
工夫をすると、白い余白のところに、 文字(キャプション)も載せられます。
CSSは以下のように記述。
.test2{
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
.test2 span {
padding: 5px;
display: block;
}
HTMLは以下のように記述
<div class="test2">
<img src="任意の画像" /><br />
<span>
サンプルのキャプションです</span>
</div>
すると以下のような表現ができます。
線の太さを変えたりすると、色々表現できそうですね。