CSSでNEWマークを作る。

CSSを使った小技です。
NEWマークやUPなどのマークを作るとき、いちいち画像を作らなくてもCSSで簡単に作れます。
例えば

NEW 更新しました!

次のページへ

こんな感じ。
画像を使うと少なくとも1KBくらいのファイルサイズになりますが、これだとわずか数バイト、altも必要ないし色の変更もカンタンです。


参考までに上のマークのスタイル設定は、下記の様になります。
.new{
width:50px;
text-align:center;
font-size:14px;
padding:3px;
color:#ffffff;
background-color:#cc3366;
}
.next{
width:18px;
text-align:center;
font-size:14px;
padding:2px;
color:#ffffff;
background-color:#db7093;
}
任意の文字をspanタグでくくってclassで指定してやればいいのです。
キレイに見せるコツとしては、幅や、文字の大きさなどをピクセル値で固定してやること、text-alignで中央に寄せること、paddingを適切にとること。
文字をくくるタグはdivを使うと改行されてしまうのでspanを使うことなどです。
idは1ページに一度しか使えないので、こういった汎用のものを作るときは必ずclassで作っておきましょう。