WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:背景画像の並び方 / CSS

あかり [WriteDate : Thu Jun 28 09:00:46 2001]

はじめまして、あかりと申します。
背景画像の並び方なのですが、左右両端だけに表示させたいのです。
普通は、

body{
    color:#000000;
    background:white url("gazou.gif") repeat-y
}

などのように左のみの表示ですが、これを左右両端に表示させる方法はありますか?
よろしくお願い致します。


!!! [WriteDate : Thu Jun 28 10:27:13 2001]

>これを左右両端に表示させる方法はありますか?
無理のようです。

ちなみに、

background-position: left right;

のようにすると、IE5.5では右、N6では、左です。


けい [MAIL] [URL] [WriteDate : Thu Jun 28 12:26:12 2001]

邪道ですが、次のようにすることで対処できます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Sample</title>
<style>
<!--
body, div.main-area{
background-image:url(gazou.png);
background-repeat:repeat-y;
margin:0;
padding:0;
}
body{
background-position:left;
}
div.main-area{
width:100%;
height:100%;
background-position:right;
}
-->
</style>
</head>
<body>
<div class="main-area">
<p>hoo</p>
<p>bar</p>
</div>
</body>
</html>

WinIE5 では期待通りの表示が得られました。Mozilla ではいまいち。


あきら☆M [MAIL] [URL] [WriteDate : Thu Jun 28 12:38:47 2001]

html {
    background : url("gazou.gif") repeat-y right;
}
body {
    color: #000;
    background : url("gazou.gif") repeat-y left;
    margin: 0;
}
てな感じでどうでしょう。html要素にスタイルを設定するのはアレかもしれませんが。


あかり [WriteDate : Thu Jun 28 17:16:11 2001]

!!!さん、けいさん、あきら☆Mさん、アドバイスどうもありがとうございました。

ちなみに、あきら☆Mさんに教えていただいたものですと、何故かこちらでは左端しか表示されません。>IE5.5 Win ME
<style type="text/css">
<!--
html {
   background : url("gazou.gif") repeat-y right;
}
body {
   color: #000;
   background : url("gazou.gif") repeat-y left;
   margin: 0;
}
-->
</style>

けいさんに教えていただいたほうは表示されました。ありがとうございます。

> 邪道ですが、次のようにすることで対処できます。
> html要素にスタイルを設定するのはアレかもしれませんが。
などは、このようなことは本当はやってはいけないという意味ですか?

これから教えていただいたようにして、ファイルを作成します!
皆様本当にありがとうございました!


あきら☆M [MAIL] [URL] [WriteDate : Thu Jun 28 19:45:49 2001]

>このようなことは本当はやってはいけないという意味ですか?
背景については、CSS2の仕様書(の翻訳)に
"但しHTML文書においては、HTML要素より寧ろBODY要素に背景指定することを推奨する。"
とありますのでHTML要素に背景指定するのはあまりおすすめできないのでないか、と。
ちなみに、Mozilla 0.9.1(linux)では期待どおりの表示になりました。


けい [MAIL] [URL] [WriteDate : Thu Jun 28 19:50:57 2001]

>このようなことは本当はやってはいけないという意味ですか?

私の作ったサンプルソースでは、main-area クラスの div 要素が、文書の論理構造に関して何ら積極的な意味をもっていません。単に CSS のセレクタとして利用されているだけです。――つまり、われわれ(誰)がもっとも嫌うところの、「見栄えのためのマークアップ」をしてしまっているわけです。ここらへんが邪道の邪道たるゆえん。

#ただ、テーブルレイアウトなど他の邪道技に比べ、
#上の技法によって生じる害悪は少ないため、
#私はこの程度ならば容認範囲内であると考えていますが。


あかり [WriteDate : Thu Jun 28 21:20:13 2001]

あきら☆Mさん、けいさん、ありがとうございます。

> "但しHTML文書においては、HTML要素より寧ろBODY要素に背景指定することを推奨する。"
> とありますのでHTML要素に背景指定するのはあまりおすすめできないのでないか、と。

勉強になりました。これからは頭に入れておきます!

> われわれ(誰)がもっとも嫌うところの、「見栄えのためのマークアップ」をしてしまっているわけです。
> ここらへんが邪道の邪道たるゆえん。

理解できました。実際は<div>や<p>などでクラス指定して全てを書いてる人も多いみたいですが、きっとこのような事を御指摘してるのだと思いました。それぞれのモノにはきちんと意味と用途があるので使い分けなさいという事ですね。

皆様アドバイスありがとうございました。
またよろしくお願いします!



あかり [WriteDate : Thu Jun 28 21:22:22 2001]

完了忘れてました m(__)m

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World