- Dreamweaver ユーザーガイド
- はじめに
- Dreamweaver と Creative Cloud
- Dreamweaver のワークスペースとビュー
- サイトの設定
- ファイルの管理
- レイアウトとデザイン
- CSS
- ページコンテンツとアセット
- ページプロパティの設定
- CSS 見出しプロパティおよび CSS リンクプロパティの設定
- テキストの操作
- テキスト、タグ、属性の検索と置換
- DOM パネル
- ライブビューでの編集
- Dreamweaver でのドキュメントのエンコード
- ドキュメントウィンドウでのエレメントの選択および表示
- プロパティインスペクターでのテキストプロパティの設定
- web ページのスペルチェック
- Dreamweaver での区切り線の使用
- Dreamweaver でのフォントの組み合わせの追加と変更
- アセットを使用した作業
- Dreamweaver での日付の挿入と更新
- Dreamweaver でのお気に入りアセットの作成と管理
- Dreamweaver でのイメージの挿入と編集
- メディアオブジェクトの追加
- Dreamweaver でのビデオの追加
- HTML5 ビデオの挿入
- SWF ファイルの挿入
- オーディオエフェクトの追加
- Dreamweaver での HTML5 オーディオの挿入
- ライブラリ項目の操作
- Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
- リンクおよびナビゲーション
- jQuery Widget と効果
- web サイトのコーディング
- Dreamweaver でのコーディングについて
- Dreamweaver のコーディング環境
- コーディングの環境設定
- コードカラーリングのカスタマイズ
- コードの記述と編集
- コードヒントとコード補完機能
- コードの折りたたみと展開
- スニペットでコードを再利用する
- 構文チェックコード
- コードの最適化
- デザインビューでのコードの編集
- ページのヘッドコンテンツの操作
- Dreamweaver でのサーバーサイドインクルードの挿入
- Dreamweaver でのタグライブラリの使用
- Dreamweaver へのカスタムタグの読み込み
- JavaScript ビヘイビアーの使用(基本操作)
- JavaScript に組み込まれているビヘイビアーの適用
- XML および XSLT について
- Dreamweaver でのサーバーサイド XSL 変換の実行
- Dreamweaver でのクライアントサイド XSL 変換の実行
- Dreamweaver での XSLT の文字エンティティの追加
- コードのフォーマット
- 製品間ワークフロー
- テンプレート
- Dreamweaver テンプレートについて
- テンプレートおよびテンプレートから作成されたドキュメントの認識
- Dreamweaver テンプレートの作成
- テンプレート編集可能領域の作成
- Dreamweaver でのリピート領域およびテーブルの作成
- テンプレートの任意の領域の使用
- Dreamweaver での編集可能なタグ属性の定義
- Dreamweaver でネストされたテンプレートを作成する方法
- テンプレートの編集、更新、削除
- Dreamweaver での xml コンテンツの書き出しおよび読み込み
- 既存のドキュメントでのテンプレートの適用または削除
- Dreamweaver テンプレートでのコンテンツの編集
- Dreamweaver でのテンプレートタグのシンタックスルール
- テンプレート領域のハイライト表示の環境設定
- Dreamweaver でテンプレートを使用する利点
- モバイルとマルチスクリーン
- 動的サイト、ページおよび web フォーム
- web アプリケーションについて
- アプリケーション開発のためのコンピューター設定
- データベース接続のトラブルシューティング
- Dreamweaver での接続スクリプトの削除
- 動的ページのデザイン
- 動的コンテンツソースの概要
- 動的コンテンツのソースの定義
- ページへの動的コンテンツの追加
- Dreamweaver での動的コンテンツの変更
- データベースのレコードの表示
- Dreamweaver でのライブデータの入力とトラブルシューティング
- Dreamweaver でのカスタムサーバービヘイビアーの追加
- Dreamweaver を使用したフォームの作成
- フォームを使用したユーザーからの情報の収集
- Dreamweaver での ColdFusion フォームの作成と有効化
- web フォームの作成
- フォームエレメントの HTML5 サポート強化
- Dreamweaver を使用したフォームの開発
- アプリケーションのビジュアル開発
- web サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
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 によってすべての相対リンクが自動的に更新されます。