• 締切済み

それぞれのページに別の背景を指定することはできますか?【CSS】

はじめまして。 現在CSS勉強中のものです。 最近いろいろなサイトを見て勉強しているのですが、背景をtopページと違う画像を使い、TOPページとは違う作りにしたいと考えているのですが、どうすればよいのか見当もつきません。 どうかよろしくお願致します。

noname#52036
noname#52036
  • HTML
  • 回答数5
  • ありがとう数9

みんなの回答

  • goldfox
  • ベストアンサー率49% (123/249)
回答No.5

>スタイルシートファイルは1つのサイトに1つという変な固定概念?ができてたようです・・・ idを使いましょう。 それぞれのページのbody要素にid名をつけます。 <body id="index"> とこんな感じ。 外部スタイルシートに、それぞれのページのid名を指定して背景をセット。 同じcssファイルをそれぞれのページで呼び出せば、 あとはcssファイル1枚を書き換えるだけで、すべてのページの背景が思いのままです。 #index{background-image:url(背景画像);} #top{background-image:url(背景画像);} #menu{background-image:url(背景画像);}

  • abril
  • ベストアンサー率69% (388/560)
回答No.4

> 実際に見かけたサイトは以下のサイトになります。 > http://www.edenviaggi.it/moduli.asp?modulo=offerte > > 微妙に背景の写真(ビーチと船)が違うのですが・・・ 基本は同じものの様ですが、それぞれサイズの違う画像を使用していますね。 > ちなみにCSSファイルを除くことってできるんですね・・・ > 早速調べてみます。 > 見れるのは、htmlソースだけだと思っていました。 「htmlソース」が見られる状態なら、そのHTMLファイルが参照しているたいていのファイルは閲覧可能ですよ。CSSでもJavaScriptでもイメージでも。 このサイトの場合、「htmlソース」の<head>中に3種類の(外部ファイル)CSSが参照されています。他人様のサイトをここで詳しく解説するのは支障がありますので控えますが、その内の一番目に参照されいてる"style_e~略~i.css"を見てください。それを見れば、質問者様の仰る背景画像が指定されているのが、<body>ではなく、<body>直下のメインのコンテナブロックを配置する<div>に対してであり、それに数種類のIDを儲け、それぞれのIDで背景にする画像を変えているという事がわかります。HTML側でファイル別の各IDを記述することで、対応する画像が背景として表示されるというわけです。 今までの発言から考慮すると…質問者様の為を思ってアドバイスさせて頂きますが、まだCSSを学ぶ段階ではなく、HTMLファイル内の<head>内の構造やそこに書かれている事の意味を正しく理解できる様になるのが先ではないかと思われます。現在の状態では、泥縄式になってしまいそうな懸念があります。まずはHTML文書の理屈や構造の把握、それをクリアしてからCSS、です。

  • tom0120
  • ベストアンサー率26% (367/1390)
回答No.3

基本的にはCSSは外部の方がいいと聞いたので、そちらで作っていたのですが、bodyに直接背景を指定すると、すべてのページで同じ背景が指定されてしまって・ なので、必要な枚数(種類)、作ればいいんですよ・・・。

noname#52036
質問者

お礼

ありがとうございます。 恥ずかしながらやっと今気づきました・・・ スタイルシートファイルは1つのサイトに1つという変な固定概念?ができてたようです・・・ 本当にありがとうございました。

  • tom0120
  • ベストアンサー率26% (367/1390)
回答No.2

見当もつきません。・・・ということなので、 細かな話をしてもしょうがないので、概念だけ。 ・内部css なら、ページごとに、作ればよい。 ・外部css なら、ページごとに、セットでHTML本体と外部cssを作ればいいです。 サイトは無料ですが、cssの参考書、一冊買って、 「雛形」通り、1回試作すれば、理解が早いですよ。 なんの分野もそうですが・・・ 「雛形」を用意して、まねる、そして、カスタマイズするのが 理解しやすいですね。

noname#52036
質問者

お礼

ありがとうございます。 雛型ですか・・・一度近くの本屋さんへ行って調べてみます。 基本的にはCSSは外部の方がいいと聞いたので、そちらで作っていたのですが、bodyに直接背景を指定すると、すべてのページで同じ背景が指定されてしまって・・・ 色々調べてみます。 本当にありがとうございました。

  • abril
  • ベストアンサー率69% (388/560)
回答No.1

> 最近いろいろなサイトを見て勉強しているのですが、 どうやって勉強されていますか? > 背景をtopページと違う画像を使い、TOPページとは違う作りにしたい ご覧になっている「いろいろなサイト」の中には、上記の様なスタイルのサイトはありませんか?多分、その様な実例をご覧になっているからこそ、実現方法をお知りになりたいのだと思いますが。 であれば、 > どうすればよいのか見当もつきません。 と、早々に匙を投げず、まずはご覧になっているサイト中にご自分がやりたいイメージと同じものがあったら、そこで使用されているCSSファイルを覗いて検証して見ることです。そこから簡単に手がかりが得られます。 とにかくそこがスタート地点です。その上で、読み解けない箇所があったら、改めて、サンプルを引き合いにしながら質問をされる事です。 この質問自体に答えることは簡単すぎるほど簡単なのですが、質問者様はこれまでの質問でも「CSSを勉強されている」という姿勢でいらっしゃる様なので、敢えてこの様にアドバイスさせて頂いています。

noname#52036
質問者

お礼

いつも本当にありがとうございます。 実際に見かけたサイトは以下のサイトになります。 http://www.edenviaggi.it/moduli.asp?modulo=offerte 微妙に背景の写真(ビーチと船)が違うのですが・・・ ちなみにCSSファイルを除くことってできるんですね・・・ 早速調べてみます。 見れるのは、htmlソースだけだと思っていました。 本当にありがとうございます。

