Label.css - 画像の上にラベルを自在に配置 MOONGIFT
Webサイトを作っていて画像はよく使われます。さらに画像にはキャプションとして説明をつけてあげることでより分かりやすいものになります。説明がない画像は一見すると何のことか分からない場合もあります。 そこで使えるのがLabel.cssです。単に画像の下に説明をつけるだけでないキャプションの使い方ができるようになります。 Label.cssの使い方 一例です。縦、横ともに中央寄せ。 左下への配置。 右上。 中央の右寄せ。 さらに表示の仕方を変更できます。分かりづらいですがフロートで表示しています。 写真の上にキャプションを重ねることで、視点の移動が少なくなり、より訴求できるようになります。その場所も写真によって効果的な配置が考えられるでしょう。ブログやメディアサイトで積極的に使っていきたいソフトウェアです。 Label.cssはCSS3製のオープンソース・ソフトウェア（MIT License）
[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート（フェードも可） -Label.css
デモ：ホバー時にフェードで表示 Label.cssの使い方 使い方は簡単で、ラベルはclassとdata属性を加えて指定するだけです。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> <link rel="stylesheet" href="css/label.css" /> </head> Step 2: HTML 画像を配置するimg要素にfigureを加えます。 <figure> <img src="image.jpg" alt="代替テキスト"> </figure> figureにclassでlabelを加え、配置するポジションを指定します。 <figure class="label inside bottom"> <img src="image.jpg" alt="代替テキスト"> </figure> 画像の上に配置するテキストをdata属
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
