1339720394 CSSがHTMLに反映されません。


当方、web制作をはじめたばかりの初心者です。
CSSがHTMLに反映されないのですが、以下のどちらかに原因があるのではと考えております。
・相対パスの設定がおかしい
・フォルダ分けがおかしい

相対パスの設定については以下のとおり書きました。
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">

フォルダ分けは「/」というフォルダの中に「index」「css」「image」のフォルダをつくり「css」フォルダの中に「style.css」というファイルが入っております。

ご回答お待ちしております。なお、ご回答頂く場合には、お手数ですがソースとなるURLをご呈示くださいますようお願いします。

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2012/06/15 09:33:14
  • 終了:2012/06/22 09:35:03

回答(2件)

id:a-kuma3 No.1

a-kuma3回答回数4506ベストアンサー獲得回数18702012/06/15 09:45:55

ポイント100pt

スタイルが反映されない HTML というのは、どこに置いてありますか?
もしかしたら、index フォルダの中に置いてたりします?

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

id:halappa

回答ありがとうございます。スタイルが反映されない HTML(index.html)はindexフォルダの中にいれておりました...!
しかし、ご回答いただいた内容のとおり、書き換えたのですが、CSSがあたりませんでした。a-kuma3さんにご回答いただいた内容や他の回答者さまにご説明していただいた内容に納得し、わたしも上記の書き換えでうまくいくのでは、と思ったのですがうまくいきませんでした....。せっかくご回答頂いたのにすみません....。(index.htmlをindexフォルダから出したら解決(cssがあたった)したのですが、できたら、indexフォルダにいれたい気持ちです....)

2012/06/15 20:34:46
id:a-kuma3

相対パスじゃないんですけど、link タグの href にホスト名を書きたくない、ということであれば、

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

と、書くのでも良いかな。

index.html だと、入口のページなので、HTTP で公開しているフォルダの直下に置くのが普通だと思いますけど、それ以外の HTML だったら、普通に階層を作って下に置きますから、何か納得いかないですね。

/index.html
/diary/  …… 日記の HTML
/memo/   …… メモの HTML
/css/   …… スタイルシートを置くディレクトリ
/scripts/ …… javascript を置くディレクトリ

というのは、普通の構成だと思います。

2012/06/15 21:53:37
id:windofjuly No.2

うぃんど回答回数2625ベストアンサー獲得回数11492012/06/15 09:59:38

ポイント100pt

css/style.css は絶対パスになってるかもしれません。

index/hogehoge.htmlからcss/style.css を相対パスで参照したいならば、下記になります。

../css/style.css

軽く説明しますと、
相対パスは呼び出す側から順に辿るので下記のような具合です。
hogehoge.html → index → ルート → css → style.css

hogehoge.html から index を相対パスで示すと . になります。
(. は所属しているディレクトリを意味します。これは通常省く事が出来ます)
hogehoge.html から ルートを相対パスで示すと .. になります。
(親ということです)
hogehoge.html から css までを相対パスで示すと ../css になります。
(兄弟/姉妹/兄妹/姉弟・・・)
hogehoge.html から style.css までを相対パスで示すと ../css/style.css になります。
(これが求めていたもので、上に書いた答えとなります)

下記は、URL必須ということで、一応有名どころを書いておきます。
http://www.tohoho-web.com/wwwunix.htm#RelativePathName

他2件のコメントを見る
id:windofjuly

トラブルを未然に防ぐために、
上の層を経由した相対指定は出来ないようにしているのかもしれません。

index/hogehoge.html の上の層は / ですが、
間違って /hogehoge.html に設置してしまうと、
最上位の / を超えてしまうということです。

それがWEBサーバーの仕様ならば仕方ありませんので、
下記のいずれかにするしかないですね。
(a)

/hogehoge.html
/css/style.css
/image/画像ファイル

(b)

/index/hogehoge.html
/index/css/style.css
/index/image/画像ファイル

>通常「index.html」はフォルダに入れないものなのでしょうか

cssファイルや画像ファイルは html に従うものなので、
htmlよりは下の階層、すなわち(b)のような構成にしますね。

2012/06/15 20:55:55
id:windofjuly

>すなわち(b)のような構成にします

すなわち(a)や(b)のような構成にします

2012/06/15 21:13:03
  • id:tsuka115
    余談ですが、NO.2の回答の様に、スクリプトを黒背景で表示しているのをちょくちょく見かけますが、どうやったらそうなるんでしょうか?
  • id:tsuka115
    <pre>PREタグで囲むだけ?</pre>
  • id:kyabana
    >tsuka115 さん
    PREタグで囲むだけでも出来ますし、はてな記法の「pre記法」「スーパーpre記法」「シンタックス・ハイライト」でも出来ますよ。
    http://q.hatena.ne.jp/help/answer_question

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません