- ベストアンサー
cssが反映されない！ホームページの背景画像とスクロールバーが表示されない問題
- 自分のホームページで設定した背景画像とスクロールバーがサーバーにアップすると反映されない問題について調べています。
- ffftpでstyle.cssをアップロードしたが、背景画像とスクロールバーが反映されず、CSSのフォルダもテンプレートに含まれていないためどうするか迷っています。
- CSSのフォルダごとアップロードするか、自分でcssフォルダを作る必要があるのか検索して調べています。
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
とても忙しいのですが、少し時間が取れたのでサイト拝見しました。 本当にまだ初心者なのですね。 ちょっとショックかもしれませんが、ページを作成したら ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) などでチェックするのがもっとも良いです。減点０の項目は宗教的なものもありますからこだわらなくて良いですが、減点数の書かれているものは治すと良いでしょう。 Another HTML-lintは、厳しいですがなにが悪いかと、その解説や対策まで教えてくれるからとても勉強になります。 <DOCTYPE>の宣言がされていますが、今からはじめられるなら必ずstrictにするべきです。これは1999年のHTML4.01の勧告時に 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』とされて来たものです。多分参考にされている書籍かサイトは相当古いものだと思います。 というか、まったく仕様書を知らない人が作られたテンプレートではないかな。Another HTML Lintを確認するまでもなく酷いものです。 その後、そのままXML化されたXHTML1.0の後、XHTML1.1が勧告されましたが、XHTML1.1ではstrict以外はありません。【現在、勧告直前になっているHTML5は、HTML4.01strictの改訂で、transitinal的なものは一切ありません。】 そして、HTML4.01で方向性は示されていたのですが、それがまったく徹底していなかった反省からHTML5は、完全に文書構造とプレゼンテーション(表現)は分離されます。たとえば、 「構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」 「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」 ★<DOCTYPE>はおまじないなんかじゃありません。仕様書にきちんと書かれているルールです。これはブラウザ(IE)を標準モードで起動させるスイッチにもなっています。 →DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&sclient=psy-ab&q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&gs_l=hp.3..35i39j0.254219.263038.2.263743.24.19.5.0.0.0.330.2992.0j18j0j1.19.0...0.0...1c.1.ix0-Vuoh6Ac&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.&fp=769cfc6a4773dbdc&biw=1024&bih=619 ) 実は、DOCTYPEの宣言以上にあなたのサイトは、この点で誤りだといえます。厳しいですが、これは今後は絶対に守らなければならない条件の一つです。詳しくは ・スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) など。 たぶん携帯やスマートホンを想定されたページだと思います。 本来は下記サンプルのようにシンプルなものであるはずです。 iframeはstrictでは使えませんので、objectを使っています。 そのため、targetは同様に使えませんので、それぞれのページにこのソースを書く方が良いです。 →FRAME 問題 HTML - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=FRAME+%E5%95%8F%E9%A1%8C+HTML&oq=FRAME+%E5%95%8F%E9%A1%8C+HTML&gs_l=hp.3..0i8i10i30j0i8i30.2515.15781.1.16360.23.20.3.0.0.0.408.3490.0j15j3j1j1.20.0...0.0...1c.1.Jvj_QaC4uiM&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.&fp=769cfc6a4773dbdc&biw=1024&bih=619 ) ★Anothe HTML Lint ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でテスト済み (注意) タブは＿に置換してあるので戻すこと！！！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<meta http-equiv="Content-Script-Type" content="text/javascript"> ＿<title>pochette</title> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rel="stylesheet" type="text/css" media="screen" href="./test.css"> ＿<style type="text/css"> <!-- --> ＿</style> </head> <body> <!-- ここから --> ＿<div class="header"> ＿＿<h1>*pochette*</h1> ＿</div> <!-- ここまではすべてのページで共通 --> ＿<div class="section"> ＿＿<h2>本文</h2> ＿＿<p><object data="./main.html">新着情報は<a href="./main.html">新着情報</a>へ</object></p> ＿＿<div class="Navigation"> ＿＿＿<ul> ＿＿＿＿<li><a href="main.html">Top</a></li> ＿＿＿＿<li><a href="about.html">About</a></li> ＿＿＿＿<li><a href="material.html">Material</a></li> ＿＿＿＿<li><a href="bbs.html">BBS</a></li> ＿＿＿＿<li><a href="link.html">Link</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<p><img src="./g8.png" height="273" width="250" alt=""></p> ＿</div> <!-- ここから --> ＿<div class="footer"> ＿＿<address>Copyright (c) 2012 *pochette* All Rights Reserved.</address> <!-- ここまではすべてのページで共通 --> <script type="text/javascript"><!-- この部分はFC2自動挿入なので省略 --> </script> ＿</div> </body> </html> [CSS] @charset "Shift_Jis"; html,body{margin:0;padding:0;} body{ ＿color: #808080; ＿font-family: 'Osaka,verdana'; ＿font-size: 10px; ＿letter-spacing: 1px; ＿line-height: 12pt; ＿text-align:center; } div.header,div.section,div.footer{ width:30%;min-width:320px; margin:0 auto; } div.section object{width:300px;height:200px;} a:link{color: #808080;} a:hover {color: #FF8040;} h1,div.Navigation{ background-image: url("./cccc12.png"); } div.section div{margin:20px
その他の回答 (9)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートを使用する最大の利点は、 ・すべてのページのデザインをたった一つのスタイルシートだけで変更できること ・スタイルシートを一度しか読まないのでネット負荷か小さい です。 詳しい説明は最後に回しますが、階層の異なるところにある、どのHTMLからもスタイルシートを利用するためにはその階層にあわせてスタイルシートへのパスを指定しなければなりません。これはページに画像を貼り付けるのと同じです。 最も楽なのは絶対パスですが、初心者はローカルでテストできません。 <link rel="/style.css" また、スタイルシートで指定する画像も必ずスタイルシートからのパスになります。 なお、スクロールバーやポインターなどユーザーインターフェイスに関わるものはデザインを変更すべきではありません。プロは決してしませんよ。 リンク関係の色も可能な限り変更しません。 ブラウザはHTMLファイルをサーバーに要求して入手したら、そのページの描画を完成させるために必要なファイルが追加で必要なら、HTMLに書かれたそのファイルへのパスを計算して、改めてサーバーに要求します。 そのHTMLが、サーバー名/abc/efg/index.htmlだとして、必要なファイルが ../hoge/abc.css でしたら、計算して /abc/hoge/abc.css をサーバーに要求します。 指定されたパスが /CSS/abc.css でしたら、そのまま要求します。この場合HTMLがどこにあってもよいことがわかります。 指定されたパスが abc.cssでしたら、今いる位置から計算して /abc/efg/abc.css を求めます。 そして呼び出されたスタイルシートについて、改めて同じ計算をします。今度はHTMLからの位置ではありません。
補足
とても勉強になりました＞＜ ありがとうございます。
- splash19777733
- ベストアンサー率29% (8/27)
no1です。 ここが問題かもしれません。 /* サイトタイトル、メニュー部分の背景画像の設定*/ .back { background: url(img/cccc12.png) repeat; text-align: center; } このように書き換えてください！ .back { background-image: url(img/cccc12.png); background-repeat: no-repeat; text-align: center; }
お礼
ありがとうございます。 無事、画像は表示することできました＾＾
- mitoneko
- ベストアンサー率58% (469/798)
＞これは、すべてのページですか？ ＞それともindexだけですか＞＜？ この一連の指定は、全てのページに必要です。 というか、本来、必ず書いてあるべき事項なんです。 はっきりいって、おまじない以外の何物でも無いんですけどね。 スクロールバーの色指定に使われている属性ですが、最近のＩＥと昔のＩＥでは指定の場所が違ったはずです。たしか、ＩＥ５．５では、<BODY>への指定で、ＩＥ６以降はブラウザーの動作モードに依存して、<HTML>への指定も必要になる場合がある・・・といった感じだったと覚えています。（両方に指定するものと私は覚えてますが） で、ブラウザーの動作モードは、No4.の方が書かれている一連のおまじないの内容によって決まります。他にも、細かいところでいろいろとこの指定でブラウザーの挙動が変わるため、正しく書いておかないといけません。
お礼
とりあえず、 meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>pochette</title> <!--このタグ消すとデザイン崩れます--> <link href="style.css" rel="stylesheet" type="text/css"> を消さずにその上に貼り付けました。 それでも画面じたいは何も変わりませんが、、大丈夫ですかね？＾＾；
補足
すごく重要なことを学びました。。 今すぐ書き加えますね；； これは、 meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>pochette</title> <!--このタグ消すとデザイン崩れます--> <link href="style.css" rel="stylesheet" type="text/css"> を消さないといけないんですか？；； この次の行でも大丈夫ですかね？
- outbrave
- ベストアンサー率60% (231/380)
画像の方は style.css .back { background-image: url('http://xpastelcolorx.web.fc2.com/cccc12.png '); repeat; text-align: center; } ５４行目の改行を削除して下のようにしてください。 .back { background-image: url('http://xpastelcolorx.web.fc2.com/cccc12.png'); repeat; text-align: center; } スクロールバーは反映されているようですが、ブラウザによって違いますので。
お礼
画像ちゃんと表示されました！！ ありがとうございます！！
- splash19777733
- ベストアンサー率29% (8/27)
no1です。 まず基本をおさえましょう ＾＾ htmlでコーディングするときは、 かならず宣言文というのが必要になります。 これがないと文字化けしたり、レイアウトが崩れたりします。 index.htmlに限らず、すべてのページに必要です。 そのまえに、問題のstyle.cssのソースコードを見せていただけますか？ ↓これのコピペは後にしましょう、 まんがいち質問者様が手順をまちがえたら僕は責任がとれません。＾＾! <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link type="text/css" rel='stylesheet' href='default.css' /> <link type="text/css" rel='stylesheet' href='style.css' /> <title>pochette</title> </head>
補足
詳しくありがとうございます！ 宣言文！ とっても必要なものなんですね；； えっと style.cssは @charset "Shift_Jis"; /* ページ全体 */ body,td{ color:#808080; font-size:10px; font-family:'Osaka,verdana'; letter-spacing :1px; line-height : 12pt; } html{ scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:#ffc2a6; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-track-color:#ffffff; } body{ margin: 0; background:#ffffff; } /* リンクの設定 */ a { color:#808080; text-decoration:none; } a:hover { color:#ff8040; text-decoration:none; } /* メインのテーブル部分の設定*/ .table { width: 320px; text-align: center; } /* サイトタイトル、メニュー部分の背景画像の設定*/ .back { background: url(img/cccc12.png) repeat; text-align: center; } です。
- splash19777733
- ベストアンサー率29% (8/27)
no1です。ホームページ拝見しました。 htmlの宣言文がないですね。 前のデータを念のためとっておいて、 これを頭から</head>まで書き換えてみてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link type="text/css" rel='stylesheet' href='default.css' /> <link type="text/css" rel='stylesheet' href='style.css' /> <title>pochette</title> </head>
補足
これは、すべてのページですか？ それともindexだけですか＞＜？
- outbrave
- ベストアンサー率60% (231/380)
背景画像が表示されないのはパスが間違っているから また、スクロールバーの方は記述が間違っているからだと推測されます。 ソースかページを確認できない場合は推測しかできませんね。
補足
http://xpastelcolorx.web.fc2.com/ これがホームページです。 この「pochette」という文字の背景と 「top,about,material.Link」の文字の背景に水玉の背景画像が表示されるはずなんです。 スクロールバーもノーマルの状態ではなく 色をつけたりしました； でも、ファイルから自分のホームページを見るとどちらも反映されてるのですが。。
- splash19777733
- ベストアンサー率29% (8/27)
no1です。 ヘッダー内にstyle.cssをリンクさせてますか？ こんな感じです。↓ <head> <link type="text/css" rel='stylesheet' href='style.css' /> </head>
補足
テンプレートはお借りしたものなので、 これは元から書いてあったものなのですが <link href="style.css" rel="stylesheet" type="text/css"> とどのページにもかいてあります。
- splash19777733
- ベストアンサー率29% (8/27)
webデザイナーです。 ＦＣ２のことはよくわかりませんが、 htmlファイルとcssファイルは同じフォルダに入れないと反映されませんよ。 ホームページはどのように作られたんですか？ＤＷですか？エディタですか？
補足
ご回答ありがとうございます＞＜ 一つのフォルダに作ったページ(index.htmlなど)とstyle.cssは一緒に入れてあります。 エディタで作りました。 反映されないのは、スタイルシートに記入した背景画像と、色などを設定したスクロールバーだけ なんです； フォントのサイズ、色はきちんと反映されています。
補足
お忙しい中ありがとうございます＞＜ まず、宣言文を書き直してみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> フレームを使用している場所には <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> という宣言文です。 チェックもしてみたらかなりの項目がチェックされてしまったので 自分なりに直していこうと思います。。 一つ一つ参考にしながら勉強してみます。 ありがとうございます！