関連するQ&A

  • CSSでの2つの背景画像指定

    現在、Wordpressでサイトを運営しています。 既に背景画像を以下の感じで指定しています background:#f0f0f0 url(images/背景画像) repeat; そこで、この背景画像を残した状態で、新たに左側に20px幅程度の画像を 上から下までfixedで付け足したいと考えております。 ところが、現在の背景画像を残したままでどうしても画像の追加が出来ません。 たとえば、上記CSSタグに追加で background: url(images/追加画像) repeat-y fixed left top; を記述しますと、最初の画像が消えてしまいます。 両方の画像を有効にするには、どのような記述にすればよいのか アドバイスを宜しくお願い致します。

    • ベストアンサー
    • CSS
  • ページがスクロールするのについてくる背景画像

    わからなくて困っています。 どなたか分かる方教えてください。 トップページのトピックス部分をインラインフレームで表示させる作りにしました。 インラインフレームの表示部分は310*200です。 表示させる部分なので、トピックスの背景も310*200で作ってcssで固定させました。 表面的にはOKなのですが、ページをスクロールすると背景画像が見えなくなってしまいます。 background-repeat: no-repeat; にしてあるのですが、repeatにできない画像なので、困っています。 ページをスクロールするとついてくる背景画像にしたいのですが、どうすればできますか? cssかjavaでできるでしょうか? 教えてください。 よろしくお願いします。

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

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

  • CSSでよく作られる背景の作り方を教えてください。

    お世話になります。CSS初心者の者です。 もしかしたら基本的な質問だと思いますが初心者の私には分からなかったのでどうか詳しい方教えてください。 現在ウェブサイトを作成しているのですがいろんなサイトでよく見るような中央揃えで伝えたい情報を載せて、左右には背景色なり背景画像なりが表示されるような背景はどうやって作るのですか? 調べたところCSSを使っているというのは分かったのですが肝心のCSSソースというものが分かりませんでした。 疑問になっているのは ・ブラウザサイズに関係なく中央にメインの情報ページを置くにはどうしたらいいのか? ・中央部分の両端にドロップシャドウのような効果を出すには? といったようなことです。 参考までにこういうような効果を出したいというサイトを載せておきます。正直困っています、どうかよろしくお願いします。 http://www.msgallery.jp/ http://www.uc-company.co.jp/ http://www.nkk-sys.com/index.html

  • CSSで「html」にも背景指定をするのはどのような場合?

    CSSで「html」にも背景指定をするのはどのような場合? CSSの背景指定に関する質問です。 ページ全体の背景色や背景画像を指定する場合、 自分は下記のように記述をしています。 body { background:url(画像名) repeat-x #背景色; } しかし、たまにhtmlにも背景を指定しているものを見かけます。 下記のような感じです。 html,body { background:url(画像名) repeat-x #背景色; } どういったケースでhtmlにも背景を指定する必要があるのでしょうか? もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、 何か不具合が起こる?と思い自分なりに実験してみましたが、 特に何も変化は無しでした。 (Firefox、IE6でチェック) 分かる方いらっしゃいましたら回答をお願いいたします。

    • ベストアンサー
    • CSS
  • 画像のCSS化

    添付のようなグラデーション画像を トップページのバナー背景にしたいのですが CSSで実現するにはどのような方法が簡単でしょうか。 画像をドラッグするとsvgやCSSに変換してくれるサイトなどはないでしょうか

    • ベストアンサー
    • CSS
  • CSSの重なり順って指定できますでしょうか?(画像です)

    現在CSSをコツコツと勉強中なのですが、壁にぶつかってしまいました・・・。 CSSで背景画像を指定したのですが、これらの画像の重なり合う順番って構うことは出来ますでしょうか? 例えばですが、右に犬小屋の画像、左に犬の画像がありCSSで背景として重なり合わせた場合、犬小屋の上に犬が乗っかるようにしたいのです。(物凄い例ですのでCSSを使わなかったらとは言わないで下さいね) サイトをウロウロとしていたところ、Zインデックスという存在を知ったのですが、使い方がよく分からないというか、これで指定できるものなのでしょうか? 当たり前の質問で申し訳ないのですが、ご存知に方がおられましたらアドバイスいただけたら幸いです。 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSで左右の背景色を指定したい

    CSSでページを作成しているのですが、左右の背景色をかえたページにしたいと思ってます。 そこでCSSで指定した範囲に左右に別々のIDを指定しているのですが、この場合要素の部分のみしかCSSでしていしたbackground-cplorが表示されません。 heightで指定してもいいのですが、 要素が延びる可能性もあるので表示幅に合わせて背景を表示させるのはどう指定したらよいでしょうか?

    • 締切済み
    • CSS
  • 作っているページ内に背景を表示させるには

    勉強不足で申し訳ありませんが、ホームページを独学で作成しています。 横幅950ピクセルのサイトを、中央表示させるように考えています。 その950ピクセルの左上の部分に、(繰り返しの無い)背景画像を表示させたいのですが、 CSSファイルにbackgroundで指定してやると、どうやら表示する画面のサイズに左右されるらしく、 範囲外に背景画像が出たり、自分が考えているのとは違う位置に表示されてしまいます。 ページ内のひとつの要素として、背景画像のように扱えるイメージを挿入するには、どうすれば良いでしょうか。

    • ベストアンサー
    • CSS
  • CSS使用時のDIVにおける背景指定について

    現在ホームページの作成でCSSをメインに練習を行なっております。 テーブル配置を最小限にと思い、CSSにて制作を試みておりますが、 ヘッダー部分だけがどうしても上手くいかずつまずいてます。 色々なCSSに関するページも検索しましたが、いまいちピンと来るものもなく、もしかしたら出来ないのかな?とも考え始めております。 でも、大手のサイトなどを拝見する限り見栄え的にも出来ている様なので自分にCSSに対する理解が低いのかとも思いますが、どうかご教授 をお願いいたします。 先ず構想図から… ---------------------- |      DIV id="h-top"        | ---------------------- |      DIV id="h-cate"       | ---------------------- |     |               | |     |               | |DIV    |  DIV            | |id="index"|    id="main"       | |     |               | |     |               | |     |               | ---------------------- |      DIV id="footer"       | ---------------------- 上記のようなありがちなレイアウトのHPを考えています。 DIV id="h-top",id="H-cate"においては通常のヘッダーとしています。 質問は、上記のDIV内容の記述についてなのですが、 ●DIV id="h-top"は、 横100%に対し、横20PX、縦100PXの背景画像を並べ、中央に横740PX、 縦100PXのメイン画像画像を入れたいと思っております。 ●DIV id="h-cate"には、 横100%に同じく背景画像として横20PX、縦43PXの画像を並べ、中には 横740PXに合わせたナビボタン(w123*h40)を6つ配置したいと考えています。 共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく 困っております。 現状でのHTML文では以下の通りとなっております。 <body> <DIV id="header"> <DIV id="h-top"> <img src="hoge" width"740" height"100" alt""> </DIV> <DIV id="h-cate"> <ul class="h-navi"> <li class="h-navi01"> <A href="index.html"> <span class="span1">トップページ </span></A> </li> <li class="h-navi02"> <A href="web/index.html"> <span class="span1">取扱商品一覧 </span></A> </li>      ・      ・      ・ </ul> </DIV> </DIV> </body> CSSも書こうと思いましたが、色々とやりくりして今では表示も 配置もおかしくなってしまいましたので、控えさせて頂きました。 また説明文が下手で分かりづらいかと思いますが、どうぞ宜しくお願いします。

    • ベストアンサー
    • CSS