画像に続けて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
要素には依存しませんが、入っていてもいなくても大丈夫なようにもします。
figure {
display: inline-block;
position: relative;
line-height: 1;
overflow: hidden;
}
まずはfigure
要素をinline-block
にします。こうすることによって内包される画像に合わせてfigure
要素のサイズが変化します。そしてposition
やoverflow
プロパティーで効率的にfigcaption
をレイアウトできるようにしておきます。line-height
プロパティーはなくてもうまくいくことがありますが、なるべく1
にしておいたほうが良いでしょう。
figure img {
vertical-align: text-bottom;
}
次に画像の行ボックスに対する位置決めを行います。デフォルト値であるbaseline
だとfigure
要素の下端に数ピクセルの隙間ができてしまいますが、text-bottom
にすることによってその隙間を消すことができます。
最後にfigcaption
のデザインです。
figure figcaption {
padding: 0 1em;
position: absolute;
right: 0;
bottom: 0;
width: 100%;
line-height: 3;
color: white;
background-color: black;
text-align: right;
opacity: 0.75;
}
幅はwidth
プロパティーで100%
を指定するとfigure
要素の幅一杯になります。つまり画像の幅と揃うことになりますね。padding
プロパティーで左右に余白を確保しているので、実際には飛び出してしまいますが、figure
要素でoverflow: hidden
となっているので問題ありません。高さはline-height
プロパティーでやると、高さと同時に縦方向のセンタリングも行えるのでお手軽でしょう。
テキストを右寄せにしているので、全体の位置はright
とbottom
プロパティーで右下に合わせます。overflow
で隠しているのでわかりませんが、実際には左に少し飛び出しています。左寄せにする場合はleft
を代わりに使いましょう。
色は普通に指定してopacity
プロパティーで半透明にしていますが、このあたりは好みで良いでしょう。勿論背景画像を使っても大丈夫です。
これで最初にあげたスクリーンショットのような派手すぎないけど少しだけ凝ったキャプションになります。周囲のコンテンツとのマージンを工夫したりフォントや前景色を変更したりして、図のキャプションかそうでないかを判断できるようにするのが王道だと思いますが、フォントの自由さが足りない日本語のページではこういう方法もまぁ悪くないんじゃないかと思います。
やり過ぎると図が読み手に与えるイメージが揺らいでしまうので、キャプションが図よりも目立つような形にはするべきではないでしょう。図が主でキャプションが従になるように気をつけてデザインすると良いと思います。
おまけ
オンマウスでスルッとキャプションを隠す場合は位置をいじるよりもline-height
プロパティーをいじった方がアニメーションさせやすいと思います。
.test figcaption {
overflow: hidden;
transition-duration: 0.5s;
}
.test:hover figcaption {
line-height: 0;
transition-duration: 0.5s;
}
bottom
いじる場合はキャプションの高さを知らなくちゃいけないのでちょっと面倒なので。まぁ吹っ飛ぶくらいの量を適当に指定するとかで逃げるという手もありますけどね。