Ｐａｇｅ 683 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ ＩＮＤＥＸ ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼CSSで壁紙を縦に表示するにはどうすればいいんですか？ Cross 04/6/26(土) 12:45 ┗Re:CSSで壁紙を縦に表示するにはどうすればいいんですか？ らら 04/6/26(土) 13:11 ┗Re:CSSで壁紙を縦に表示するにはどうすればいいんですか？ Cross 04/6/26(土) 17:53 ┗Re:CSSで壁紙を縦に表示するにはどうすればいいんですか？ らら 04/6/26(土) 17:58 ┗Re:CSSで壁紙を縦に表示するにはどうすればいいんですか？ Cross 04/6/26(土) 18:24 ┗Re:CSSで壁紙を縦に表示するにはどうすればいいんですか？ らら 04/6/26(土) 18:29 ┗Re:CSSで壁紙を縦に表示するにはどうすればいいんですか？ Cross 04/6/26(土) 18:48 ┗Re:CSSで壁紙を縦に表示するにはどうすればいいんですか？ らら 04/6/26(土) 19:05 ┗Re:CSSで壁紙を縦に表示するにはどうすればいいんですか？ Cross 04/6/26(土) 19:14 ┣すいません。だれかフォローをお願いします。 らら 04/6/26(土) 20:55 ┗Re:CSSで壁紙を縦に表示するにはどうすればいいんですか？ ゆえ 04/6/26(土) 21:53 ┗Re:CSSで壁紙を縦に表示するにはどうすればいいんですか？ Cross 04/6/27(日) 12:52 ┗Re:CSSで壁紙を縦に表示するにはどうすればいいんですか？ らら 04/6/27(日) 13:26 ┗横入りですが・・・ you 04/6/27(日) 18:40 ┗Re:先にアップ又はサンプルを 105 04/6/27(日) 20:10 ┗Re:先にアップ又はサンプルを Cross 04/6/27(日) 20:41 ┣Re:先にアップ又はサンプルを らら 04/6/27(日) 21:41 ┃ ┗Re:先にアップ又はサンプルを ゆえ 04/6/27(日) 23:57 ┗Re:先にアップ又はサンプルを Pid 04/6/28(月) 17:23 ┗Re:先にアップ又はサンプルを Cross 04/6/28(月) 20:24 ┗Re:先にアップ又はサンプルを Cross 04/6/28(月) 20:25 ┗Re:先にアップ又はサンプルを らら 04/6/28(月) 20:49 ┗Re:先にアップ又はサンプルを Cross 04/6/28(月) 21:08 ┗Re:先にアップ又はサンプルを Cross 04/6/29(火) 18:46 ─────────────────────────────────────── ■題名 ： CSSで壁紙を縦に表示するにはどうすればいいんですか？ ■名前 ： Cross <two-jyu@r3.dion.ne.jp> ■日付 ： 04/6/26(土) 12:45 -------------------------------------------------------------------------
| こんにちはCrossです、また質問ですみませんm(_ _)m CSSで左に壁紙を縦方向に連続で表示したいので <HEAD>と</HEAD>の間に↓のように打ちましたが文字が白くなってしまいました どうすればいいですか? <STYLE type="text/css"> <!-- BODY{ color : #cacadb; background-color : black; background-image : url(wing.gif); background-repeat : repeat-y; background-attachment : fixed;background-position : 0% 0%; font-size : 13px; font-family : "MS UI Gothic"; } --> </STYLE> |
| ><STYLE type="text/css"> ><!-- >BODY{ > color : #cacadb; > background-color : black; > background-image : url(wing.gif); > background-repeat : repeat-y; > background-attachment : fixed;background-position : 0% 0%; > font-size : 13px; > font-family : "MS UI Gothic"; >} >--> ></STYLE> 白ではなくて薄紫のような感じではないですか？ color:#cacadb; というのが文字色を決めているばしょです。 このコードをお好きな色に変更してください。 |
| ららさん、返事ありがとうございます、文字は何とか黒くなりましたがまだ、壁紙が表示されませんどうすればいいんですか？ |
| background-image : url(wing.gif); の部分を background-image : url("wing.gif"); としてみてください。 |
| ▼ららさん： >background-image : url(wing.gif); > >の部分を > >background-image : url("wing.gif"); > >としてみてください。 やってみましたが、まだ表示されません、僕のミスでしょうか……… |
| ファイルのパスは合っていますか？ 確か以前にも同様の質問をなさっていましたよね。 ご自分のお名前で過去ログ検索をしてみてください。 そのスレッドは参考になりますか？ |
| フォルダ名はHomePageでその中のindex.filesというフォルダの中のwing.gifを 表示かせたいので background-image : url("index.files/wing.gif"); BACKGROUND-IMAGE : URL("index.files/wing.gif"); と打ってみましたが表示されません、どうすればいいでしょうか？ |
| それなら合っているようですが、 以前は indexcss.files というフォルダ名でしたよね。 それは変えたというか、別のフォルダなのですね？ 壁紙を表示させたいファイル（このスタイルシートが書かれているファイル）は HomePageフォルダに入っていて、 そこからさらに何かのフォルダに入っているということはありませんか？ |
| >以前は indexcss.files というフォルダ名でしたよね。 >それは変えたというか、別のフォルダなのですね？ 前はindexcss.filesというフォルダでしたが名前をindex.filesに変えました >壁紙を表示させたいファイル（このスタイルシートが書かれているファイル）は >HomePageフォルダに入っていて、 >そこからさらに何かのフォルダに入っているということはありませんか？ 壁紙を表示させたいファイルがHomePageフォルダに入っていますが 別のフォルダに壁紙を表示させたいファイルが入っているということはありません |
| 申し訳ないです。 私の知識ではここまでが限界です。 そのスタイルシートの記述で、 私の環境ではしっかりと背景は表示されます。 やはりパスが間違っているのでしょうか。 スミマセン。 どなたかの私よりも的確な返答をお待ちください。 |
| ▼Crossさん： >>以前は indexcss.files というフォルダ名でしたよね。 >>それは変えたというか、別のフォルダなのですね？ > >前はindexcss.filesというフォルダでしたが名前をindex.filesに変えました と、言うことは画像のパスは("index.files/wing.gif")で合ってると思います。 ただ、フォルダ名が「index.files」と名前に「.」が入ってますが、 このフォルダ名から「.」を外した名前に変更してみてはどうでしょうか？ フォルダやファイル名には半角英数と「-」「 _ 」しか使用できません。 （サーバーによってはＯＫな場合もあるようですが） 一度、フォルダ名を「index-files」や「index_files」と変更して見てください。 なお、フォルダ名を変更した際は、他のリンクパスも変更する必要がありますので、ご注意を。 あと、基本的な事ですが、その背景画像のファイルはちゃんとサーバーに転送されているのですよね？ |
| ▼ゆえさん： >フォルダやファイル名には半角英数と「-」「 _ 」しか使用できません。 >（サーバーによってはＯＫな場合もあるようですが） >一度、フォルダ名を「index-files」や「index_files」と変更して見てください。 やってみましたが、うまくいきませんでした。 >あと、基本的な事ですが、その背景画像のファイルはちゃんとサーバーに転送されているのですよね？ まだ作成途中なのでまだ転送してません。 もしやと思って以前の方法で壁紙を表示させてみたら、うまくいきませんでした。 これは、この壁紙がいけないんでしょうか? |
| もう一つ思いつきました。 wing.gif以外の画像ではどうでしょうか？ wing.gifが壊れているのかもしれません。 もしくは拡張子だけを変えたということはありませんか？ |
| 見事復活してみたyouです（笑） もしよければ、テストページとして一度サーバーにアップするか、こちらの掲示板に問題のページのHTMLを貼り付けてみてはどうでしょうか？ それで、問題の解決ができる「かも」しれません。 ＃本当は、サーバーにアップしてそのアドレスを貼り付ける方がいいとは思いま すけど・・・。 どうなんでしょうか？＞105さん |
| ▼youさん： >見事復活してみたyouです（笑） おかえりなさい〜、無事復活されたようで一安心です。 >もしよければ、テストページとして一度サーバーにアップするか、こちらの掲示板に問題のページのHTMLを貼り付けてみてはどうでしょうか？ HTMLやCSS関連の質問の場合は、先にアップしてから ソースを見てもらうのが一番解決しやすいです。 特に今回の場合のように画像関係の場合は、言葉のやりとりだけでは お互い予想しあってのやり取りですから難しくなっちゃいます。 ららさんとゆえさんのアドバイスは とても的確でわかりやすいと思いますので、これでも解決しない場合は 先にアップしてアドレスを書き込んでみてください。 サイト自体を見られたくない場合は、サンプルページを作って 確認用のアドレスにアップするのも手であります。 |
| ▼ららさん： >もう一つ思いつきました。 >wing.gif以外の画像ではどうでしょうか？ > >wing.gifが壊れているのかもしれません。 >もしくは拡張子だけを変えたということはありませんか？ 試しに他のでやってみましたがうまくいきませんでした。 あと、wing.gifはもともとは別の形式だった奴を僕がgifに変えたんです。 ▼105さん： >>もしよければ、テストページとして一度サーバーにアップするか、こちらの掲示板に問題のページのHTMLを貼り付けてみてはどうでしょうか？ 分かりました。やってみます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0058)http://www.shoshinsha.com/hp/template/layout/simple00b.htm --> <HTML lang=ja><HEAD><TITLE>Erements.index</TITLE> <STYLE type="text/css"> <!-- BODY{ color : #000000; background-color : black; background-image : url("index_files/wing.gif"); BACKGROUND-IMAGE : URL("index_files/wing.gif"); background-repeat : repeat-y; background-attachment : fixed;background-position : 0% 0%; font-size : 13px; font-family : "MS UI Gothic"; } --> </STYLE> <META http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style.css" type="text/css"> <META http-equiv=Content-Type content="text/html; charset=Shift_JIS"> <META http-equiv=Content-Style-Type content=text/css> <STYLE type=text/css> { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #333333; PADDING-TOP: 0px } BODY {FONT-SIZE: 94%;LINE-HEIGHT: 150%;BACKGROUND:USR(index/wing.gif)} body {font-size: 94%; line-height: 1.5; background: url(index.files/wing.gif)} #page { BORDER-RIGHT: #333333 1px solid; BACKGROUND: #f3f8f8; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 15%; BORDER-LEFT: #333333 1px solid; MARGIN-RIGHT: 15%; MARGIN-TOP:23px } #head { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 20px; BORDER-BOTTOM: #d0e6f0 8px solid; TEXT-ALIGN: right } #main { BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BACKGROUND: #ffffff; PADDING-BOTTOM: 20px; MARGIN-LEFT: 25px; BORDER-LEFT: #cccccc 1px solid; MARGIN-RIGHT: 25px; PADDING-TOP: 20px; BORDER-BOTTOM: #cccccc 1px solid } #foot { PADDING-RIGHT: 20px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 20px; PADDING-BOTTOM: 20px; MARGIN: 25px 25px 0px; PADDING-TOP: 20px; TEXT-ALIGN: center } #menu { PADDING-RIGHT: 0px; BORDER-TOP: #5b95ea 30px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 100%; PADDING-TOP: 0px } #menu UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 25px; PADDING-TOP: 0px } #menu UL LI { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; BACKGROUND: #cccccc; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 5px 5px 0px 0px; PADDING-TOP: 0px; WHITE-SPACE: nowrap; LIST-STYLE-TYPE: none } #menu UL A { BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #999999 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #ffffff; PADDING-BOTTOM: 5px; MARGIN: 0px; BORDER-LEFT: #999999 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #999999 1px solid } #menu UL A:hover { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #274f98; PADDING-BOTTOM: 5px; COLOR: #ffffff; PADDING-TOP: 5px } H1 { CLEAR: both; BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 10px; FONT-SIZE: 110%; BACKGROUND: #dfe7ee; PADDING-BOTTOM: 10px; MARGIN: 80px 25px 0px; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 10px } H2 { FONT-SIZE: 110%; PADDING-BOTTOM: 5px; MARGIN: 2em 30px; COLOR: #274f98; BORDER-BOTTOM: #becdda 2px solid } P { MARGIN-LEFT: 50px; MARGIN-RIGHT: 30px } UL { PADDING-LEFT: 25px; MARGIN: 0px 0px 1em 50px } .imgbox { MARGIN-BOTTOM: 10px; MARGIN-LEFT: 50px; MARGIN-RIGHT: 30px } .sitename { PADDING-RIGHT: 8px; MARGIN-BOTTOM: 0px; FONT: bold 25px Georgia, "Times New Roman", Times, serif; COLOR: #1f3f7a; BOTTOM: -8px; POSITION: relative } .linkbtm { MARGIN: 2em 25px 1em; TEXT-ALIGN: right } </STYLE> <STYLE type="text/css"> <!-- BODY{ background-image : url(cbg-2w.jpg); background-repeat : repeat-y; background-attachment : fixed; } --> </STYLE> <META content="MSHTML 6.00.2800.1276" name=GENERATOR></HEAD> <BODY><!-- #page ページの整形：中央寄せとか --> <DIV id=page><!-- #header 画面上部のヘッド部分 --> <DIV id=head> <DIV class=sitename>Erements</DIV></DIV><!-- #menu メニュー部分 --> <DIV id=menu> <UL> <LI><A href="index.html">INDEX</A> <LI><A href="local.html">LOCAL RULE</A> <LI><A href="profile.html">PROFILE</A> <LI><A href=" ">BBS(工事中)</A> <LI><A href="link.html">LINK</A> </LI></UL></DIV> <H1>お知らせ</H1><!-- #main メインの文章を書くところ --> <DIV id=main> <H2>ホームページの説明</H2> <P>ここは、Erements(エレメンツ)のホームページです。 <P>やっとHPが完成しました、長かった……… <P>少しずつ更新していく予定です <P>ご要望があれば出来る限りの範囲でやっていきますので <P>掲示板に書き込んで報告してくれるとうれしいです <H2>更新複暦</H2> <UL> <LI>ホームページ完成(00.00.00)</LI></UL> <P class=linkbtm><A href="index.html">戻る</A></P></DIV><A href="index.html"><!-- #foot 画面一番下 --></A> <DIV id=foot> <P>あなたは<div class="imgbox"><IMG SRC="http://vpack.www5*.biglobe.ne.jp/vpack/Count.cgi">番目の訪問者です。</div></P></DIV></DIV></BODY></HTML> 全部やってしまいました、長くてすみませんでしたm(_ _)m |
| background-image : url("index_files/wing.gif"); BACKGROUND-IMAGE : URL("index_files/wing.gif"); body {font-size: 94%; line-height: 1.5; background: url(index.files/wing.gif) background-image : url(cbg-2w.jpg); 背景に関するスタイルシートが4回も出てきています。（もっとあるかも） すべてbodyですし……。 どれか一つにしてください。 それから真中の <STYLE type=text/css> 〜〜〜〜中略〜〜〜〜 </STYLE> の所に <!--と-->が抜けています。 他にも色々ありそうですが とりあえず今回は背景ということなのでこの辺で……。 |
| >背景に関するスタイルシートが4回も出てきています。（もっとあるかも） >すべてbodyですし……。 >どれか一つにしてください。 背景の画像が出ない点については、ららさんのご指摘の通りかと。 スタイルシートの設定や、META設定の重複がかなりありますし、 <link rel="stylesheet" href="./style.css" type="text/css"> と、外部スタイルシートの設定も入ってます。 重複しててるものや、無駄な要素がかなり見られますので、 スタイルシートの設定自体の見直しを検討下さい。 無駄なタグは、無駄にファイルを重くするだけです。 がんばって、すっきりさせましょう。 |
| ところで， ・ <img src="index_files/wing.gif" alt="" /> ならその画像は表示されますか？ ・ 表示される→ CSS 記述ミス，またはその他の箇所のミス ・ 表示されない→ URL 記述ミス，または画像が壊れている のようにして問題を絞り込んでいきましょう。 今回の件は多分ららさんとゆえさんの指摘の通りだと思います。同じ指定がたくさんある場合，基本的には後のもので上書きされますから，今回の場合 ・ background-image : url(cbg-2w.jpg); が最終的な背景画像になっています。 |
| ▼ららさん： >背景に関するスタイルシートが4回も出てきています。（もっとあるかも） >すべてbodyですし……。 >どれか一つにしてください。 分かりました、やってみます。 ▼ゆえさん： >重複しててるものや、無駄な要素がかなり見られますので、 >スタイルシートの設定自体の見直しを検討下さい。 >無駄なタグは、無駄にファイルを重くするだけです。 >がんばって、すっきりさせましょう。 分かりました、頑張ります。 ▼Pidさん： >ところで， > >・ <img src="index_files/wing.gif" alt="" /> > >ならその画像は表示されますか？ > >・ 表示される→ CSS 記述ミス，またはその他の箇所のミス >・ 表示されない→ URL 記述ミス，または画像が壊れている > >のようにして問題を絞り込んでいきましょう。 やってみました、どうやら画像が壊れてたみたいなので、 直したら表示されました。 なんとか、画像が表示されましたが、なぜか画像以外のところが 真っ黒になってしまいました……… どうしてこんなことになったんだろう 間違ってどこか大事なところを消しちゃったのかな？ |
| >なんとか、画像が表示されましたが、なぜか画像以外のところが >真っ黒になってしまいました……… >どうしてこんなことになったんだろう >間違ってどこか大事なところを消しちゃったのかな？ 画像じゃなくて壁紙でしたスミマセンでした。 |
| もしどこが悪いのかわからないのなら、 [3107]の記事を見ながら元の状態に戻しましょう。 そうしてから再び整理を始めましょう。 時間や手間がかかるでしょうが仕方がありません。 それか、どこかで少しスタイルシートについて 知識を深めるのも良いかもしれません。 そうすれば自ずと間違いが見えてくるかもしれません。 |
| 分かりました、頑張ってみます。 ららさん、ゆえさん、youさん、105さん、Pidさん、 本当にありがとうございました。 |
| 何とか解決できました。 <STYLE type="text/css"> <!-- BODY{ color : #cacadb; background-color : black; background-image : url(wing.gif); background-repeat : repeat-y; background-attachment : fixed;background-position : 0% 0%; font-size : 13px; font-family : "MS UI Gothic"; } --> </STYLE> background-color : black;←の部分を background-color : #FFFFFF;のように色を指定すれば、よかったんですね どうもお騒がせしましたm(_ _)m |