背景イメージをcssで指定

[新着] Webテンプレートを仮オープンしました

0   名前： ジベル ： 2007/02/23（金） 01:33  ID:pISR0qe2 sub-9f
背景画像だけを表示させ、背景イメージをcssで指定する場合のHTML文書は下記のような書き方でよろしいのでしょうか？

html
<div id="haikei">&nbsp;</div>

css
#haikei {
height: 100px;
width: 100px;
background-image: url(images/haikei_1.gif);
background-repeat: no-repeat;
}
1   名前： カヅサツ ◆ThCi95HEzw ： 2007/02/23（金） 01:33  ［URL］  ID:O5hEMlpW sub-r2
どうしてそんなことをしたいのかによります。

img要素ではアカンのですか？
2   名前： ジベル ： 2007/02/23（金） 01:33  ID:pISR0qe2 sub-9f
カヅサツさん、cssで画像を指定してそれを何らかの形で括る（画像の上には、何も配置しません）ことができればそれでとりあえずはOKですのでレスお願い致します。
3   名前： カヅサツ ◆ThCi95HEzw ： 2007/02/23（金） 01:33  ［URL］  ID:O5hEMlpW sub-r2
> cssで画像を指定して

杓子定規に回答すれば、CSSで画像を指定することはできません。

CSSでできるのは、何らかの要素の背景画像にしたり、何らかの要素の直前直後に画像を挿入することだけです(こちらは、Win IE が無視してしまいますが)。

単に画像を表示したいだけなら、img要素をポンと置いておけば良いです。
4   名前： K+S ： 2007/02/23（金） 01:33  ID:nROqylMa sub-YS
カヅサツさんの仰るように、目的がよくわかりません。

技術的に何が可能で、こういう目的のために、ある程度（validという意味でなく）妥当な形でそれを実現する。
ということになるわけで、その妥当な形はどういうものですか？と質問されていると思うのですが。

何のためにCSSで画像を指定したいのかが分かりません。
たとえば、表示させる画像をCSSで変更したい、というのが目的なのであれば一例を示せるかもしれません。
ただ、その画像が何を意味するのか（“内容”になり得るものなのか、装飾なのか）が不明なのでそこは具体的に示せませんが。
<p id="haikei"><img src="default.gif" alt="「この画像の“領域”の意味」を書く"></p>
default.gif はCSSが適用されない場合に、背景画像を表示させたい目的に相当する代替画像です。
※ haikei という id 属性値も、目的（意味）に適するものにすべきです。
#haikei {
margin: 0;
padding: 0;
border: none;
width: 100px; /* background-image で指定した画像の幅 */
height: 100px; /* background-image で指定した画像の高さ */
background-image: url(images/haikei_1.gif);
background-repeat: no-repeat;
text-indent: -9999px; /* img 要素の画像を表示可能領域外に飛ばして隠す */
}
> 背景画像だけを表示させ、
これの目的が分かれば、もっと妥当な方法が教示できるかもしれません。
5   名前： ジベル ： 2007/02/23（金） 01:33  ID:JFd6i3I0 sub-.G
カヅサツさん、K+Sさんご回答ありがとうございます。

何をしたいかと申しますと、例えばheader部分がありまして、

html
<div id="header">
<div id="header_kaisyanonamae"><h1>名前</h1></div>
<div id="header_haikei"></div>
<div id="header_zyusyo><address>住所</address></div>
</div>

headerの中で3つのグループ分けをします。
<div id="header">は左（名前）、中央（背景）、右（住所）と配置され、
背景はずっとつながっていたとします。
CSSが適用がされた状態では
左（名前）、右（住所）の文字は、ロゴや特殊なフォントなどを使用して、
背景を含めて画像として表示されます。

しかし、CSSが適用されていない場合は、

ブラウザ表示で、

名前
住所

と表示され、背景そのものが無いように表示させたいのです。
なぜ、こんなことをするかと申しますとソース上ではSEO対策、表示では見栄えをよくし、ブラウザ対策も考えて、こんなイメージになってしまいました。

この様なことをしたいと考えたとき、カヅサツさん、K+Sさんはhtml・css共にどのような書き方をされますか。

できない、もしくはこの考え方自体が間違っている等でも構いませんので、ご指摘お願いします。

話が少し戻りますが、
<div id="haikei">&nbsp;</div>
の表記の仕方自体は間違っているのでしょうか。

それとborder: none;の必要性がわかりません（すみません）、こちらも含めてアドバイスをいただければ幸いです。


