今回の記事は2008-12-07CSS Spriteで表現する角丸 | Commit Labの続きです。
これはCSS Spriteというテクニックを利用して作った角丸boxです。従来通りならば複雑になりがちな角丸のマークアップを、CSS Spriteで作る事ことによりシンプルで無駄なタグのない記述のhtml+CSSで角丸を表現しています。(IE5,5に対応するときはどうしてもdivが1つ増えますが)
文字の拡大にあわせてboxの縦が伸縮しますので、すぐにフレキシブルな角丸を表現出来ます。またデザインにおいても、htmlとcssのみで作られているので思いのままに装飾する事ができます。
今回は前回の問題点を修正しました。h2のheightをpxで固定していたのはやめて、line-heightのみで高さを調整しました。これで文字を拡大しても、H2から文字がはみ出す事はありません。
またH2にbackground-colorを与え、どれだけ拡大しても背景が途中で途切れないようになりました。
それに伴いCSS Spriteの画像を変更してます。横幅が1.5倍になりましたが、サイズは10バイト少々増えた程度です。またそれに合わせてCSSのbackgroundを変更しました。
今回使用している画像
sample（1色のみのサンプル）
sample2(5色のバリエーション)
Download:kadomaru.zip
動作確認：IE5.5 IE6 IE7 Firefox2 Firefox3 Opera9.62 Safari3 chrome0.4
body, div, address, p, h2 {
margin: 0;
padding: 0;
}
body {
font:100%/1.231 Arial, Helvetica, sans-serif;
padding-top: 30px;
text-align: center;
}
.contentbox {
width: 350px;
padding-bottom: 10px;
margin: 0 auto;
background: url(scbb.png) right bottom;
}
h2 {
width: 350px;
color: #fff;
font: bold 108%/1.9 'メイリオ',Meiryo,;
text-align: left;
text-indent: 1em;
background: #2C6EBD url(scbb.png) no-repeat left top;
}
* html h2 {
padding-top: 3px;
line-height: 1.8;
}
.IE55 {
width: 350px;
background: url(scbb.png) repeat-y center top;
}
p {
letter-spacing: 0.1em;
line-height: 1.5;
font-size: 83%;
padding: 7px 15px 0px;
text-align: left;
}
img {
float: left;
margin: 10px 15px 0px 10px;
}
.justify {
text-align: justify;
text-justify:inter-ideograph; /* IE独自 */
}
<div class="contentbox"> <h2>ipod nanoのアイコン</h2> <div class="IE55"> <p class="justify">テキスト段落1</p> <p class="justify">テキスト段落2</p> </div> </div>
IE5.5に対応しない場合はdiv=”IE55″ごと削除が可能。しかしその場合はDIV=”IE55″のbackgroundをPに設定(コピペ)する必要がある。