webサイトにバッチの設置
#15 バッジを付けてみよう
http://dotinstall.com/lessons/website_html/9015
を参考に
画像の右上にバッチを設置
<div class="sample"> の中に <span class="badge">new</span>
を作成
これをCSSで設定する
class="badge" なので
.badge{
}
で設定を書いていく
background:red; color:white; font-size:10px; padding:2px 4px 3px;
とする
上から順番に
背景色を赤
文字の色を白
フォントサイズは１０px
余白は 上２px 左右４px 下３px
とする
padding の引数の数と、設定の変化は
http://www.htmq.com/style/padding.shtml
を参考に
これで画像の上に赤いバッジができる
このバッジを画像の右上に重ねるには
このバッジの
親要素に設定をすることになる
今回なら
<div class="sample">
がバッジの親要素なので
position:relative;
を追加する
また、バッジ側である
.badge{
}
も
position:absolute;
を追記する
これで後はバッジの場所を設定することができるので
.badge{
}
のほうで
top:-5px; right:-5px;
とすると、画像の右上に重なってバッジが表示される
もし、右下にしたいのなら
bottom:-5px; right:-5px;
というようにする