6   名前： カヅサツ ◆ThCi95HEzw ： 2007/02/23（金） 01:33  ［URL］  ID:Y7q2TaVU sub-gm
> この様なことをしたいと考えたとき、カヅサツさん、K+Sさんはhtml・css共にどのような書き方をされますか。

画像次第ではありますが

HTML:
<div id="header">
<h1>名前</h1></div>
<address>住所</address>
</div>

CSS:
#header{
	background-image: url(〜);
}
#header h1{
	(略)
}
#header address{
	(略)
}

というのを出発点にします。

> <div id="haikei">&nbsp;</div>
> の表記の仕方自体は間違っているのでしょうか。

文法としては正しいですが、文書としては変です。
第1にdiv要素に意味はありませんから、ちょっかにテキストが来るのは変です。
第2に no-break space 1文字のブロックというのは文書構造としては変です。
7   名前： K+S ： 2007/02/23（金） 01:33  ID:nROqylMa sub-YS
仰られている理想形が想像できません。
headerの中で3つのグループ分けをします。
<div id="header">は左（名前）、中央（背景）、右（住所）と配置され、
背景はずっとつながっていたとします。
「左、中央、右」の配置が具体的にどのようにしたいのか分かりません。
「背景はずっとつながっていたとします」というのもよく分かりません。
┌───┬───┬───┐
│ 名前 │ 背景 │ 住所 │
└───┴───┴───┘
こういうことなのか、
┌───全体の背景───┐
│ 名前                 │
├───────────┤
│                 住所 │
└───────────┘
こういうことなのか、或いは全然違うのか。
CSSが適用がされた状態では
左（名前）、右（住所）の文字は、ロゴや特殊なフォントなどを使用して、
背景を含めて画像として表示されます。
「背景を含めて画像として表示」とはどういう意味でしょうか。

可能であれば、自身で作成された実際のページを提示していただけませんか？
話が少し戻りますが、
<div id="haikei">&nbsp;</div>
の表記の仕方自体は間違っているのでしょうか。
表記の仕方を何に関して評価すればよいのでしょうか…。
HTMLの文法的には全く以って妥当です。問題ありません。
ただ、パーサや閲覧者は、それがどのような意味を持った内容であるのかを判断できません。
仮に p 要素タグで括ったとしても、中身が&nbsp;（＝空白文字）である段落としか判断できません。
何のためにあるのかなんてHTMLソースからは全く分かりません。
haikei というid属性値を認識できる人が初めて「背景」に関係する何かなのか？と推測できるかもしれません。
それとborder: none;の必要性がわかりません（すみません）、こちらも含めてアドバイスをいただければ幸いです。
もしボーダーが適用されるような他の指定があった場合に打ち消すためです。
8   名前： ジベル ： 2007/02/23（金） 01:33  ID:JFd6i3I0 sub-.G
カヅサツさん、K+Sさんご回答ありがとうございます。

ページの提示についてはできる限りするように致します。すみません。

イメージは、K+Sさんが提示して下さいました下記のイメージで間違いありません。

イメージ
┌───┬───┬───┐
│ 名前 │ 背景 │ 住所 │
└───┴───┴───┘
　↑全体に一つの背景

こちらの一つの背景に、名前部分、背景部分、住所部分と分けて制作しております。
詳しく説明しますとFireworksで背景（画像）を制作し、名前部分に会社のロゴをデザイン、背景部分は背景のみですのでそのまま、住所の部分に住所をデザインし、スライスで3つに分けて書き出します。

cssの書き方ですが、カヅサツさんの考えていただいた下記の方法がベストであり、こちらを参考に制作をつづけていきたいと思います。

css
#header{
background-image: url(〜);
}
#header h1{
(略)
}
#header address{
(略)
}

また、この方法の場合、背景全体をスライスで書き出し、ロゴと住所については必要のない部分を透明の設定を適用させ書き出す。
もしくは、背景全体をスライスで書き出し、背景と一緒に3つにスライスで書き出す。（上で説明しました方法と同じ）
この2つの方法が自分としては、考えられますので、画像の書き出しに関しては、この2つのどちらかの方法で制作したいと思います。
イメージをより詳しく（こちらでもわからない場合はすみません）説明させていただくために関係のないこともコメント致しました。

K+Sさん、
border: none;
理解いたしました。

ページを提示していないのにもかかわらず、イメージを膨らませて、尚且つ適切なアドバイスをいただき、ありがとうございました。
一覧へ戻る