h1等の背景画像と文字の表示サイズについて

質問

お世話になります。ＣＳＳ初心者です。よろしくお願いします。
見出しh1タグに背景画像（角丸の長方形で内部はグラデーションのtest.gif)を表示させることは出来るのですが
■ＨＴＭＬ
<h1>テスト見出し</h1>
■ＣＳＳ
h1 {background: url(test.gif) no-repeat;}
これだとtest.gifの大きさ（px)をかなりぴったり計算しないと駄目です。しかもＩＥの文字の表示サイズを変えると文字はサイズは変わるのですが背景サイズが変わりません。
YahooオークションＴＯＰページの1/4ほど下の部分に「話題のキーワード」なるh2見出しが角丸長方形で内部グラデーションで表示されていますが、ＩＥの表示文字サイズを変えても背景の角丸長方形ごと変化します。ページソースを見ても<h2>話題のキーワード</h2>とあるだけです。このようなことをスタイルシートで実現するにはどうするのでしょうか？
よろしくお願いいたします。

回答No.1

abril · ベストアンサー

> YahooオークションＴＯＰページの1/4ほど下の部分に「話題のキーワード」なるh2見出しが角丸長方形で内部グラデーションで表示されていますが、ＩＥの表示文字サイズを変えても背景の角丸長方形ごと変化します。ページソースを見ても<h2>話題のキーワード</h2>とあるだけです。

ソースを見ました。何というか…恐ろしいやり方ですね。リピートさせない角丸の四隅の画像とリピートさせる塗りつぶし部分の画像毎にdivでボックスにし、その何重ものdivでh2（こちらにはパディングの指定のみ）を入れ子にするという正直申し上げて美しくなく論理構造上も無意味な入れ子の多い力業です。個人的にはお奨めしたくない方法ですね…

> このようなことをスタイルシートで実現するにはどうするのでしょうか？

幾つかやり方はあると思います。角丸の場合、文字サイズの変更によってレンダリング領域が変動しても構わない箇所（リピートが繰り返されてもよい）と、角丸そのものの部分（リピートしない部分）を上手く分割して、見出しタグ（ここではh1としておきます）に直接指定するスタイルと、その前後の要素に振り分けるスタイル…というのが”可能な文書構造であれば”、結構簡単にできます。

つまり、

<p class="hoge1">直前の要素</p>

<h1>見出し</h1>

<p class="hoge2">直後の要素</p>

という構造であれば、どの様な（例えばグラデーションの有無やタイプなど）画像を背景にしたいかにもよりますが、Yahooの様に上端の部分だけ白っぽくハイライトが入り（【A】）、そこから下は均一な塗りつぶし【B】、そして均一な塗りつぶしで且つ下端の角が入る【C】、という様な画像であれば【A】部分の画像（上左と上右の角を含む）をまずトリミングして、それをhoge1の背景画像として下揃え・リピート無しで指定します。
次に、【B】部分（角なし）の画像をh1の背景画像としてリピートさせて指定します。
最後に終点【C】の部分をhoge2に【A】とは逆に上揃え・リピート無しで指定します。
この時、hoge1には下パディングを適宜取り・下マージンは0、hoge2には逆に上パディングを与えて同様に下マージンは0、とすると表示上は：

<p class="hoge1">直前の要素</p>
（余白）
（上左と上右の角を含む上端の画像）
<h1>見出し（背景画像の均一でよい部分がリピートしている）</h1>
（下左と下右の角を含む下端の画像）
（余白）
<p class="hoge2">直後の要素</p>

ただし、先程申し上げました通りあくまで条件が整う場合のやり方です。文書構造として適切な要素が見出しの前後になかったり、グラデのタイプによってはこの方法では実現できない場合もあります。その場合は、ある程度（Yahooオークションのはちょっとやり過ぎに思えますが…）h1を入れ子構造にするのもやむを得ないかもしれません。

お礼

早速のご回答ありがとうございます。理解できました！（つもりですが…）なるほどＹａｈｏｏのh2の上下に連なってる大量の<div></div>はそういうわけだったのですね！私のような初心者が見てもすごいというか…（見苦しいというか）。たしかに条件にもよりますが教えていただいた方法のほうがはるかにすっきりと美しいですね。でも両方とも自分のものにしたいのでこれから実験してみようと思います。ありがとうございました。

回答No.2

noname#83877

私は1さんとは違いdivで囲う方法の方をオススメします。（といってもspanを使っていますが）
divの乱用は意味がないですが、今回の場合、レイアウトを実現するためのデメリットが無駄な要素の追加という点だけで済むので。
このあたりはdiv病とか、htmlの意味とかで調べられると良いと思います。

やり方は

<h1><span><span>テスト見出し</span></span></h1>

h1 {
width:800px; /* 横幅を指定 */
background:url(image1.gif) no-repeat 0 0; /* ボックスの上側 */
padding-top:10px; /* image1.gifの高さ分のpadding-top */
}

h1 span {
display:block;
background:url(image2.gif) no-repeat 0 100; /* ボックスの下側 */
padding-bottom:10px; /* image2.gifの高さ分のpadding-bottom */
}

h1 span span {
background:url(image3.gif) no-repeat 0 0 #ff0; /* グラデーション部分と、画像が切れた時の背景色 */
padding:0; /* 文字の位置を調整 */
}

画像の作り方ですが、実寸大の角の丸いボックスの画像を作り（グラデーションまでつけておいてください）、image1とimage2は上と下の部分をカットしたもので、image3は残りの部分です。
現在のcssの限界として、image3のグラデーションの領域は画像で固定になってしまいますが、グラデーション画像の大きさを超えてフォントサイズを拡大することを考えて、グラデーションの終わり部分からを背景色に切り替えるようにしています。なのでh1 span spanには、背景色も一緒に指定してください。

お礼

ご回答ありがとうございます。なるほどこちらの説明もすごくわかりやすいです！画像の作り方までありがとうございます。たった１つの角丸背景でも色々なアプローチがあるのですねぇ。当方、昔はビルダーなどでtableばかりの入れ子でＨＰは何回か作っているのですが、最近ＣＳＳの勉強をはじめて、これは便利ですごい（←無知すぎ）と驚き、角丸背景とかも要素に簡単な属性を記入するだけで実現できるのかと思っていました。（角丸背景１個用意してそれの幅と高さを％で指定みたいな…ｗ）今後勉強するにつれさらに疑問は深まると思いますが、どうしてもわからないときはまたこちらでお世話になりたいと思いますのでその時はよろしくお願いいたします。