内容に応じて伸び縮みする見出し～内容の長さに応じた幅の算出

内容に応じて伸び縮みする見出し背景を作ろうと思います。

(X)HTML

<div id="wrapper">

  <h1 class="header1"><span>のびーる、ながーい見出し</span></h1>

  <p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>

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

  <p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>

  <h1 class="header1"><span>見出し</span></h1>

  <p>内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう内容がないよう</p>

  </div>

CSS

* {

padding:0;

margin:0;

}

#wrapper {

width:900px;

margin:auto;

}

h1.header1 {

background:url(img/h1bgimg01.jpg) top right no-repeat;/*背景画像を右端から置く*/

height:57px;/*背景画像の高さを指定*/

line-height:57px/*背景画像の高さを指定*/;

float:left;/*内容に応じた幅を算出させる*/

}

h1.header1 span{

display:block;/*ブロック化*/

font-size:20px;

color:#000;

font-weight:600;

letter-spacing:5px;

/*margin-right:40px;親要素h1の背景の右端を見せるため*/

margin-right:20px;/*親要素h1の背景画像の右端を見せるため*/

padding-left:40px;/*背景画像の左端のマークの上にテキストを書かないため*/

background:url(img/h1bgimg01.jpg) top left no-repeat;/*背景画像を左端から置く*/

height:57px;/*背景画像の高さを指定*/

line-height:57px;/*背景画像の高さを指定*/

}

p {

clear:both;

}

▼サンプルはこちら

大体は、親要素いっぱいに広がる見出しのときと同じですが、ここでは、h1の幅が親要素の100%ではなく、内容に応じて伸び縮みします。
ポイントは、h1にfloatをかけるということです。widthを明示的に書かず、自動に算出してほしいわけですが、普通、widthをautoにした場合、親要素の100%を算出します。
そうではなく、内容に応じて伸び縮みさせるのですが、これはshrink-to-fitといいます。CSS2.1の仕様によると、floatがかかっている要素については、親要素の100%ではなく、shrink-to-fitさせるのです。

なんだか、よくわからないような気もするけど…。これって、応用利きそうな感じです。それにshrink-to-fitって、フィットさせるべく、縮めるっていみですよねぇ。と、shrinkの意味を辞書でひいてしまう見習です。

2012年1月26日1:45 AM| カテゴリー： HTMLとCSSのコード,見習い奮闘記| コメント (0)