画像とかの上に手軽にラベルを張れるcssライブラリがあったのでご紹介です。
動きとかは公式サイト見ていただくとわかりやすいかも！
公式サイト
使い方
ラベルを置きたいタグを
<figure class="label inside top" data-label="ラベルだよ">
<div>ここがラベルを置きたいエリア</div>
</figure>
みたいな感じでclass="label"で囲んであげればいいらしい。
指定できる位置
1. top
2. middle
3. bottom
4. right
5. left
6. inside
7. outside
右上なら、class="label top right"みたいにしてあればよいよう。
指定できるアニメーション
1. float
2. fade
試してみる
取り敢えずダウンロードしてくる。
$ wget https://github.com/usablica/label.css/archive/master.zip
$ unzip master.zip
公式サイトにdownloadボタンあるのでそっちからでもOK
解凍したらこんな感じの構成になっていた
label.css-master --- sass/
|- less/
|- css/ --- label.css
|-- label.min.css
|- config.rb
|- README.md
cssディレクトリのしたに、label.cssとlabel.min.cssがあるので、読み込ませる。
index.html
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html: charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./label.css-master/css/label.min.css">
</head>
<body>
</body>
</html>
試しにreactの画像でやってみる。
index.html
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html: charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./label.css-master/css/label.min.css">
</head>
<body>
<figure class="label inside top right float" data-label="これはreactの画像です">
<img src="https://facebook.github.io/react/img/logo.svg">
</figure>
</body>
</html>
わかりづらいけど右上のラベル。
かなり手軽に使えていい感じでした！