CSSでページ毎に見出し画像を変更したい

質問

こんにちは。
今CSSの勉強をしながらサイトを作っています。
まだまだ基本知識くらいしかなく応用出来ず困っています。
各ページのタイトル（見出し<h●>）を背景画像に設定して表示していますが、タイトルがページ毎に違うため１ページ毎にCSSを作っています。各ページの見出し画像を一つのCSSまとめて記述する方法はないでしょうか？
よろしくお願い致します。

回答No.3

SAYKA · ベストアンサー

うーん　そのままじゃぁ　無理だね
そういう場合は共通になる物だけ纏めておいて　他は個別指定するしかないよ

こんな感じ
//-----css
h1
{
　font-size: 9px;
　color: #FFFFFF;
　background:no-repeat;
　margin: 10px 0px;
　padding: 0px;
　height: 44px;
　width: 595px;
}
.GAIYOU { background:url("../image/gaiyou.jpg") }
.ENKAKU { background:url("../image/enkaku.jpg") }

<!-- HTML -->
<h1 class="GAIYOU">会社概要</h1>

勿論画像のサイズがそれぞれ違うならサイズ指定はh1の方に書いたらだめだよ

お礼

ありがとうございす。出来ました！！
初心者なのでソースが書いてあり大変参考になりました。

回答No.2

tsunami02

ようはページごとでH１の背景画像を変えたがスタイルの指定は一つにしたいのですね。
簡単です、まず共通のh1背景バーをテキスト画像を抜いて用意します。
あとは左からテキスト画像の部分までの画像を各ページ分、用意し重ねて入れ替えていけばスタイル指定は一つですみます。

お礼

ありがとうございます。
CSS初心者なのでソースをちょっと難しそうです。

回答No.1

SAYKA

CSSを外部にして読み込めば良いんじゃない？

外部CSS
http://www.tohoho-web.com/css/basic.htm#Link

補足

説明が悪くてすみません。
外部CSSで読み込んでいます。
例えば会社概要のページの見出し１<h1>の背景に「会社概要」とデザインされたタイトル画像を背景にして入れます。
他のページで沿革ページには見出し１<h1>の背景に「沿革」とデザインされたタイトル画像を背景にしていれます。
※テキストは非表示にしています。
これをCSSで記述するとこんな感じ↓ですが
#main h1 {
font-size: 9px;
color: #FFFFFF;
background: url(../image/ttitle_con.gif) no-repeat;
margin: 10px 0px;
padding: 0px;
height: 44px;
width: 595px;
}
各ページはここの部分は全て<h1>なので１つの画像だけで良ければ上記のような記述で良いと思います。が、同じ場所の同じ<h1>の別々の画像指定を１つの外部のCSSでの記述はどうすれば良いか困っています。
説明が下手ですみませんがよろしくお願いいたします。