単純に画像を並べただけではそれが何なのかは分かりづらいです。そこで役立つのがキャプションです。今回はそんなキャプションを表示するのに役立つライブラリcaptionssを紹介します。スタイルシートだけで作られているキャプション表示ライブラリです。

使い方

実際に使う時のHTMLは次のようになります。figureとfigcaptionタグを使います。

<figure class="embed hide-smooth dark">
    <img src="img/Madres.jpg"
        alt="The mothers marching at Plaza de Mayo"/>
    <figcaption>
        The caption text goes here...
    </figcaption>
</figure>

デモ

画像の上に重なってキャプションが表示されています。

画像の上部にキャプションを表示させることもできます。

マウスオーバーで表示させる指定も。

large指定で文字サイズを大きくできます。大きな画像向けですね。

captionssはJavaScriptを使わずにキャプションの表示、非表示を制御しています。そのためJavaScriptがオフになっていても変わらないUXを提供できるのが特徴と言えます。ちょっとしたアニメーションであればスタイルシートだけでこなしてしまうことを考えてみるのは面白そうです。 captionssはスタイルシート製のオープンソース・ソフトウェア（MIT License）です。 captionss - Sensible CSS Image Captions jbranchaud/captionss