Webサイトを作っていて画像はよく使われます。さらに画像にはキャプションとして説明をつけてあげることでより分かりやすいものになります。説明がない画像は一見すると何のことか分からない場合もあります。 そこで使えるのがLabel.cssです。単に画像の下に説明をつけるだけでないキャプションの使い方ができるようになります。

Label.cssの使い方

一例です。縦、横ともに中央寄せ。

左下への配置。

右上。

中央の右寄せ。

さらに表示の仕方を変更できます。分かりづらいですがフロートで表示しています。

写真の上にキャプションを重ねることで、視点の移動が少なくなり、より訴求できるようになります。その場所も写真によって効果的な配置が考えられるでしょう。ブログやメディアサイトで積極的に使っていきたいソフトウェアです。

Label.cssはCSS3製のオープンソース・ソフトウェア（MIT License）です。

Label.css - Label every thing! usablica/label.css: Just a simply easy way to label each element you want!