みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

投稿日時 - 2007-10-26 18:01:54

QNo.3463266

困ってます

質問者が選んだベストアンサー

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

こんな感じ
//-----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の方に書いたらだめだよ

投稿日時 - 2007-10-26 21:14:01

お礼

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

投稿日時 - 2007-10-27 13:18:00

ANo.3

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

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

投稿日時 - 2007-10-26 20:54:28

お礼

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

投稿日時 - 2007-10-27 13:16:43

ANo.1

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

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

投稿日時 - 2007-10-26 18:29:15

補足

説明が悪くてすみません。
外部CSSで読み込んでいます。
例えば会社概要のページの見出し1<h1>の背景に「会社概要」とデザインされたタイトル画像を背景にして入れます。
他のページで沿革ページには見出し1<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>なので1つの画像だけで良ければ上記のような記述で良いと思います。が、同じ場所の同じ<h1>の別々の画像指定を1つの外部のCSSでの記述はどうすれば良いか困っています。
説明が下手ですみませんがよろしくお願いいたします。

投稿日時 - 2007-10-26 18:53:51

あなたにオススメの質問