CSSがHTMLに反映されません｡当方､web制作をはじめたばかりの初心者です｡ CSSがHTMLに反映されないのですが､以下のどちらかに原因があるのではと考えております｡･相…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

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

当方､web制作をはじめたばかりの初心者です｡
CSSがHTMLに反映されないのですが､以下のどちらかに原因があるのではと考えております｡
･相対ﾊﾟｽの設定がおかしい
･ﾌｫﾙﾀﾞ分けがおかしい

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

ﾌｫﾙﾀﾞ分けは｢/｣というﾌｫﾙﾀﾞの中に｢index｣｢css｣｢image｣のﾌｫﾙﾀﾞをつくり｢css｣ﾌｫﾙﾀﾞの中に｢style.css｣というﾌｧｲﾙが入っております｡

ご回答お待ちしております｡なお､ご回答頂く場合には､お手数ですがｿｰｽとなるURLをご呈示くださいますようお願いします｡

●拡大する

●質問者: halappa
●ｶﾃｺﾞﾘ:ｲﾝﾀｰﾈｯﾄｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

▽1 ● a-kuma3
●100ﾎﾟｲﾝﾄ

ｽﾀｲﾙが反映されない HTML というのは､どこに置いてありますか？
もしかしたら､index ﾌｫﾙﾀﾞの中に置いてたりします？

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

halappaさんのｺﾒﾝﾄ
回答ありがとうございます｡ｽﾀｲﾙが反映されない HTML(index.html)はindexﾌｫﾙﾀﾞの中にいれておりました...！しかし､ご回答いただいた内容のとおり､書き換えたのですが､CSSがあたりませんでした｡a-kuma3さんにご回答いただいた内容や他の回答者さまにご説明していただいた内容に納得し､わたしも上記の書き換えでうまくいくのでは､と思ったのですがうまくいきませんでした....｡せっかくご回答頂いたのにすみません....｡(index.htmlをindexﾌｫﾙﾀﾞから出したら解決(cssがあたった)したのですが､できたら､indexﾌｫﾙﾀﾞにいれたい気持ちです....)

a-kuma3さんのｺﾒﾝﾄ
相対ﾊﾟｽじゃないんですけど､link ﾀｸﾞの href にﾎｽﾄ名を書きたくない､ということであれば､ >> <link href="/css/style.css" rel="stylesheet" type="text/css" media="all"> << と､書くのでも良いかな｡ index.html だと､入口のﾍﾟｰｼﾞなので､HTTP で公開しているﾌｫﾙﾀﾞの直下に置くのが普通だと思いますけど､それ以外の HTML だったら､普通に階層を作って下に置きますから､何か納得いかないですね｡ >|txt| /index.html /diary/ …… 日記の HTML /memo/ …… ﾒﾓの HTML /css/ …… ｽﾀｲﾙｼｰﾄを置くﾃﾞｨﾚｸﾄﾘ /scripts/ …… javascript を置くﾃﾞｨﾚｸﾄﾘ ||< というのは､普通の構成だと思います｡

▽2 ● うぃんど
●100ﾎﾟｲﾝﾄ

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

うぃんどさんのｺﾒﾝﾄ
1つずれてたので回答を訂正しました｡

halappaさんのｺﾒﾝﾄ
ご回答ありがとうございます｡ご丁寧な説明､とてもありがたいです｡ところが､上記の通り書き換えたところうまくできず､ﾚﾝﾀﾙｻｰﾊﾞｰの会社にお問い合わせをしたところ､以下のようにご回答をいただきました｡｢ﾌｫﾙﾀﾞ｢index｣の中に｢index.html｣というﾌｧｲﾙが設置されている場合､正しくCSSを参照できません｡HTMLﾌｧｲﾙよりも上の階層にCSSのﾃﾞｰﾀが保存されたﾌｫﾙﾀﾞがあるからです｡つきましては､ﾌｫﾙﾀﾞ｢index｣は削除､ WEBｻｰﾊﾞｰ上のにﾄｯﾌﾟ｢index.html｣を設置ください｡｣その通りにやったら､たしかにCSSは当たったのですが､なぜ､windofjulyさんにご連絡いただいた方法でできなかったのか分からずじまいでした｡通常｢index.html｣はﾌｫﾙﾀﾞに入れないものなのでしょうか...

うぃんどさんのｺﾒﾝﾄ
ﾄﾗﾌﾞﾙを未然に防ぐために､上の層を経由した相対指定は出来ないようにしているのかもしれません｡ 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)のような構成にしますね｡

うぃんどさんのｺﾒﾝﾄ
＞すなわち(b)のような構成にしますすなわち(a)や(b)のような構成にします