見出しの幅を可変にする ~親要素の幅100%で可変

リキッドレイアウトなどで、ウィンドウの横幅が変わる場合で、見出しの幅をその親要素の幅いっぱいに流動的に長さを変えたいときがあります。

見出しの背景画像は、予想される最大の長さで作成しておきます。今回、高さ57px、幅1510pxの背景画像を作りました。

(X)HTML

<div id="wrapper">
<h1 class="header1"><span>のびーる見出し</span></h1>
</div>

CSS

* {
padding:0;
margin:0;
}
#wrapper {
width:85%;
margin:auto;
}
h1.header1 {
background:url(img/h1bgimg01.jpg) top right no-repeat;/*背景画像を右端から置く*/
height:57px;/*背景画像の高さを指定*/
line-height:57px/*背景画像の高さを指定*/;
width:100%;
font-size:20px;
max-width:1510px;/*作成した背景画像の横幅*/
}
h1.header1 span{
display:block;/*ブロック化*/
font-size:40px;
color:#000;
font-weight:600;
letter-spacing:5px;
margin-right:15px;/*親要素h1の背景の右端を見せるため*/
padding-left:15px;/*右端の隙間とあわせるため*/
text-align:center;
background:url(img/h1bgimg01.jpg) top left no-repeat;/*背景画像を左端から置く*/
height:57px;/*背景画像の高さを指定*/
line-height:57px;/*背景画像の高さを指定*/
max-width:1510px;/*作成した背景画像の横幅*/
}

▼サンプルはこちら


まとめていうと、内側のスパンで、見出しの内容の幅に応じて、背景画像が左端から始まります。見出しの内容が終わった場所で、ぶつっと背景画像がきれてしまうので、右端の角丸が表現できてません。
親要素のh1で右端から始まる画像が置いてあるので、その部分を見せるために、スパンにmargin-rightを指定しています。この幅は、角丸が表現できる以上のスペースをとります。
すると、この分だけ、見出しの右端にスペースができてしまうので、その同じ分だけ、スパンにpadding-leftを指定して、スペースをあけて、バランスをとります。
h1の背景画像は、左端はぶつっといきなり終わっているはずですが、内側のスパンの背景画像があるので、その場所は隠れています。

ということで、伸び縮みする背景画像ができましたが、予想以上に横幅を伸ばされてしまう可能性があります。とーっても大きいモニタを持っている人がいたりすると…。そんなとき、背景画像が継ぎ足しに表示されないよう、「これ以上幅を長くしないでね」という指定をします。これがmax-widthです。ここで準備した背景画像の横幅を指定しておきます。

なんとか、できて、ほぅっ、とした見習です。