Dreamweaver でのリンクおよびナビゲーションと、絶対パス、ドキュメント相対パス、サイトルート相対パスについて説明します。

Web サイトのドキュメントを保存する Dreamweaver サイトを設定し、HTML ページを作成すると、自分のドキュメントから他のドキュメントにリンクできるようになります。

Dreamweaver では、ドキュメント、イメージ、マルチメディアファイル、またはダウンロード可能なプログラムへのリンクを様々な方法で作成できます。見出し、リスト、テーブル、絶対位置のエレメント(AP エレメント)、またはフレームなど、ドキュメント内のどこにでも、テキストやイメージのリンクを確立できます。

リンクの作成および管理は、様々な方法で行うことができます。最初にすべてのファイルとページを作成してからリンクを追加する方法もあれば、実際にはまだ作成されていないページやファイルを想定してリンクを作成する方法もあります。リンクを管理するもう 1 つの方法としては、プレースホルダーページを作成します。プレースホルダーページでは、すべてのサイトページを完成させる前に、リンクの追加およびリンクのテストができます。

絶対パス、ドキュメント相対パスおよびサイトルート相対パス

リンクを作成する場合は、リンク元のドキュメントとリンク先のドキュメントまたはアセット間のファイルパスを把握している必要があります。

各 Web ページには、URL(Universal Resource Locator:ユニバーサルリソースロケーター)と呼ばれる固有のアドレスがあります。ただし、ローカルリンク(同じサイト内のドキュメント間で作成されるリンク)を作成する場合は、リンクを作成するドキュメントの URL のすべてを指定する必要はありません。代わりに、現在のドキュメントまたはサイトのルートフォルダーからの相対パスを指定します。

リンクパスには、次の 3 種類があります。

  • 絶対パス(http://www.adobe.com/jp/support/dreamweaver/contents.html など)。

  • ドキュメント相対パス(dreamweaver/contents.html など)。

  • サイトルート相対パス(/support/dreamweaver/contents.html など)。

    Dreamweaver を使用すると、リンクを作成するためのドキュメントパスの種類を簡単に選択できます。

注意:

使用するリンクの種類は、好みに応じて選択できます。サイトルート相対パスでもドキュメント相対パスでも、使用しやすいパスで指定することができます。リンクを表示する場合は、パスの入力とは対照的に常に正確なパスを入力する必要があります。

絶対パス

絶対パスは、使用するプロトコル(Web を表す http://)をはじめとして、http://www.adobe.com/jp/support/dreamweaver/contents.html のように、リンクされたドキュメントの完全な URL を表します。イメージアセットの場合、完全な URL は、http://www.adobe.com/jp/support/dreamweaver/images/image1.jpg のようになります。

他のサーバー上のドキュメントまたはアセットにリンクする際は、絶対パスを使用します。また、ローカルリンク(同じサイト内のドキュメント間のリンク)でも絶対パスを使用できます。ただし、絶対パスで指定した場合、他のドメイン内にサイトを移動するとローカルの絶対パスによるリンクはすべて機能しなくなります。それに対して、ローカルリンクで相対パスを使用すると、サイト内でファイルを移動した場合でも柔軟に対応できます。

注意:

リンクではなくイメージを挿入すると、リモートサーバーにあるイメージ(ローカルハードドライブにはないイメージ)の絶対パスを使用できます。

ドキュメント相対パス

ドキュメント相対パスは、ほとんどの Web サイトのローカルリンクに最も適しています。現在のドキュメントとリンク対象のドキュメントまたはアセットが同じフォルダー内にあり、共にそのまま配置しておく場合は特に便利です。ドキュメント相対パスを使うと、現在のドキュメントからリンクされたドキュメントまでのパスをフォルダー階層を通して指定して、他のフォルダーのドキュメントまたはアセットにリンクできます。

ドキュメント相対パスを指定する場合は、現在のドキュメントとリンク対象のドキュメントまたはアセットのパスで異なる部分だけを指定します。両方に共通する絶対パスの部分は省略します。

例えば、次の構造のサイトがあるとします。

ドキュメント相対パス
  • "contents.html" から "hours.html"(いずれも同じフォルダー内)にリンクするには、相対パス "hours.html" を使用します。

  • "contents.html" から "tips.html"(resources サブフォルダー内)にリンクするには、相対パス "resources/tips.html" を使用します。スラッシュ(/)は、フォルダー階層で 1 レベル下に移動することを意味します。

  • "contents.html" から "index.html"(親フォルダー内で、"contents.html" の 1 レベル上にある)にリンクするには、相対パス "../index.html" を使います。ドット 2 つとスラッシュ(../)は、フォルダー階層で 1 レベル上に移動することを意味します。

  • "contents.html" から "catalog.html"(親フォルダーの、別のサブフォルダーにある)にリンクするには、相対パス "../products/catalog.html" を使います。"../" は、親フォルダーに向かって上に移動することを意味し、"products/" は、products サブフォルダーに向かって下に移動することを意味します。

    いくつかのまとまったファイルをグループとして移動する場合、例えばフォルダー全体を移動するような場合は、フォルダー内のすべてのファイル間で相対パスが維持されるため、ファイル間のドキュメント相対リンクを更新する必要はありません。ただし、ドキュメント相対リンクを含む個別のファイルを移動する場合、またはドキュメント相対リンクでリンクされた個別のファイルを移動する場合は、リンクを更新する必要があります。ファイルパネルでファイルを移動または名前変更すると、Dreamweaver によってすべての相対リンクが自動的に更新されます。

サイトルート相対パス

サイトルート相対パスは、サイトのルートフォルダーからドキュメントまでのパスを指定します。複数のサーバーを使用する、または複数のサイトを持つサーバーを使用する大規模な Web サイトを構築している場合には、サイトルート相対パスが適しています。ただし、このようなパスの使い方を十分に理解していない場合は、ドキュメント相対パスを使用することもできます。

サイトルート相対パスは、サイトのルートフォルダーを意味するスラッシュから始まります。例えば、/support/tips.html はサイトのルートフォルダーの support サブフォルダーにある tips.html ファイルへのサイトルート相対パスです。

通常、サイトルート相対パスは、Web サイト上のあるフォルダーから他のフォルダーに HTML ファイルを頻繁に移動する必要がある場合のリンクの指定に適しています。ルート相対リンクを含むドキュメントを移動する場合、リンクを変更する必要はありません。リンクは、ドキュメント自体ではなく、サイトルートに対して相対的であるためです。例えば、HTML ファイルで依存ファイル(イメージなど)に対してサイトルート相対リンクを使用している場合、HTML ファイルを移動しても、依存ファイルのリンクは有効のままです。

ただし、サイトルート相対リンクでリンクされたドキュメントを移動または名前変更する場合は、そのリンクを更新する必要があります。ドキュメント間の相対パスが変わっていない場合でも、リンクの更新が必要です。例えば、フォルダーを移動すると、そのフォルダー内のファイルへのすべてのサイトルート相対リンクを更新する必要があります。ファイルパネルでファイルを移動または名前変更すると、Dreamweaver によってすべての相対リンクが自動的に更新されます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー