- 締切済み
それぞれのページに別の背景を指定することはできますか？【CSS】
はじめまして。 現在CSS勉強中のものです。 最近いろいろなサイトを見て勉強しているのですが、背景をtopページと違う画像を使い、TOPページとは違う作りにしたいと考えているのですが、どうすればよいのか見当もつきません。 どうかよろしくお願致します。
- HTML
- 回答数5
- ありがとう数9
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- goldfox
- ベストアンサー率49% (123/249)
＞スタイルシートファイルは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)
> 実際に見かけたサイトは以下のサイトになります。 > 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)
基本的にはCSSは外部の方がいいと聞いたので、そちらで作っていたのですが、bodyに直接背景を指定すると、すべてのページで同じ背景が指定されてしまって・ なので、必要な枚数(種類)、作ればいいんですよ・・・。
- tom0120
- ベストアンサー率26% (367/1390)
見当もつきません。・・・ということなので、 細かな話をしてもしょうがないので、概念だけ。 ・内部css なら、ページごとに、作ればよい。 ・外部css なら、ページごとに、セットでHTML本体と外部cssを作ればいいです。 サイトは無料ですが、cssの参考書、一冊買って、 「雛形」通り、1回試作すれば、理解が早いですよ。 なんの分野もそうですが・・・ 「雛形」を用意して、まねる、そして、カスタマイズするのが 理解しやすいですね。
お礼
ありがとうございます。 雛型ですか・・・一度近くの本屋さんへ行って調べてみます。 基本的にはCSSは外部の方がいいと聞いたので、そちらで作っていたのですが、bodyに直接背景を指定すると、すべてのページで同じ背景が指定されてしまって・・・ 色々調べてみます。 本当にありがとうございました。
- abril
- ベストアンサー率69% (388/560)
> 最近いろいろなサイトを見て勉強しているのですが、 どうやって勉強されていますか？ > 背景をtopページと違う画像を使い、TOPページとは違う作りにしたい ご覧になっている「いろいろなサイト」の中には、上記の様なスタイルのサイトはありませんか？多分、その様な実例をご覧になっているからこそ、実現方法をお知りになりたいのだと思いますが。 であれば、 > どうすればよいのか見当もつきません。 と、早々に匙を投げず、まずはご覧になっているサイト中にご自分がやりたいイメージと同じものがあったら、そこで使用されているCSSファイルを覗いて検証して見ることです。そこから簡単に手がかりが得られます。 とにかくそこがスタート地点です。その上で、読み解けない箇所があったら、改めて、サンプルを引き合いにしながら質問をされる事です。 この質問自体に答えることは簡単すぎるほど簡単なのですが、質問者様はこれまでの質問でも「CSSを勉強されている」という姿勢でいらっしゃる様なので、敢えてこの様にアドバイスさせて頂いています。
お礼
いつも本当にありがとうございます。 実際に見かけたサイトは以下のサイトになります。 http://www.edenviaggi.it/moduli.asp?modulo=offerte 微妙に背景の写真（ビーチと船）が違うのですが・・・ ちなみにCSSファイルを除くことってできるんですね・・・ 早速調べてみます。 見れるのは、htmlソースだけだと思っていました。 本当にありがとうございます。
お礼
ありがとうございます。 恥ずかしながらやっと今気づきました・・・ スタイルシートファイルは1つのサイトに1つという変な固定概念？ができてたようです・・・ 本当にありがとうございました。