ファイル

WEBサイトのファイルおよびフォルダの構成

ポイント！構成についての考え方
～わかりやすく簡潔に～

  • フォルダ構成をそのままURLを構成することを考えます（わかりやすい為）。
  • URLを短くします。理由は短い方がユーザーに好まれる為です。
  • なるべくフォルダ内にフォルダを置く構成は避け、管理面から考えてわかりづらくなるのを避ける為です。

    • WEBサイトのファイル・フォルダの構成例

    2つのファイル構成例をご紹介します。

  • パターン①小・中規模サイト向け
  • パターン②大規模サイト向け

    • 小規模なWEBサイトであってもURLを短くできるのでユーザーのことを考え、ユーザーに好まれるパターン②を推奨します。

    パターン①　小・中規模サイト向け

    トップにHTMLファイルを固めるパターンです。

    特徴

  • 小、中規模用のWEBサイト向き。
  • (メリット)HTMLファイルが一覧で見れる為、見やすく管理しやすい。
  • (デメリット)ページ数が増えるとHTMLファイルを置いた階層にファイルが増え、管理し辛くなる。
    • ファイル構成例①
    ファイル構成例①　小・中規模サイト向け

    パターン②　大規模サイト向け

    トップのindex.htmlを除き、全てのファイルをフォルダごとに分けるパターンです。

    特徴

  • 大規模用のWEBサイト向き
  • (メリット)URLを短く省略できる(〇〇.com/contact/のみで済み、以降のindex.htmlを省略できる為)
  • (デメリット)フォルダが増え、ファイルの一覧性がなくなります。
    • ファイル構成例②
    ファイル構成例②　大規模サイト向け

    ポイント！フォルダ内にファイルを置くという癖をつけよう

    『フォルダの中にファイルを置く』というのはパソコンでのファイル整理術の基本です。会社のデスク、机の中、プライベートの部屋の整理においても同様のことが言えるのではないでしょうか。WEBサイトのファイル・フォルダ構成においても同様と言えます。

    特に自分だけが管理するWEBサイトでなく複数の人が管理したり、他人に管理を移譲する場合は分かりやすく、効率的に管理しやすくするために、整理・整頓しておくのがマナーです。

    各ファイルの説明

    HTML(えいちてぃーえむえる）

    index.htmlなど

  • W3Cの仕様の一つで、マークアップ言語の一つ。
  • World Wide Web において、ウェブページを表現するために用いられる。
  • 見出しやフォント、文字の色などが変えられる機能もある。

    • CSS（しーえすえす）

    style.cssなど

  • W3Cの仕様の一つ。
  • HTML や XML の要素をどのように修飾するかを指示する。
  • 文章の構造、文字の色、影など装飾する機能がある。

    • 画像ファイル

    JPG（じぇいぺぐ）

    "image01.jpgなど

  • 静止画像のデジタルデータを圧縮する方式のひとつ。
  • 非可逆圧縮の画像フォーマット
  • スマホやデジカメで撮影した写真はこのファイル形式になる。

    • PNG（ぴんぐ）

    image01.pngなど

  • ビットマップ画像を扱うファイルフォーマット
  • 可逆圧縮の画像フォーマット(圧縮による画像劣化が少ない)
  • ビットごとに透明度を設定できるので、例えば文字の周囲だけを透明にしたい場合のロゴを作るときに楽。

    • ICO（あいこん)

    favicon.icoなど

  • Microsoft Windowsにおけるアイコンで使用する画像ファイルフォーマット。
  • HTMLではlink要素で、オリジナルのファビコンを設定できる。
  • ブラウザのアドレスバーなどに表示される小さなアイコンを設定できる。

    • Javascript（じゃばすくりぷと）

    javascript.jsなど

  • 動的なWebページを作成する事のできるプログラミング言語。
  • ブラウザ上で実行される。
  • カレンダーや地図、ゲームといった機能で使用される。

    • php（ぴーえいちぴー）

    mail.phpなど

  • プログラミング言語
  • 特にサーバー側で動的なウェブページ作成するための機能で使用される。
  • 問い合わせフォームといった機能で使用される。

    • その他

    他にも.htaccessファイルがあります。.htaccessとは､ Webサーバーをディレクトリ単位で制御するためのファイルで､ リダイレクトやBASIC認証､404エラーページの作成を行えます｡

    パスワードで見れる人を制限する、リンク先のページがなかったりしたときのエラー表示、スマホ用とパソコン用でファイルを分けるなどの機能があります。

    ただし、サーバーが対応している場合に使用できます。

    ワン吉ワン吉

    HTMLやCSSだってまだよくわかっていないのに、他にもたくさんファイルやプログラムが出てきたワン…。どうしよう。

    登場人物ニャン太老師ニャン太老師

    まずはHTMLの基本であるHTMLとCSSをマスターすることに集中するニャ。Javascriptやphpは完全に全てをマスターするには時間がかかるニャ。スライドショーやアコーディオンのメニューバー、問い合わせフォームなど使う必要があるような場合は、動作や機能を理解した上で動作が保証されたプログラムをコピー＆ペーストで使うことをおススメするニャ。Jacascriptやphpなどは、一つ一つ紐解けば、理解できるニャ。焦らずゆっくりマスターしていこう。

    まとめ

  • WEBサイトのファイル・フォルダ構成は端的にわかりやすく
  • 規模やファイル数に合わせ、ファイル・フォルダを構成する。
  • ユーザーや他の管理者のことも考える。

    • 次回予告

    制作に必要なものは？

    次回はWEBサイト制作に必要なものを解説します。WEBサイト制作にはパソコンやデジカメが必要です。またWEBサイトの開設・運営にはWEBサーバーやドメインが必要です。

    「無理ならコピペでWebサイト自作入門 ～制作に必要なものは？～」

    次回はこちら