サイトによくある枠線の見出し画像について

質問

下みたいな感じの見出しを作ろうとしています。

□新着情報■
（※□と■は違う画像と思ってください。）

（見出しというのは、教えてgooのトップ画面（http://oshiete.goo.ne.jp/）でいうと、左の「ようこそ教えて！gooへ」とか「カテゴリ一覧」の部分の枠線の上にある部分をここでは「見出し」と言っています。）

上の見出しをphotoshopで一枚の画像としていちいち画像を作るのが王道という気がしますが、
たとえば
□ニュース■
と変わったときに画像を作り直すのが面倒なので、できれば
(1)□
(2)「新着情報」というテキスト＋背景画像の繰り返し
(3)■
とし、(1)＋(2)＋(3)をスタイルシートで設定したいと思っています。
質問は、
１．上記のようにスタイルシートの設定で見かけ上、(1)と(2)と(3)は一枚の絵に見せたいのですが、そんなことは可能でしょうか？
２．できたとしてもブラウザが変わったときを考えたとき、あまり推奨されない方法でしょうか？

回答No.2

metametamu · ベストアンサー

１．　できますよ

２．　多分推奨されないのはタグの扱いじゃないでしょうか。
やるとしたら

<h3><span><span>ニュース</span></span></h3>

h3{
background:url(A.jpg) no-repeat 0 0;
}

h3 span{
display:inline-block;
padding:0; 10px;
background:url(B.jpg) no-repeat right 0;
}

h3 span span{
height:30px;
line-height:30px;
background:url(C.jpg) repeat-x 0 0;
}

こんな感じの指定とかになると思いますが、あんまりスマートじゃないなぁと。
IE7以下を無視してもいい頃になれば:before、:afterが使えるのでシンプルにいけるんですけどね。

回答No.1

noname#140045

質問ですが、「新着情報」って無いですが・・・

□と■、違う画像はいいですが、何を言ってるの？

□ニュース■
これも無いですが、「何から、どう」変わったら、という意味なのでしょうか。

※私がわからないだけならば、特に放っておいて構いません。