cssが反映されません

Question

FC2のホームページについてです。

ホームページはなんとか作れてサーバーにアップしたのですが、
style.cssで設定した背景画像とスクロールバーが反映されません＞＜
テンプレートをお借りして、その中に入っていたstyle.cssもそのままffftpに
アップロードしました。

ファイル内で自分のホームページを見てみると背景画像と色など設定したスクロールバーは
しっかり反映されているのですが、サーバーにアップすると反映されません。

ffftpにstyle.cssをそのままアップロードしたのが間違いだったのでしょうか；；
検索して調べてみるとCSSのフォルダごとアップロードしろと書いてあったりするのですが
テンプレートに入っているのはstyle.cssというものだけで、cssフォルダは入っていません。
それともcssフォルダは自分で作るのですか＞＜？

ORUKA1951 · Accepted Answer

とても忙しいのですが、少し時間が取れたのでサイト拝見しました。本当にまだ初心者なのですね。ちょっとショックかもしれませんが、ページを作成したら ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) 　などでチェックするのがもっとも良いです。減点０の項目は宗教的なものもありますからこだわらなくて良いですが、減点数の書かれているものは治すと良いでしょう。　Another HTML-lintは、厳しいですがなにが悪いかと、その解説や対策まで教えてくれるからとても勉強になります。の宣言がされていますが、今からはじめられるなら必ず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 )」 ★はおまじないなんかじゃありません。仕様書にきちんと書かれているルールです。これはブラウザ(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 ) でテスト済み (注意)　タブは＿に置換してあるので戻すこと！！！＿＿＿pochette ＿＿＿＿＿

＿＿

本文

＿＿

＿＿＿＿

＿

＿ [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

ORUKA1951 · Answer

スタイルシートを使用する最大の利点は、
・すべてのページのデザインをたった一つのスタイルシートだけで変更できること
・スタイルシートを一度しか読まないのでネット負荷か小さい
です。

詳しい説明は最後に回しますが、階層の異なるところにある、どの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 · Answer

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 · Answer

＞これは、すべてのページですか？＞それともindexだけですか＞＜？　この一連の指定は、全てのページに必要です。　というか、本来、必ず書いてあるべき事項なんです。　はっきりいって、おまじない以外の何物でも無いんですけどね。　スクロールバーの色指定に使われている属性ですが、最近のＩＥと昔のＩＥでは指定の場所が違ったはずです。たしか、ＩＥ５．５では、への指定で、ＩＥ６以降はブラウザーの動作モードに依存して、への指定も必要になる場合がある・・・といった感じだったと覚えています。（両方に指定するものと私は覚えてますが）　で、ブラウザーの動作モードは、No4.の方が書かれている一連のおまじないの内容によって決まります。他にも、細かいところでいろいろとこの指定でブラウザーの挙動が変わるため、正しく書いておかないといけません。

outbrave · Answer

画像の方は
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 · Answer

no1です。まず基本をおさえましょう＾＾ htmlでコーディングするときは、かならず宣言文というのが必要になります。これがないと文字化けしたり、レイアウトが崩れたりします。 index.htmlに限らず、すべてのページに必要です。そのまえに、問題のstyle.cssのソースコードを見せていただけますか？ ↓これのコピペは後にしましょう、まんがいち質問者様が手順をまちがえたら僕は責任がとれません。＾＾! pochette

splash19777733 · Answer

no1です。ホームページ拝見しました。 htmlの宣言文がないですね。前のデータを念のためとっておいて、これを頭からまで書き換えてみてください。タイトル pochette

outbrave · Answer

背景画像が表示されないのはパスが間違っているから

また、スクロールバーの方は記述が間違っているからだと推測されます。

ソースかページを確認できない場合は推測しかできませんね。

splash19777733 · Answer

no1です。ヘッダー内にstyle.cssをリンクさせてますか？こんな感じです。↓

splash19777733 · Answer

webデザイナーです。

ＦＣ２のことはよくわかりませんが、
htmlファイルとcssファイルは同じフォルダに入れないと反映されませんよ。
ホームページはどのように作られたんですか？ＤＷですか？エディタですか？

cssが反映されません

とても忙しいのですが、少し時間が取れたのでサイト拝見しました。

この回答への補足

スタイルシートを使用する最大の利点は、

この回答への補足

no1です。

＞これは、すべてのページですか？

この回答への補足

画像の方は

no1です。

この回答への補足

no1です。

この回答への補足

背景画像が表示されないのはパスが間違っているから

この回答への補足

no1です。

この回答への補足

webデザイナーです。

この回答への補足

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング