パスとは?

パスとは、htmlファイルや画像ファイルなどのファイルの場所を指定するための「住所」のことです。他のサイトや自分のサイト内の別のページにリンクする時や、画像を表示したい時に、それらのファイルがどこにあるのかを指定する必要があります。

そしてその「住所」の書き方には「絶対パス」と「相対パス」があります。

絶対パス

絶対パスとはhttp://~から始まるURLでファイルの場所を指定する方法です。

主に他サイトにリンクをはる場合などに使います。

相対パス

相対パスとは、「基準となるファイルから他のファイルまでの相対的な位置関係」でファイルの場所を指定する方法です。

理解できるまでちょっと難しいかもしれませんが、自サイト内のファイルをリンクする場合には相対パスを使うことをオススメします。

なぜ相対パスがオススメなの?

相対パスを使うには、PC内(ローカル)と、webサーバ上でのディレクトリ(フォルダ)構成を一緒にしておくことが前提です。

  • 絶対パスを使っていると、ローカルで更新中に表示確認しようとした時にインターネット上のファイルを参照してしまうことがある。
  • 何かの都合でサーバ移転をした場合に、自サイト内リンクを書き換える必要がない

相対パスの書き方

相対パスを記述するには以下の2つの記号を使います。

  • ./」――現在の階層(フォルダ)を表します
  • ../」――現在の階層の一つ上の階層を表します

ディレクトリ構成図

例えばこのようにフォルダとファイルを作ったとします。

「main」の中の「index.html」から「main」の中の「mix.html」にリンクをはる場合
同じフォルダの中のファイルなので
<a href="./mix.html">メイン</a>
「myHP」の中の「index.html」から「main」の中の「index.html」にリンクをはる場合
同じ階層の中の「main」と言うフォルダの中(一つ下の階層)のファイルなので
<a href="./main/">メイン</a>
または
<a href="./main/index.html">メイン</a>
「main」の中の「index.html」からに「myHP」の中の「index.html」リンクをはる場合
「main」の中の「index.html」から見て一つ上の階層のファイルなので
<a href="../">メイン</a>
または
<a href="../index.html">メイン</a>
「main」の中の「index.html」にgazou.gifを表示する場合
一つ上のフォルダの中のファイルなので
<img src="../img/gazou.gif" width="~" height="~" alt="~">
「main」の中の「sub」の中の「a.html」から「myHP」の「index.html」にリンクをはる場合
二つ上のフォルダの中のファイルなので
<a href="../../">メイン</a>
または
<a href="../../index.html">メイン</a>

になります。複数段階上の階層を示すには「../../../~」というふうに「../」をフォルダの数分続けます。

いまいち「階層」がわからない時は

  • フォルダを開き、[ツールバー]の[フォルダ]をクリック。

    ツールバーの図

  • 左側にフォルダの階層がツリー表示されます。

    フォルダの階層がツリー表示の図

ez-htmlを使うともっと便利

ez-htmlでは左側にフォルダのツリー表示と選んだフォルダの中のファイルを一覧表示してくれます。リンクを貼りたいファイルを選んで右クリックし、メニューから「相対パスを貼り付け」をクリックすると相対パスを挿入してくれます。

ez-html図

よければアンケートにご協力下さい。今後のページ作りの参考にします。

このページは参考になりましたか?
© 10press rights reserved.  |  Last Modified: 2008-06-22T11:46:34

PAGETOP