cssが反映されない

質問

サイトを作ろうとしているのですが、初心者なのでこのサイト↓

http://homutuku.com/beginner/330.html

を見ながら作っているのですが、スタイルシートが反映されません。
反映されないといっても、ボーダーのオレンジの線一本だけ反映されます。
あとは反映されません。画像なども。

今フォルダは

全体の「hp」というフォルダの中に、「img」フォルダがありその中にheader.gif　がはいっています。
あとはこのサイトと同様、cssファイルとindex.htmlだけです。

なぜでしょうか。
よろしくお願いいたします。

回答No.4

ORUKA1951 · ベストアンサー

No.2ORUKA1951です。DrFellさんの回答を見て、改めて
http://homutuku.com/beginner/330.html のサイトを見てみました。
　確かに、初心者が見てはならないページですね(^^)
初心者さんのためのホームページ作成講座--人気ホームページが作れる簡単作成講座 ( http://homutuku.com/beginner/ )から、適当なページを見てみましたが、本当に酷いです。
例) HTMLのDOCUTYEがtransitinalになっていますが、HTML4.01の勧告以来非推奨です。
　「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」
例) 「CSSレイアウトでは、<div>を使ってレイアウトを組みます。 ( http://homutuku.com/beginner/210.html )」
　これは違います。
　「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」
　HTMLは、文書構造をマークアップするもので、その文書構造を利用してスタイルシートでデザインするのであって、デザインのためにマークアップするものではありません。

　このように極めて重要なHTMLとCSSの根幹に関わる重大な部分から間違っています。仕様書を一度も読んでいない人が作成しているとしか思えません。それにしても、ここまで酷いのは、見たことありません。

★先日　kkk01011111さん自信が質問された「ホームページ作成のとき ( http://okwave.jp/qa/q7217379.html )」のHTMLも、デザインによってHTMLを書いていないですね。そうしてあれば、どのようにもデザインできるのです。横だろうが縦だろうが・・

★まず、デザインはまったく考えずにHTMLを、その文書構造にしたがって記述できるように練習してください。
例) はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )

　そのうえで、スタイルシートを
★セレクタというもの - CSS講座 ( http://www6.plala.or.jp/go_west/beginner/css/selector.htm )
あたりで・・

　くれぐれも、デザインのためにHTMLを書かないように!!!

お礼

リンクありがとうございます!!
見てみます。
間違ったHTMLの書き方をしないように正しく勉強します！
わかりやすい回答、ありがとうございます！

回答No.3

DrFell

その教本では、オレンジの線1本だけ反映されて正解です。
そのページのみしか見ていないので、他のページに解説があるかもしれないのですが、その教本が悪いとしかいいようがありません。

bodyの中身を下記に替えてみてください

<div id="site-box">
<div id="a-box">Ａボックス（必要に応じて増やしてください）</div>
<div id="b-box">Ｂボックス</div>
<div id="c-box">Ｃボックス</div>
<div id="d-box">Ｄボックス</div>
</div>

教本どおりだと中身が空っぽだったので高さが持てず、site-boxのborderが引かれたのみに目に映ると思います。上記では中身を入れることで高さを持たせ、それぞれのボックスを表示させています。

高さを指定するheightをｃｓｓにいれることで高さが指定する方法もあります。

そのページを見ただけでは、他にも問題点が沢山あるようですので、そのサイトを先生にしてhtmlやcssを学ぶのはお勧めできません。見出しにはh1、h2……というタグを使います。すべてをdivで済ませるサイトは使わないほうがよいです。

初心者には見分けはつかないかもしれませんが、文書構造（論理構造）と見た目のデザインの分離に触れていない入門サイトは近づかないほうがいいです。別のサイトを捜すことを強くお勧めします。

お礼

そうだったんですね
初心者だったもので、気づきませんでした・・・
今bodyの中身を替えてみたら、できました！ありがとうございます！！

このサイトは使わないことにします。
助かりました、ありがとうございました。

回答No.2

ORUKA1951

一部分だけ反映されるということは、スタイルシートの書き方が間違っています。
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
でチェックすること。もちろんそれ以前にHTMLが間違っていたら適用されませんから
★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
でHTMLもチェックすること

お礼

こんな便利なサイトがあるのですね！
やってみます！！！
助かりました、ありがとうございます！

回答No.1

wakatonsx

CSSの指定方法がまちがっているからでしょう。
HTMLにCSSで指定した記述になっていない。

お礼

今htmlのほうには

<link rel="stylesheet" type="text/css" href="style.css" />

と記述してあります。
どのようにしたらよいのでしょうか？
すみません・・