ITエンジニア/デザイナ向けにオープンソースを毎日紹介

単純に画像を並べただけではそれが何なのかは分かりづらいです。そこで役立つのがキャプションです。今回はそんなキャプションを表示するのに役立つライブラリ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指定で文字サイズを大きくできます。大きな画像向けですね。
large指定で文字サイズを大きくできます。大きな画像向けですね。

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

captionssはスタイルシート製のオープンソース・ソフトウェア(MIT License)です。

captionss - Sensible CSS Image Captions

jbranchaud/captionss

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2