WEB相談室

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

タイトル:壁紙も使ってプラス他の画像を右下固定

0:[投稿] 内野 [MAIL] [2003/12/09 18:08 ][環境:IE6.0 WINME CNC??わからないです…]

壁紙を使って、そしてそのうえに他の画像を右下固定とか
左下指定とかできますか?
普通だと、どちらかしかできませんよね??
でも、どうしても、壁紙と、そして開いたときに他の画像も
いつでも見れるようにしたいのです。
もしできるのでならば、教えてください!!!
どなたかわかる方いましたらお願い致します!


1:[回答] 薫 [2003/12/09 19:46 ]

レイヤーを固定表示しては?
分からなければ「レイヤー 固定表示」で検索してみてください。


2:[質問] 内野 [2003/12/09 22:24 ]

薫さんありがとぅ御座います。
レイヤー固定では、画面サイズが変わると見れない場合もあるということで
大きくしても小さくしても、一緒に移動してくれるタイプがいいのです。
でもそれって壁紙効果じゃないですか…。
なので、他にないかなぁと思いまして…。
もし、なにかありましたらよろしくお願い致します。


3:[回答] 平野 敬 [MAIL] [URL] [2003/12/10 00:08 ]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja" dir="ltr">

<head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    <meta http-equiv="content-style-type" content="text/css">
    <style type="text/css">
        html {
            background-image:url('./bg.png');/*背景画像*/
            backgorund-color:white;/*背景色*/
            color:black;/*前景色*/
        }
        body {
            background-image:url('./one-point.png');/*固定したい画像*/
            background-attachment:fixed;
            background-position:right bottom /*右下に固定*/
        }
    </style>
    <title>テスト</title>
</head>

<body>

<h1>奥の細道</h1>

<p>月日は百代の過客にして行きかふ年もまた旅人なり。
舟の上に生涯をうかべ、馬の口とらえて老ひをむかふる者は日々旅にして旅を栖とす。
古人も多く旅に死せるあり。</p>

</body>

</html>


4:[完了] 内野 [2003/12/10 20:18 ]

平野さんありがとぅ御座います!!!
早速試してみますね!!!報告させていただきます。
また、なにかありましたらよろしくお願い致します。


5:[質問] 内野 [2003/12/10 20:29 ]

すいません。一度完了にしたのですがHPビルダーで試してみたところ、駄目でした…。HPビルダーの場合もこれで大丈夫でしょうか…??よろしくお願い致します。


6:[回答] 平野 敬 [MAIL] [URL] [2003/12/10 21:17 ]

ソースまで書いているのに,なぜ「HPビルダーで試す」必要があるのですか? そもそも「HPビルダーで試す」って何ですか?


7:[回答] nero [URL] [2003/12/10 21:35 ]

ビルダーうんぬんはともかくとして。

WinIE6 なら次のような CSS でご希望のような固定表示になりました。

   html{
       overflow: hidden;
   }
   body{
       overflow: auto;
   }
   html, body{
       width: 100%;
       height: 100%;
       padding: 0px;
       margin: 0px;
   }
   html {
       background-image:url('./bg.png');/*背景画像*/
       backgorund-color:white;/*背景色*/
       color:black;/*前景色*/
   }
   body {
       background-image:url('./one-point.png');/*固定したい画像*/
       background-attachment:fixed;
       background-position:right bottom; /*右下に固定*/
       background-repeat: no-repeat;
   }

ただし、Mozilla など、他のブラウザではそうならない可能性が高いです。というのも、CSS2 の仕様によれば、背景の扱いはこうなっているからです。

> 但しHTML文書においては、HTML要素より寧ろBODY要素に背景指定することを
> 推奨する。また(HTMLの)UAは、背景を設定するに当たって以下の優先規則に
> 従うべきである:

・HTML要素に設定された'background'の値が'transparent'以外である場合、その値を用いる。
・さもなければ、BODY要素に設定された'background'の値を用いる。
・以上の方法で決定した値が'transparent'である場合、背景の表示は不定である。

今回の例では、html 要素に設定された background の値は transparent 以外です。ですので、body 要素に指定された背景は、無視されるのが望ましい取り扱いです。実際、Mozilla1.6 beta はそのように描画します。

だから、できるだけ多くの環境でこれを実現するには、さらに div 要素などを追加する必要があるように思います。


8:[回答] 平野 敬 [MAIL] [URL] [2003/12/10 23:00 ]

フォローありがとうございます。>>7
私自身,質問者の意図を勘違いしていました。お詫びします。


9:[回答] 内野 [2003/12/11 00:57 ]

平野さん>>
ご理解していただけてありがとぅ御座ます。
ビルダーでHP制作してるので、それにコピペして使っているので
うまくいかなかったのです。画像固定等、使いやすいので…。
今回は不快な書き方をしてしまい申し訳ありませんでした。
また、ありがとぅ御座いました

neroさん>>
neroさんありがとぅ御座います。
すいません難しいことはよくわからなくて(x_x;)
下の方に書いてることは完全に理解することは難しいです…。
こちらを、ビルダーの中のHEAD内に入れれば大丈夫なのでしょうか。
((ビルダーで制作してるので…そちらに入れたいのです…もちろんビルダーの中には出てきませんが、ネット上ではきちんと謁見できますので…))
申し訳ありませんがアドバイスの方よろしくお願い致します。


10:[回答] kojika [MAIL] [URL] [2003/12/11 11:49 ]

平野さん neroさんのソースは、表示されます。

ところが、ホームページビルダー愛好者のため、HTMLソースに書き込むと
下記のように自動的に修正されてしまいます。
そうすると、背景画像がだけが表示されません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>TEST</title>
以下 neroさんのスクリプト

--------------異なるところ-----------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja" dir="ltr">

が異なるために、表示されないのだと思います。
ホームページビルダー使用の場合のスクリプトを教えて下さい。


11:[回答] nero [URL] [2003/12/11 13:02 ]

オフトピですが、 CSS はスクリプトじゃありません。
下記例はいかがでしょうか。<br> 連打は消してくださいね。
http://alt.s31.xrea.com/files/bg_test/


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja" dir="ltr">

<head>
   <meta http-equiv="content-type" content="text/html; charset=shift_jis">
   <meta http-equiv="content-style-type" content="text/css">
   <style type="text/css">
   html, body, div#main{
       overflow:auto;
       width: 100%;
       height: 100%;
       padding: 0px;
       margin: 0px;
   }
   body{
       background-image:url('./bg.png');/*背景画像*/
       backgorund-color:white;/*背景色*/
       color:black;/*前景色*/
   }
   div#main{
       background-image:url('./one-point.png');/*固定したい画像*/
       background-position:right bottom; /*右下に固定*/
       background-attachment:fixed;
       background-repeat: no-repeat;
   }
   </style>
   <title>二重背景 固定テスト</title>
</head>

<body>

<div id="main">

<h1>奥の細道</h1>


<p>月日は百代の過客にして行きかふ年もまた旅人なり。
舟の上に生涯をうかべ、馬の口とらえて老ひをむかふる者は日々旅にして旅を栖とす。
古人も多く旅に死せるあり。</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>

</body>
</html>


今後のことも考えると、まずはこのサイトで CSS や HTML について少しずつ勉強していった方が良いんじゃないでしょうか。少しでも知識をつけておくとビルダーでも何かと便利かと思います。


12:[回答] kojika [MAIL] [URL] [2003/12/11 16:30 ]

neroさん 親切に教えていただき、ありがとうございました。
少しずつ勉強させていただきます。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World