文字量によって背景を伸縮させるタイトルバー

文字量によって背景画像を伸縮させる方法です。タイトルバーやメニューをマウスオーバーしたときの背景画像にも使えるので紹介します。

画像を用意

elastic_bg_left.png（左部分）

elastic_bg_right.png（右部分）

次に、HTMLを記述。

HTMLを記述

 
<p><span>世界一短い国名：Japan, India, Spain</span></p>
<p><span>世界一長い国名：the United Kingdom of Great Britain and Northern Ireland</span></p>
 

<p>タグの中に<span>タグを入れます。この<span>タグがポイントです。<p>タグなどのブロック要素を入れますと横幅いっぱいに伸びますので、インライン要素である<span>タグを入れることで文字量に応じて幅が変わるようにします。

そして、CSSを記述。

CSSを記述

 
p {
    margin: 0 0 10px 0;
    padding: 0px 0px 0px 15px;
    background: url(elastic_bg_left.png) left center no-repeat;
}
 
p span{
    padding: 20px 20px 20px 0px;
    background: url(elastic_bg_right.png) right center no-repeat;
    color: #FFFFFF;
    font-size: 0.8em;
    
    zoom: 1;	/* for IE */
    display: table-cell; /* for modern browser */
}
 

→文字量によって背景を伸縮するサンプル

IEに関して、<span>タグはインライン要素ですので、「padding:20px 20px 20px 0px;」を指定しても効きません。このままだと背景が途切れてしまいますので、<span>タグに「zoom:1;」を指定して「padding」を効かせるようにします。モダンブラウザに関しても、挙動がおかしいので「display: table-cell;」を指定して解決しています。

「幅と高さを指定できるインライン要素」を作り出すには「display:inline; zoom: 1;」と「display:table-cell;」で実現できるので、覚えておいたら結構役に立ちますよ。