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

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

画像をぽんと貼っただけでは分からないこともちょっとしたキャプションで説明してあげるとぐっと分かりやすくなります。そんな処理を手軽に実現してくれるのがLabel.cssです。


例えばこれは左指定した場合。文字は左寄せです。


こちらは中央の場合。背景が半透明なのがいい感じです。


こちらは右上。文字のない部分は背景を消すこともできます。


右寄せ。文字列も右寄せになっています。


画像の上に載せるのではなく、枠外に出すこともできます。

画像からでは分かりませんが、アニメーションとしてマウスを載せたらラベルをフェードインさせたり、スライドしながら表示させることもできます。画像のキャプションを格好よく演出してくれそうです。Label.cssの使い方は簡単で、figureタグでimgタグを囲み、figureタグのdata-labelとして表示させたいテキストを指定するだけです。


MOONGIFTはこう見る

スマートフォンの流行もあって写真コンテンツはオンラインに溢れています。写真共有サイトもたくさんあり、差別化が問われるようになっています。特にスマートフォンで撮影した写真の場合、大きさの比率は殆ど変わらないため、ただ並べるだけではどこも似たり寄ったりになってしまいます。

キャプションを表示するのは一つの手段ですが、写真の上に重ねて表示することでサイト全体のバランスを崩すことなくタイル上に並べられるようになるでしょう。キャプション以外でも撮影場所の情報や撮影日時などを表示するといった際にも使えそうですね。

Label.css - Label every thing!

usablica/label.css · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2