htmlとcssの置き場所

Question

初心者で一から学習しています。
index.htmlを作成していて、cssも使った学習をしています。
htmlファイルとcssの置き場所は通常どうしているか教えて
ください。

いまは二つとも同じ階層においています。
これは学習サイトがこのようなやり方だったからです。
しかもここまでで終わりです。

メニューのindex.htmlを作成したので、そこから遷移する個別
メニューを作成しようとしてますが、そのファイル自体をその下
の階層に持ってきた方がよいのか(メインメニューから個別メニュー
なのでそう思った)、それとcssも個別メニューとして別定義したい
のでそれはやはり違う階層に置くべきか悩んでいます。

これから会社で作成していく一番初めなのである程度やり方を統一
しておいた方がよいと思った次第です。

参考にしたいのでお願いします。

Answer 1

「これから会社で作成していく」なら、その会社のやり方にまずは合わせてみるのが基本ではないでしょうか。スタイルが違っていると、今後会社の同僚と連携したり、チェックやアドバイスを求める際に、いちいち無駄な手間が発生すると思います。

そのうえで、私なら、ということで述べるなら……

• htmlファイルとcssファイルが1:1対応なら、両者は同じ階層に置きます。
• 多数のhtmlファイルが共通のcssを参照しているなら、そのCSSはトップディレクトリにおきます。ただしCSSが階層的に複数のファイルに分割されているならそれらは専用のディレクトリにまとめます。

Answer 2

メニューを作成しようとしてますが、そのファイル自体をその下の階層に持ってきた方がよいのか･･･

下に作った方が良いです。HTMLファイルはトップページのみ置いて、後はカテゴリ別にフォルダで下に作る方がSEO的に見ても良いかと思います。

※SEO的に言えば、各HTMLフォルダには「index.html」を置くようにしてください。
※CSS・JavaScript・image等のフォルダには要りません。

---

cssも個別メニューとして別定義したいのでそれはやはり違う階層に置くべきか･･･

「mackerel6.023」さんの回答にもあるように、CSSは、あるHTMLファイル専用だとしても、「CSSフォルダ」を作成し、その中にマトメた方が後々に管理しやすくなるかと思います。

Answer 3

あくまで「基本的には」ということになりますが、「css」というフォルダの下に置くことが多いです。
その他、以下のようなディレクトリを作ることが多いと思います。
「js」・・・javascriptを置く。
「img」・・・画像ファイルを置く。

ただ、例外はあります。
例えば自分で作ったcssじゃなく、オープンソースのcssを使う場合はcssフォルダにおかず、専用のディレクトリに置くこともあります。
このあたりはその人の個性にもよるところがあるので、あくまで「基本的には」と思っておけば良いかなと思います。

Answer 4

基本的にどこを求めるかによります。

事例１ : 見た目を重視する場合

見た目を重視するのなら他の回答者さんがおっしゃっている通りフォルダーにわかる等の工夫をした方が良いです。

事例２ : ミスを防ぐのを重視する場合

この場合はindex.htmlと同じフォルダの方がファイルパスのミスなどが減るとおもいます。

ご自身の環境によってどの方法が最適化は変わります。
たとえば複数個スタイルやスクリプトファイルがある場合はディレクトリの中に入れたりした方が管理面では楽です。
ご参考までに

Answer 5

参考リンクだけですが。

https://stackoverflow.com/questions/30970389/how-to-structure-my-html-files-properly

Organizing Files and Folder Structure for Web Pages

http://www.htmlquick.com/tutorials/organizing-website.html