ホームページ作成時のフォルダ構成とパスについて「教えてマリオ」

マリオデザイン

マリオデザインスタッフブログ「教えてマリオ」

ホーム>>教えてマリオトップ>>ホームページ作成時のフォルダ構成とパスについて

このブログはマリオデザインアルバイトスタッフがこれからWEbを勉強してみたいと思われている方や会社でホームページの更新業務を担当されているがよく意味が分からないという方のために、ホームページ作成の基礎を綴っていくものです。 難しい言葉を使わず(使えない)噛み砕いた言葉で書いていくので、参考になればと思います。
*勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。

ホームページ作成時のフォルダ構成とパスについて

ホームページを作るとき少なくても5ページぐらいは作成します。多いものになると100ページ以上のものもたくさんあります。

このたくさんあるページを管理するのはフォルダで管理します。ここではフォルダ構成・管理とパス(場所を示す住所のようなもの)の説明をしていきます。

目次
  1. フォルダ構成・管理
  2. 少し脱線、index.htmlとは
  3. パス、絶対パスと相対パス
1.フォルダ管理

1つのホームページは1つのフォルダで作成管理しなければいけません。例外はありますが基本1つに1つです。

ここで例をあげます。居酒屋マリオのホームページを作成する場合は下記のようになります。 居酒屋マリオは、トップページ(index.html),宴会ページ(party.html),ドリンクページ(drink.html),食べ物ページ(food.html),アクセス(access.html)の5ページで構成されていてるとします。CSSは外部ファイルに記述し名前をstyle.cssとします。ここでは良い例と悪い例を挙げていきます。

良い例

フォルダ管理よい例

良い点を挙げていきます。

①1つのフォルダの中にすべてのファイル・フォルダが入っている。
②フォルダ名もファイル名も全て半角英数字で書いてある。
③.cssファイルと.htmlファイルの識別がすぐできるようにフォルダで分けている。(izakayamarioという名前のフォルダのなかに.cssファイルを入れるcssという名前のフォルダを作成している)
*これはわかりやすくするためのもので絶対ではありません。
*.htmlファイルはフォルダで分けないようにしましょう。



上記のようにして1つのホームページは1つのフォルダで作成管理していきます。画像を使用する場合はcssのようにimgフォルダを作成して画像はその中に入れてあげればわかりやすいと思います。 まとめると.htmlファイル以外はフォルダで分けてあげるとわかりやすく管理できると思います。 *フォルダ名は任意(お好きな名前)で大丈夫ですので皆さんがわかりやす名前でも大丈夫です。



悪い例

フォルダの管理悪い例

悪い点を挙げていきます。

①1つのフォルダではなく2つのフォルダで管理されている。
②フォルダ名、ファイル名に日本語が使用されている。
③.cssファイルと.htmlファイルがフォルダわけされていないのでわかりづらい。

上記の良い点、悪い点を踏まえて、1つのフォルダで管理、名前は半角英数字で、.htmlファイル以外はわかりやすくフォルダで分ける、を意識して作成していきましょう。



2.少し脱線、index.htmlとは

先ほど居酒屋マリオの例を出しましたが、メニューページはmenu.htmlにしてトップページはtop.htmlではなくindex.htmlにしました。
なぜtop.htmlではなくindex.htmlなのかをここで簡単に説明します。

index.htmlとは??

一番初めに表示されるページに付けるファイル名です。indexと名前を付けているファイル名が一番初めに表示されるようになっています。なので作成するときはindex.htmlファイルに一番初めに表示してほしい内容を入るように作成していきましょう。


3.パス、絶対パスと相対パス

パスとは色々な意味がありますが、HTMLで使うパスは画像やファイルの場所を示す住所みたいなものです。パスには絶対パス相対パスがあります。

絶対パスとは??

絶対パスとは簡単に説明するとパス(住所)をすべて書くことを言います。http://から始まるアドレス(URL)を使って書き省略をせず、どこから見ても変わらないパス(住所)を書きます。

相対パスとは??

相対パスとは、パスを書く場所からみたパス(住所)を書きます。
*お互いに同じフォルダの中にないといけません。

下記のフォルダ構成の場合でtest.htmlを絶対パスと相対パスで書いてみます。
*ローカルやサーバーなどで書き方が変わりますがだいたいこんなものと覚えておいてください。

パスの説明
絶対パスで書くと

http://aaa/bbb/ccc/ddd/test.html
言葉で書くと
aaaの中にあるbbbの中にあるcccの中にあるdddの中にあるtest.htmlです。

相対パスで書くと(index.htmlにパスを書いた場合)

./test.html

test.html
です。
言葉で書くと
おんなじ階層にあるtest.htmlです。

相対パスで書くとこんなに短く書くことができます。 初めのうちは使い分けることはほとんどないと思いますので、自分のホームページへのリンク、画像の読み込みは相対パスで書いて、ほかのホームページにリンクさせる場合は絶対パスで書くと簡単に覚えておいていいと思います。

最後にパスを書くときに使う記号の説明をします。上の例では/(スラッシュ)を使っていてこの意味は~の中にあるです。そのほかにもありますので説明いたします。

記号 意味
/(スラッシュ) ~の中にある
./(ドットスラッシュ)(省略可) 同階層(おなじフォルダ)にある
../(ドットドットスラッシュ) 1つ上の階層(1つ上のフォルダ)にある


例をあげてみます。
2つともindex.htmlからみた相対パスです。

例1

aaaという名前のフォルダの中にbbbとcccというフォルダが入っていてbbbの中にはindex.htmlがはいっていて、cccの中にはtest.htmが入っている状態です。 パスサンプル1

パスは
../ccc/test.html
言葉で書くと
index.htmlから見て1つ上のフォルダcccの中にあるtest.html
です。

例2

aaaという名前のフォルダの中にindex.htmlファイルとcccというフォルダが入っていて、cccの中にはtest.htmが入っている状態です。 パスサンプル2

パスは
ccc/test.html

./ccc/test.html
言葉で書くと
index.htmlから同階層(同じ場所)にあるフォルダcccの中にあるtest.html
です。
*私はいつも./は省略して書きます。

以上でパスの説明は終わりです。慣れるまでは、難しいかもしれませんが、パスはホームページ作成において重要ですのでしっかりと覚えていきましょう。


このエントリーをはてなブックマークに追加

コメント欄

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

TRACKBACK_URL