画像に続けてfigcaptionをそのまま普通に表示するといまいちなことが多いです。それでも英語ならイタリック体にするとかでなんとなくその文字列がfigure要素に係っているものだということが表現できるような気がしますが、日本語の斜体はいろいろアレなので使いたくないです(よね!)。そこで画像にキャプションを綺麗に重ねる方法を模索してみました。 Demo: Smooth Caption まずは画像のHTMLです。 <figure> <a href="http://example.com/"> <img src="http://example.com/images/logo.png"> </a> <figcaption>Example.com's Logo</figcaption> </figure> このHTMLに対してどんなサイズの画像にも対応できるようにCSSを書いていきます。a要素には
![快い図のキャプション](https://cdn-ak-scissors.b.st-hatena.com/image/square/0d3c511c645a7141ade71115693695f56491b892/height=288;version=1;width=512/https%3A%2F%2Fhail2u.net%2Fimg%2Fblog%2Fsmooth-figcaption.png)