CSSをHTMLに反映する。

Question

【分からないこと】
初めてAWS cloud9を使っているのですが、上の画像のようにCSSがHTMLに反映されていません。
普段使っているAtomと違って、cloud9は使い方がよく分かっていません。
CSSをHTMLに適用するにはどうすればよいでしょうか。

【試したこと】

<link rel="stylesheet" href="cssのファイル名">をHTMLに書いたのですが、効果がありませんでした。 ほかに考えられる原因はないのでしょうか？

Comments

[meg_]

パスは合っていますか？

[sun-chan]

返信ありがとうございます。
すみませんが、パスが合うとはどういう事を指すのでしょうか？

[m.ts10806]

コードを画像で提示されても誰も再現確認できないので、
テキストでマークダウンのコード機能にてご提示ください。

あと
提示された画像の通りアップロードされたなら
同じ階層にCSSないですね。

[meg_]

href="cssのファイル名"のところのパスが正しく書かれているのか？ということです。

[Lhankor_Mhy]

cloud9 はよくわからないので的外れだったらすみませんが、スクリーンショットを見る限り、index2.html と style2.css は同じ階層にないように見えます。

[sun-chan]

パス名を確認したところ、異なる階層の場合は書き方が変わるようでした。
自分の上げた画像の表記では、パス名にミスがありました。申し訳ありません。
回答してくださった方々、ありがとうございました

Answer 1

cssをHTMLに適用する場合は、

index-html
style.css
と

それぞれが【同じ】階層なら<link rel="stylesheet" href="cssのファイル名">でよい。

つまり

<link rel="stylesheet" href="style.css">

これが自分が書いていたコードであった。（しかし両者は同じ階層にいないので、今回これは間違い）

一方

index-html
css→style.css
のように
style.cssがcssファイルの【一つ】下の階層にある（つまりindex.htmlよりも一つ下の階層であり、それぞれにズレが生じている）ならば、　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　

<link rel="stylesheet"（ここまでは同じ）href="./style.cssの一つ上の階層のファイル名(今回ならば「css」ファイルの事)/style.css（つまり自分が反映したいcssファイル名)">と記述しなければならない。

つまり、

<link rel="stylesheet" href=".css/style.css">と書く必要がある。 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑style.cssのまえに　.cssの記述をし忘れていた。

結局は「相対パス」が理解できていなかったということです。

注：トップの画像では、css2フォルダーまでしか映っていませんがstyle2.cssファイルがさらに下に隠れています。

自分のテキストの構成
本当は
mobile-design
css2-style2.css
images
js
index2.htmlとなっています。

（行頭がそろっているのは全て同じ階層。
style2.cssはcssより下の階層ということです）