複数行に対応したh1タグの作り方

質問

すいません。ＣＳＳで困っておりまして、教えて頂けないでしょうか・・

<h2>おすすめ商品</h2>

という表記で例えば↓のサイトのおすすめ商品のような
タイトルを作ろうとしています。
http://uegon.net/
文字部分は画像ではなくテキストです。
それに背景の帯が入った状態にしたいのです。

それで、このタイトルが長い場合があって、２行で表示される
こともあります。その場合、背景の画像も自動で２行分に
高さが広がるようにしたいのですが、
<h2>のCSSだけで行うことは可能でしょうか。

出来ないとしたらどのようにしたらいいでしょうか？

よろしくお願いしますm(_ _)m

回答No.3

noname#137826 · ベストアンサー

私自身は修飾用に要素を加えるのはかっこ悪いと思っているので^^;なんとかしてみたいと思ってしまいます。

例えば、

<h2>おすすめ商品</h2>
<p>おすすめ内容</p>

のように h2(見出し)の後に必ずp(内容)が続くとします。この場合、

・下のグラデーション画像の高さの分だけp要素を上にずらし、
・上にずらした分だけpaddingでpの内容を下に戻し、
・p要素の背景として下のグラデーション画像を適用する

という方法がとれると思います。具体的には下のような感じでしょうか。
(グラデーション画像の高さを10pxと仮定しています。)

---
h2 {
position: relative;
margin-bottom: 0;
border: 1px solid #000;
background: url('background_bottom.png') repeat-x;
z-index: 2;
}
h2 + p {
position: relative;
top: -11px;
margin-top: 0;
padding-top: 21px;
background: url('background_bottom.png') repeat-x transparent;
z-index: 1;
}
---

(IEが隣接セレクタに対応してないので、その場合はh2に続くp要素にクラス指定をすることになります。)

他の部分に影響が出てしまう可能性もありますが、とりあえずは見出し部分に上下のグラデーションがつけられるかと思います。

お礼

なるほど。。これはすごい技ですね。。
勉強になります！
＋というのは使ったことがなかったので
こういう風に使うのかと・・・
これでやりたいことができそうです。
ありがとうございます！

回答No.2

noname#137826

上からのグラデーションに、1pxの枠も組み合わせるのであれば、
h2 {
background: url('***') repeat-x left top;
border: 1px solid #xxxxxx;
}
(グラデーションが下からなら 'top' を 'bottom' に変更します)
でいけるのでは？

しかし、例えば、グラデーションが上下両方からだったりすると上記の例ではうまくいかないわけです。具体例に依存すると最初に申し上げたのはこういう事情のためです。

修飾用の技巧というのは、例えば、背景画像を貼り付けるためだけにdivを増やしたり、tableを使ったり、というのがあるかと思います。それをすることの是非はさておき、どのような方法をとるかは、どのようなことをしたいのかという具体例によって決まるかと思います。

お礼

何度もすいません。
勉強になります。

実はグラデーションは上下からを想定しております。
ですので、真ん中の部分だけがうまく高さがのびて
くれるとありがたいのですが・・
そうなるとtableなどを使用する他無いわけですね？

分かってきました。ありがとうございます！

回答No.1

noname#137826

背景画像がどのようなものかにもよって、解決方法が異なる可能性があるかと思います。

例えば、例として出された「おすすめ商品」のように、上にオレンジの線を入れたい(これがグラデーション画像になったりするかもしれません)ということであれば、h2 { background-repeat: repeat-x; } とすればよいでしょう。
さらに、ハートマークのようなアイコンを最初だけに入れたいということであれば、アイコンを含めた帯画像を十分横長に作っておき、 h2 { background-repeat: no-repeat; } とすればよいのではないでしょうか。

もっとずっと複雑なことをしたいとなると、<h2>だけでは足りなくて、修飾用の技巧をこらすということになるかもしれませんね。

お礼

早速ご回答いただきまして
ありがとうございます！

実際作りたいのはグラデーションが入ったものです。
そしてタイトル帯は1pxの枠で囲まれたようなものです。

修飾用の技巧というのが気になりますが、
どのようなものでしょう？