今日は芸術鑑賞会でした。竹久夢二展なかなか良かったです。

10月27日まで水戸近代美術館で開催してます。

全く美術とは関係ないのですが、スタイルシートで昔の写真ぽい白枠をつけた表示にできないかと思い考えてみました。

HTML部分はdivタグにpictureというクラスを作って利用します。
その中にimgタグとタイトル用のpタグ（クラス名title）を含めておきます。

<div class="picture">
	<p>
		<img src="http://farm8.staticflickr.com/7297/12398465685_8536645486_n.jpg" width="320" height="239" alt="2014-02-09 at 11.53.39">
	</p>
	<p class="title">くまモンの蒸しパン</p>
</div>

CSSでは、pictureクラスのdivタグのdisplayプロパティにinline-blockを指定するところがポイントです。
こうするとボックス部分がサイトの幅に合わせて均等に横並びになります。
それっぽく見せるために枠に影（box-shadow）もつけておきます。

.picture{
	margin: 10px;
	display: inline-block; 
	border: 1px solid #fff;
	padding: 0;
	box-shadow: #aaa 3pt 3pt 7pt;
}

画像タグには余白（padding）を入れて白い枠っぽく見えるようにします。

.picture img{
	margin: 0;
	padding: 10px;
}

今回画像の下に画像を説明するようなタイトル部分を入れたかったので、下余白（padding-bottom）を少し取って文字を写真に対し中央ぞろえ（text-align:center）になるようにしました。

.picture > .title{		/* タイトル部分 */
	padding-bottom: 10px;
	font-size: 12px;
	width: 100%;
	text-align: center;
}

いかがでしょうか？
それっぽく見せるという部分はパソコンならではの考え方で、わたしは結構好きです。