iTunesの曲名表示ウィンドウっぽいCSS

window.jpg

iTunesの曲名が表示されるウィンドウライクなデザインをdivとp、spanタグでマークアップしてデザインしてみました。(X)HTMLコードは以下のようなシンプルなものです。


<div id="window">
<p><span>You Never Give Me Your Money / The Beatles</span></p>
</div>

CSS側はこんな感じです。

div#window {
	height: 46px;
	background: url(../img/bg01) repeat-x left top;
}
div#window p {
	margin-top: 5px;
	margin-left: 300px;
	background: url(../img/left.gif) no-repeat;
	line-height: 36px;
	float: left;
	display: inline; /* for win ie6 bugfix */
}
div#window p span {
	margin-left: 12px;
	padding-right: 12px;
	background: url(../img/right.gif) no-repeat right top;
	line-height: 36px;
	float: left;
}

仕組みはpタグには左のウィンドウ画像、spanタグに右のウィンドウ画像を背景に表示させています。pとspanのline-heightにウィンドウ画像の高さを指定して上下のセンタリングをします。pにfloat:leftを指定し、spanにもfloat:leftを指定しspanでくるんだ文字をpに追従させる形にします。さらにspanに左のウィンドウ画像分の幅をpadding-rightに指定します。

floatを使ってるためセンタリングが出来ないのでpタグの左マージンで位置は調整します。

Download