画像の好きな場所にキャプションを表示「Label.css」
Label.cssはスタイルシート製のオープンソース・ソフトウェア（MIT License）です。
画像をぽんと貼っただけでは分からないこともちょっとしたキャプションで説明してあげるとぐっと分かりやすくなります。そんな処理を手軽に実現してくれるのがLabel.cssです。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-20 11.17.18.1369050950.png)
例えばこれは左指定した場合。文字は左寄せです。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-20 11.17.34.1369050956.png)
こちらは中央の場合。背景が半透明なのがいい感じです。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-20 11.17.37.1369050963.png)
こちらは右上。文字のない部分は背景を消すこともできます。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-20 11.17.41.1369050971.png)
右寄せ。文字列も右寄せになっています。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-20 11.17.44.1369050979.png)
画像の上に載せるのではなく、枠外に出すこともできます。
画像からでは分かりませんが、アニメーションとしてマウスを載せたらラベルをフェードインさせたり、スライドしながら表示させることもできます。画像のキャプションを格好よく演出してくれそうです。Label.cssの使い方は簡単で、figureタグでimgタグを囲み、figureタグのdata-labelとして表示させたいテキストを指定するだけです。
MOONGIFTはこう見る
スマートフォンの流行もあって写真コンテンツはオンラインに溢れています。写真共有サイトもたくさんあり、差別化が問われるようになっています。特にスマートフォンで撮影した写真の場合、大きさの比率は殆ど変わらないため、ただ並べるだけではどこも似たり寄ったりになってしまいます。
キャプションを表示するのは一つの手段ですが、写真の上に重ねて表示することでサイト全体のバランスを崩すことなくタイル上に並べられるようになるでしょう。キャプション以外でも撮影場所の情報や撮影日時などを表示するといった際にも使えそうですね。