カスタム検索

Webサイトのディレクトリ構造

ディレクトリの階層構造を決めます。後からページが増える予定があれば、多少階層が深くなっても、カテゴリ別、そのサブカテゴリ別といったように多めのディレクトリを用意した方が無難です。

この料理レシピ集の場合、将来レシピが増える可能性があるので、炒めもの、鍋もの等のようにカテゴリを作った方が良いでしょう。レシピが増えた場合、炒めもののレシピのみをリストアップしたようなページを後から追加するのが容易になります。 また、個々の料理レシピに画像を表示させるので、画像保存用のディレクトリも作成します。

尚、画像についてはずぼら主婦の料理レシピ集の各ページから画像を右クリックしてダウンロードしてご使用ください。

レシピ集のディレクトリ構造

最終的にレシピ集のディレクトリ構造は以下のようになります。ディレクトリ構造は任意のものにしても結構ですが、このチュートリアルでは学習のために以下のようなディレクトリ構造にします。

  • /
    • index.html
    • gohanmono
      • takenoko_gohan
        • takenoko_gohan.html
        • images
          • takenoko_gohan.jpg
      • kuri_gohan
        • kuri_gohan.html
        • images
          • kuri_gohan.jpg
    • nimono
      • butaniku_piman
        • butaniku_piman.html
        • images
          • butaniku_piman.jpg
      • atuage_hasamini
        • atuage_hasamini.html
        • images
          • atuage_hasamini.jpg
    • itamemono
      • siromizakana
        • siromizakana.html
        • images
          • siromizakana.jpg
      • tamago_butaniku
        • tamago_butaniku.html
        • images
          • tamago_butaniku.jpg
    • nabemono
      • yanagawanabe
        • yanagawanabe.html
        • images
          • yanagawanabe.jpg
      • butaniku_orositaki
        • butaniku_orositaki.html
        • images
          • butaniku_orositaki.jpg

ここでの最上位のディレクトリ「/」(ルートディレクトリ)は、プロバイダや、レンタルサーバから指定されるホームページスペース(ドキュメントルート)を意味しています。自分のパソコンでサイトを作成している段階では、このディレクトリ名は何でも構いません。

また、トップページのファイル名は「index.html」とするのが一般的です。

CopyLeft 2024 Webデザインレッスン プライバシーポリシー サイト管理者に連絡