ホームページ作成時のフォルダ管理について

Question

こんにちは。
先日から初のHP作りに挑戦しています。

今までブログを使っていたので、ブログのようにhtmlとcssを分けて作っています。
まずHP用のフォルダをつくり、そこにトップページのhtmlとcssを入れまして、FTPにてアップロードし現在きちんと表示されております。

問題はその次の段階で、カテゴリを3つ作りたいので、上記フォルダ内に3つの新フォルダを作成しました。
そしてカテゴリフォルダ毎にhtmlファイルを挿入し、表示させようと思ったのですが、cssが全く効いていない状態です。
CSS外部化のHPを作るには、下層フォルダ毎にhtmlファイルと一緒にCSSファイルも挿入しなければならないのでしょうか？

宜しくお願いします。

qualheart · Accepted Answer

スタイルシートを別ファイルで管理する場合は、各HTMLのタグの中にというような記述をしていると思います。質問者様のフォルダ構成の場合、CSSファイルはトップのフォルダ（トップページのあるフォルダ）にあるようですので、カテゴリごとのフォルダ下にあるHTMLについてはのように、CSSファイルのパスの先頭に「../」を加える必要があります。 ※「../」は、現在のフォルダの上階層のフォルダに戻るパスを意味します。

qualheart · Answer

お役に立ててなによりです(´∇｀) 画像もCCSファイルを参照するのと同じです。

と書くと、HTMLと同フォルダにある「xxx.jpg」画像を参照します。同フォルダ内にこの画像がなければ、もちろん表示されません。 HTMLファイルのあるフォルダに画像フォルダを作成し、その中に画像ファイルが存在する場合は、

のように書きます。（画像フォルダ名が「img」の場合）ひとつ上のフォルダに画像が存在するなら

と書きます。ちなみにふたつ上のフォルダであれば

のように、階層が上がるごとに「../」をどんどんと付け足していけばよいです。あと、例えばひとつ上のフォルダの中にある「img」フォルダにあり、その中の画像を表示したい場合は、

のように書きます。 ※「../」でひとつ上に戻り、そこにある「img」というフォルダの中にある「xxx.jp」を参照している、という形になります。これは、画像やCSSに限らず、HTML上でパスを指定する場合に共通に使う考え方です。同サイト内の他のHTMLへのリンクをつける場合なども、この方法でパスを書きます。

mariocec · Answer

こんにちは。

HP作り、楽しみですね。

>CSS外部化のHPを作るには、下層フォルダ毎にhtmlファイルと一緒にCSSファイルも挿入しなければならないのでしょうか？

その方法も可能ですけど、後々の管理を簡単にするには別の方法があります。ご質問の趣旨からはちょっと遠回りの回答になりますが、お許し下さい。先にどんぴしゃりの回答をするならHTMLファイルに書き込むCSSのパスの問題だ、と言う事ではないでしょうか。

どのようなフォルダ構成にするかは、どのような規模のHPを目指しておられるかに依ります。
でも、ご参考までにほんの一例として、直感的な判りやすさと規模が大きくなっても整理がしやすい事を考えながらフォルダ構造を作ってみますと、前提条件としてHPは3カテゴリで構成されるとし、どのカテゴリのHTMLファイルも背景色など一部デザインを除いて大部分のデザインは共通だと仮定すれば；

HP全体を納める大きなフォルダの中に入れるファイルは4枚、そしてそれと同じ階層にはフォルダを4つ置きます。その詳細は
１）index.html　2）A.htm　３）B.htm　4)C.htm
５）CSS_folder　６）A_folder　７）B_folder　８）C_folder

５）のCSS_folderには外部CSSを入れます。これは今は外部CSS1枚かも知れませんが、将来細かくCSSでデザインを作り上げる時に、色だけのCSS、文字だけのCSS、表デザインだけのCSSなどと小分けしておくとCSSを読んで一部訂正する時など管理がとても楽でスムーズになりますからお勧めです。後悔はさせません。

2)のA.htmに表示させたい画像などの部品やちょっとしたリンクHTMLファイルなどを６）のA_folderに納めます。以下の2カテゴリも同様にします。なお、もしindex.htmlに表示させたい画像があれば、その為に９）index_folderを作って納めれば後々判りやすいでしょう。

やっと回答らしいものにたどり着きますが、上記のようにした時各HTMLファイルの<head>～</head>に入れる外部CSSに関するリンク記述は共通して次のようになります。

<link rel="stylesheet" href="CSS_folder/color.css">
<link rel="stylesheet" href="CSS_folder/font.css">
<link rel="stylesheet" href="CSS_folder/table.css">

HPが成長して規模が大きくなると、どこにどんな記述をしたやら訳が判らなくなります。CSSも無秩序にあちこちに書き込むと矛盾が起きたりしますから外部CSSに書き込んだのにデザインが変わらない、さて？と迷ったりします。なお、回答の中のフォルダ構成やファイル名フォルダ名、CSSシートの小分けの仕方には拘らないで下さい。

以上サイトが大きくなり過ぎたHPを持っている人間からのアドバイスです。

ホームページ作成時のフォルダ管理について

スタイルシートを別ファイルで管理する場合は、各HTMLの<HEAD>タグの中に

お役に立ててなによりです(´∇｀)

こんにちは。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング