halappa回答ポイント 200ptウォッチ 1

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

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

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

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

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

• はてなアカウントでログイン
• 無料ユーザー登録

みんなの回答

• a-kuma32012/06/15 09:45:55

  満足100pt

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

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

  スター

  • 

    2件のコメントを見る

  • halappa 2012/06/15 20:34:46

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

    スター

  • a-kuma3 2012/06/15 21:53:37

    相対パスじゃないんですけど、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 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

スター

• 

  4件のコメントを見る

• うぃんど 2012/06/15 10:10:55

  １つずれてたので回答を訂正しました。

  スター

• halappa 2012/06/15 20:45:35

  ご回答ありがとうございます。ご丁寧な説明、とてもありがたいです。
  ところが、上記の通り書き換えたところうまくできず、レンタルサーバーの会社にお問い合わせをしたところ、以下のようにご回答をいただきました。
  「フォルダ「index」の中に「index.html」というファイルが設置されている場合、正しくCSSを参照できません。HTMLファイルよりも上の階層にCSSのデータが保存されたフォルダがあるからです。つきましては、フォルダ「index」は削除、 WEBサーバー上のにトップ「index.html」を設置ください。」
  
  その通りにやったら、たしかにCSSは当たったのですが、なぜ、windofjulyさんにご連絡いただいた方法でできなかったのか分からずじまいでした。
  通常「index.html」はフォルダに入れないものなのでしょうか...

  スター

• うぃんど 2012/06/15 20:55:55

  トラブルを未然に防ぐために、
  上の層を経由した相対指定は出来ないようにしているのかもしれません。
  
  index/hogehoge.html の上の層は / ですが、
  間違って /hogehoge.html に設置してしまうと、
  最上位の / を超えてしまうということです。
  
  それがWEBサーバーの仕様ならば仕方ありませんので、
  下記のいずれかにするしかないですね。
  （ａ）

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

  （ｂ）

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

  
  

  ＞通常「index.html」はフォルダに入れないものなのでしょうか
  
  cssファイルや画像ファイルは html に従うものなので、
  htmlよりは下の階層、すなわち（ｂ）のような構成にしますね。

  スター

• うぃんど 2012/06/15 21:13:03

  ＞すなわち（ｂ）のような構成にします
  
  すなわち（ａ）や（ｂ）のような構成にします

  スター
• その他の回答を読む

この質問へのコメント

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

質問の情報

登録日時

2012-06-15 09:33:14

終了日時

2012-06-22 09:35:03

回答条件

回答にURL必須 1人5回まで

この質問のカテゴリ

• インターネット
• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者112日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者16時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者116時間前
• 内定してほしいポケモンはいますか？匿名質問者17時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