- ベストアンサー
cssが反映されない！ホームページの背景画像とスクロールバーが表示されない問題
- 自分のホームページで設定した背景画像とスクロールバーがサーバーにアップすると反映されない問題について調べています。
- ffftpでstyle.cssをアップロードしたが、背景画像とスクロールバーが反映されず、CSSのフォルダもテンプレートに含まれていないためどうするか迷っています。
- CSSのフォルダごとアップロードするか、自分でcssフォルダを作る必要があるのか検索して調べています。
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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"> という宣言文です。 チェックもしてみたらかなりの項目がチェックされてしまったので 自分なりに直していこうと思います。。 一つ一つ参考にしながら勉強してみます。 ありがとうございます！