資料.2 フォルダで階層構造にする

ホームページの更新を繰り返していくうちにページ数が増大して管理するのが大変になってきます。 これはパソコンでエクセルやワードで作成した資料の管理も同じですね。 ほとんどの方がカテゴリ別にフォルダを作成してわかりやすく整理していることでしょう。 ホームページの管理も同じように考えるのは当然だと思います。 しかし、単にフォルダを作成して分類しても今まであったリンクが途切れてしまいます。 そこでフォルダ間の文書のリンクを張る方法を説明します。

リンクタグ

リンクタグを見てみましょう。href=でHTML文のファイル名を指定します。 このファイル名にフォルダ名を追加して作成しますが、エクスプローラのように全てを指定するわけではありません。 つまりフォルダ名を指定する方法は常に自分の存在するフォルダ名がベースとなります。

<a href="ファイル名"> 〜 </a>

まず、フォルダの例題を以下に示します。

root/
  |-- index.html
  |-- diary/
  |     |-- index.html
  |     |-- year03/
  |     |     |-- index.html
  |     |-- year02/
  |           |-- index.html
  |-- qa/
        |-- index.html
        |-- year03/
        |     |-- index.html
        |-- year02/
              |-- index.html

rootフォルダのindex.htmlよりdiaryフォルダのindex.htmlへリンクする場合は、
<a href="diary/index.html"> 〜 </a>
というように指定します。

rootフォルダのindex.htmlよりdiaryフォルダの中のyear03フォルダのindex.htmlへリンクする場合は、
<a href="diary/year03/index.html"> 〜 </a>
というように指定します。

diaryフォルダのindex.htmlよりqaフォルダのindex.htmlへリンクする場合は、
<a href="../qa/index.html"> 〜 </a>
というように指定します。
"../"でdiaryフォルダより一つ上のrootフォルダへ移動して"qa/index.html"へリンクします。

diaryフォルダの中のyear03フォルダのindex.htmlよりqaフォルダのindex.htmlへリンクする場合は、
<a href="../../qa/index.html"> 〜 </a>
というように指定します。
"../../"でdiaryフォルダの中のyear03フォルダより二つ上のrootフォルダへ移動して"qa/index.html"へリンクします。

他のサイトへリンクする場合はそのままアドレスを記入し、
<a href="http://www.serpress.co.jp/"> 〜 </a>
というように指定します。

まとめ

・フォルダの階層を自分の存在するフォルダからフォルダ名+"/"でアドレスを記入します。
・別のフォルダへ移動する場合は"../"で一つ上のフォルダへ移動した後、フォルダ名+"/"でアドレスを記入します。
・他のサイトへリンクする場合は"http://"からのURLをそのまま記入します。

フォルダ指定するルールを覚えてしまえば意外と簡単です。

作成日：2003/12/17

| HOME | INDEX | 前 | 次 |