- ベストアンサー
ホームページ作成時のフォルダ管理について
こんにちは。 先日から初のHP作りに挑戦しています。 今までブログを使っていたので、ブログのようにhtmlとcssを分けて作っています。 まずHP用のフォルダをつくり、そこにトップページのhtmlとcssを入れまして、FTPにてアップロードし現在きちんと表示されております。 問題はその次の段階で、カテゴリを3つ作りたいので、上記フォルダ内に3つの新フォルダを作成しました。 そしてカテゴリフォルダ毎にhtmlファイルを挿入し、表示させようと思ったのですが、cssが全く効いていない状態です。 CSS外部化のHPを作るには、下層フォルダ毎にhtmlファイルと一緒にCSSファイルも挿入しなければならないのでしょうか？ 宜しくお願いします。
- demi110
- お礼率35% (17/48)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシートを別ファイルで管理する場合は、各HTMLの<HEAD>タグの中に <link rel="stylesheet" type="text/css" href="xxx.css"> というような記述をしていると思います。 質問者様のフォルダ構成の場合、CSSファイルはトップのフォルダ（トップページのあるフォルダ）にあるようですので、カテゴリごとのフォルダ下にあるHTMLについては <link rel="stylesheet" type="text/css" href="../xxx.css"> のように、CSSファイルのパスの先頭に「../」を加える必要があります。 ※「../」は、現在のフォルダの上階層のフォルダに戻るパスを意味します。
その他の回答 (2)
- qualheart
- ベストアンサー率41% (1451/3486)
お役に立ててなによりです(´∇｀) 画像もCCSファイルを参照するのと同じです。 <img src="xxx.jpg"> と書くと、HTMLと同フォルダにある「xxx.jpg」画像を参照します。 同フォルダ内にこの画像がなければ、もちろん表示されません。 HTMLファイルのあるフォルダに画像フォルダを作成し、その中に画像ファイルが存在する場合は、 <img src="img/xxx.jpg"> のように書きます。（画像フォルダ名が「img」の場合） ひとつ上のフォルダに画像が存在するなら <img src="../xxx.jpg"> と書きます。 ちなみにふたつ上のフォルダであれば <img src="../../xxx.jpg"> のように、階層が上がるごとに「../」をどんどんと付け足していけばよいです。 あと、例えばひとつ上のフォルダの中にある「img」フォルダにあり、その中の画像を表示したい場合は、 <img src="../img/xxx.jpg"> のように書きます。 ※「../」でひとつ上に戻り、そこにある「img」というフォルダの中にある「xxx.jp」を参照している、という形になります。 これは、画像やCSSに限らず、HTML上でパスを指定する場合に共通に使う考え方です。 同サイト内の他のHTMLへのリンクをつける場合なども、この方法でパスを書きます。 <a href="../index.html>トップページに戻る</a> みたいな感じですね。 画像をどのフォルダに置くかは、自分の好きなように決めればよいです。 HTMLと同フォルダに入れる人もいるでしょうし、画像用のフォルダに入れてすべてそこを参照させるようにする人もいると思います。 後者の場合は、上記の例のように目的のフォルダまでのパスを書く必要があります。 初心者向けでは以下のページがとても役に立つでしょう。 基本的なところから、各タグの詳細な説明まで親切に解説されています。 http://www.tohoho-web.com/wwwbeg.htm
お礼
またまた詳しいご説明ありがとうございました。 本当に参考になります。 実に私が探していた情報で、現在も着々と作成が進んでおります。 また新たな疑問が出来てしまいました(汗 お時間ございましたらまた宜しくお願い致します。
こんにちは。 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を持っている人間からのアドバイスです。
お礼
ご回答ありがとうございました。 これまた今後の参考になるとても貴重な情報ですね。 だんだんとHP構造というかファイル管理方法が分かってきました。 有り難うございました。
お礼
有り難うございました。 無事解決いたしました。 基本的な事項かもしれませんが、何分初心者なものでお恥ずかしい限りです。 コツコツと作成ノウハウを身に付けていきたいと思います。 もう1点宜しいでしょうか？ imgなどの画像ファイルは下層フォルダにてどのように取り扱うのでしょうか？