背景の繰り返しについて

このQ&Aのポイント
  • 背景の繰り返しについて困っています。fc2でホームページを始めましたが、背景が意図せず繰り返されたり、正確に表示できない問題が発生しています。
  • 具体的には、ページを順に進むときに表示が正常なのに、戻ると突然背景が繰り返されることがあります。
  • 手打ちで作成しているため、fc2のエディタによる自動編集が原因かもしれませんが、詳しい原因がわかりません。困っています。
回答を見る
  • ベストアンサー

背景の繰り返しについて

fc2でホームページを始めました。 ビルダーなどは使わず、手打ちでなんとか形にはなったのですが、どうしてもわからないところがあります。 背景に関してなのですが、右上・繰り返しなしできちんと作れたページ<1>があったとします。 次のページ<2>を作る際、<1>の本文だけ変えて保存します。 <1>と<2>は、ソースは同じで本文だけを差し替えただけの状態です。 もちろん、titleは変えたりしていますが、 body { background-attachment:fixed; background-repeat : no-repeat; background-position : 100% 0%;} の部分はいじっていません。 それなのに、<1>では正確に右上固定できていた背景が、<2>では全画面に繰り返されてしまうのです。 しかも、<1>→<2>→<3>とページを順に進むと間違いなく表示できていたり、<3>→<2>と戻ると突然繰り返しになってしまったりします。 手打ちではありますが、fc2のエディタが自動編集しているので、アップロード後におかしくなる原因が、イマイチわかりません。 できるページとできないページがあるので、とても困っています。

  • HTML
  • 回答数3
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

『外部スタイルシート』の使用方法 <link rel="stylesheet" type="text/css" href="style.css"> こんな感じに html ヘッダ内に記述するだけ。 複数の html のデザインを一括管理できるので便利ですよ。 『互換モード』に関して 何でもかんでも訊いて済ませるんじゃなくて、すこしは自分で調べてみるってのも大事だと思うんですよ。

参考URL:
http://www.dspt.net/html_tag/mode.html
alicomo
質問者

お礼

大変お礼が遅くなって、申し訳ありません。 ご回答、ありがとうございました。 あれから互換モードなどを自力で調べましたが、その詳細以前に、不調の原因がモヤッとわかりました。 ファイルをアップロードしてから、エディタで少しでも編集すると乱れるようです。 互換に問題があるからなんだろうな……というのはわかりましたが、要するに、手元で完璧に編集してからアップすれば問題ないという結論に。。 都度都度の対処でお恥ずかしい限りですが、とりあえず大丈夫そうです。 いろんなサイトを検索してはみましたが、上記URLのサイトは、説明も画面も見やすくて、今まで使っていたサイトよりもよいみたいです。 これからも利用させていただきます。 教えていただいて、ありがとうございました。

その他の回答 (2)

回答No.2

無料レンタルサーバーは広告が入る関係で、作成した内容と違う表示になることが多々あります。 広告が入ることを想定して作らないと、 ウェブ標準とか文法に厳格に、、、とすると、失敗することが多いと思います。

alicomo
質問者

お礼

ありがとうございます。 今は、手打ちしたファイルをアップロードし、適宜エディタを使って編集したりしています。 問題のページは単純に文章と背景画像だけなので、特に問題ないと思っているのですが…… エディタには「画像追加」などはあるものの、背景に関しての簡単ボタンがないので、こうしたミスが出てしまいます。 なんかもう、今更だけど、ビルダー買ってしまおうかなぁ……なんて思っています。 アドバイス、ありがとうございました。

回答No.1

>手打ちではありますが、fc2のエディタが自動編集しているので 意味がよく解りませんが・・・? アップロードしたファイルをサーバー側で勝手に編集してしまう??? とにかく、文面から察するに現在は html のヘッダ内にてスタイルの設定をしているのだと思われます。外部スタイルシートファイルを新規に作成し、CSSは全てスタイルシートファイルから読み込むように変更してみてはいかがでしょう。 それと CSS の表示が意図したものと違ってしまう場合には、正しい html で書かれているかもう一度チェックしてみましょう。正しくない html だとブラウザに判断されて、互換モードでレンダリングされている可能性も捨て切れません。

alicomo
質問者

補足

回答ありがとうございます。 アップロードした後に、サーバーで編集しようとしてソースを見ると、確かに細かい点が変わっているので、編集はされてしまうようです。 で、アップロード前にIEで表示してみた際には正しく表示されていたものが、アップロードすると、正しかったり間違えられてしまったり……? とりあえず、問題のページをもう1度アップロードし直したら、なんとなく直りました。 ソースは同じはずなのに…… 私のド素人っぷりが酷いせいか、実は外部スタイルシートの使い方もよくわかっていません。 一応、参考にした解説HPに従って、CSSファイルは作ってあるのですが、使っていない状態です。 でも、これってとても初歩的ですよね(汗) もう少しじっくりと本で調べてみたいと思います。 せっかくなので、「互換モードでレンダリングされる」というのがどういう事態なのか、参考までに教えていただけないでしょうか?

関連するQ&A

  • 2つ画像を背景にするスタイルシートってある?

    1つの画像をスタイルシートで背景にするのは、知ってるんですが、2つの画像を同じページに背景にはできるのでしょうか?下記は1つの画像を背景にするスタイルシートです。これのどこかをいじれば可能なのでしょうか? <STYLE TYPE="text/css"> <!--    BODY {       background-image:素材のURL;       background-position:0% 100%;       background-repeat:no-repeat;       background-attachment:fixed;     } --> </STYLE>

    • 締切済み
    • CSS
  • ホームページビルダーV9での背景固定について

    ホームページビルダーV9を使っています。 そこで、背景を固定したいのですが上手くいきません。 ソースに下のようなタグを入れても画像が表示されないんです。 どうしたら良いか教えてください。 <STYLE type="text/css"> <!-- BODY { background-color: #------; background-image : url("画像のURL"); background-attachment: fixed; background-position: 50% 50%; background-repeat: no-repeat; } --> </STYLE>

  • 背景を固定した時の表の背景

    こんにちは。HPを制作し始めたばかりの初心者です。 質問です。 背景をこんな感じて固定した時 <STYLE type="text/css"> <!-- BODY{ background-image : url(○○.jpg); background-repeat : no-repeat; background-attachment : fixed; background-position : 90% 50%; } --> 作ってる表の背景画像が無効になっちゃいます。 なんか間違ってるんでしょうか??? お答えを頂けると有り難いのですが。

    • ベストアンサー
    • HTML
  • 時間帯によって背景画像を変える

    タイトル通りなのですが、なかなかうまくいきません・・・。 <BODY style="background-image:url(test.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;"> スタイルを使って右下に背景画像を表示しています。このtest.gifを時間帯によって変えたいです。 自分なりにこのようにしてheadタグの中に埋め込みましたがうまくいきません。 <SCRIPT LANGUAGE="JavaScript"> <!--- function geth(t){ if (t<=5) document.write("<BODY style='background-image:url(test1.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=11) document.write("<BODY style='background-image:url(test2.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=17) document.write("<BODY style='background-image:url(test3.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=23) document.write("<BODY style='background-image:url(test4.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); }}} } //---> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!--- h = new Date(); geth(h.getHours()); //---> </SCRIPT> <BODY BACKGROUND='test.gif'>という普通の背景の表示の仕方ならうまくできました。スタイルはheadの中では使えないのでしょうか・・・?どのようにすればうまくいくでしょうか?JavaScriptに関してはほとんど無知ですがよろしくおねがいします。 ※意味不明なことを言っていたらすみません。

  • 背景画像の繰り返しについて

    背景画像の繰り返しについて ホームページの背景画像を「repeat-x」を使用して 背景画像を繰り返しさせいるのですが、 画像と画像のつなぎ目が、うっすら見えてしまい(ボダーみたいな線) あきらかに画像を繰り返ししているのがわかります・・・ どうしても、格好悪い背景になってしまいます。 どうしたら、画像の繰り返しがうまくいくのでしょうか? 画像と画像がつながっている部分がわからないようにするには どうすればいいですか? body { background: url(images/back04.JPG); background-repeat: repeat-x; background-position: top left; margin: 0;     }

    • ベストアンサー
    • HTML
  • 背景に複数の画像を入れることは可能でしょうか

    HTML、CSSの初心者の者です。 下記のように、CSSで背景に画像back1.gifを右上に入れているのですが、画面の右下にもう一つの画像back2.gifを入れることは可能でしょうか? もし可能なら、方法を教えて下さい。 初心者向けに易しくご説明頂けると幸いです。 body { background-color:yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; }

    • ベストアンサー
    • HTML
  • 写真素材の背景

    写真素材の背景で、例えば右下に表示するためのタグがありますよね? それって↓ <STYLE type="text/css"> <!-- BODY { background-image : url("素材URL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; background-color:背景色; } --> </STYLE> でいいんですか??↑で何度かやってみたんですが、ちゃんと右下に表示されません。

  • Webタグの背景について

    今HPを作っていますが チェックで作った背景に一つの画像を右下に固定表示させたいのですができるでしょうか? 背景固定はできるんですけど画像を右下にやるのができません。 <body background="imagfolder/02.jpg" bgproperties="fixed"> のタグはチェックの背景になっています。 固定で検索すると <STYLE type="text/css"> <!-- BODY { background-image : url("壁紙のURL"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; } --> </STYLE> とでてくるんですが・・・

  • スクロール と 背景

    こんばんわ。 HP作成作業を頑張ってます。 超初心者でここのページや本を参考に作っております。ドリームウィーバーとCSSとで作っております。 背景をbody { background-image:url(haikei-1.jpg); background-repeat:no-repeat; background-attachment: fixed; background-position:center;} に指定しています。 このページの下の方に <textarea name="myText" cols="50" rows="10" readonly></textarea> を入れたところ テキストを書くところ背景が白いのです。 このテキストを入れるスクロールボックス?と言うのですか?良く分かりませんがその中も 背景がすける様にするにはどうしたら良いのですか? 初心者で至らない質問かと思いますが,ご伝授ください。

  • スクロール と 背景

    こんばんわ。 HP作成作業を頑張ってます。 超初心者でここのページや本を参考に作っております。ドリームウィーバーとCSSとで作っております。 背景をbody { background-image:url(haikei-1.jpg); background-repeat:no-repeat; background-attachment: fixed; background-position:center;} に指定しています。 このページの下の方に <textarea name="myText" cols="50" rows="10" readonly></textarea> を入れたところ テキストを書くところの背景が白いのです。 このテキストを入れるスクロールボックス?と言うのですか?良く分かりませんがその中も 背景がすける様にするにはどうしたら良いのですか? 初心者で至らない質問かと思いますが,ご伝授ください。

    • ベストアンサー
    • HTML

専門家に質問してみよう