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

Posted by poundhound on May 16, 2008

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タグの左マージンで位置は調整します。

zipファイルも用意しました。(psdのリソース入り) tips01.zip

Categories:CSS Tags:

Comment(0) | Trackback(0)

Category:CSS の最近の記事

Trackback(0)

Trackback URL: http://www.nk0206.com/mt/mt-tb.cgi/372

Leve comment

My Tweet

    @poundhound

    Google Adsence

    • Movable Type 5 Webサイト作成ガイドVolume 1