- 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 サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
デザインノートについて
デザインノートとは、ファイル用に作成するノートのことです。デザインノートは、記述されるファイルと関連しますが、別のファイルに格納されます。展開されているファイルパネルで、どのファイルにデザインノートが関連付けられているかを確認できます。デザインノートのアイコンが「ノート」列に表示されます。
デザインノートを使用すると、イメージソースファイル名やファイル状態のコメントなどの、ドキュメントに関連付けられた付加ファイル情報を継続的に管理できます。例えば、あるサイトから他のサイトにドキュメントをコピーする場合、そのドキュメントにデザインノートを追加し、オリジナルのドキュメントが他のサイトフォルダーにあるとコメントできます。
デザインノートを使用して、セキュリティ上の理由でドキュメント内には含めることのできない機密情報の記録を保存することもできます。例えば、どのようにして特定の価格や構成が選択されたかについてのメモや、どのようなマーケティング事項がデザインの決定に影響したかについての情報を追加できます。
Adobe® Fireworks® または Flash でファイルを開き、それを他の形式に書き出す場合、Fireworks および Flash は自動的にデザインノートファイル内にオリジナルソースファイルの名前を保存します。例えば、Fireworks で myhouse.png を開き、それを myhouse.gif に書き出すと、Fireworks では自動的にオリジナルファイルの名前が入っている myhouse.gif.mno という名前のデザインノートファイルが作成されます。このデザインノートファイルには、オリジナルファイルの名前が絶対 file: URL として含まれています。したがって、myhouse.gif のデザインノートには以下のような行があります。
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"
同様に、Flash を使用して作成されたデザインノートには、以下のような行が含まれます。
fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
デザインノートを共有するには、ユーザー側で同じサイトルートパス(sites/assets/orig など)を定義する必要があります。
グラフィックを Dreamweaver に読み込むと、グラフィックと一緒にデザインノートファイルが自動的にサイトにコピーされます。Dreamweaver でイメージを選択し、Fireworks で開いて編集しようとすると、Fireworks は編集用にオリジナルファイルを開きます。
サイトのデザインノートの有効化と無効化
デザインノートはファイルと関連していますが、別のファイルに格納されます。デザインノートを使用して、イメージソースファイル名やファイル状態のコメントなど、ドキュメントに関連付けられた付加ファイル情報を継続的に管理できます。
サイト定義ダイアログボックスの「デザインノート」カテゴリで、選択したサイトに対してデザインノートを使用可能または使用不可に設定できます。デザインノートを使用可能にしている場合は、必要に応じて、他のユーザーとデザインノートを共有できるように選択することもできます。
-
サイト/サイトの管理を選択します。
-
サイトの管理ダイアログボックスで、サイトを選択し「編集」をクリックします。
-
サイト定義ダイアログボックスで、「詳細設定」を展開し、「デザインノート」カテゴリを選択します。
-
「デザインノート保持」を選択してデザインノートを有効にします(無効にする場合は選択を解除します)。
-
サイトのすべてのローカルのデザインノートファイルを削除する場合には、「クリーンアップ」をクリックし、「はい」をクリックします(リモートのデザインノートファイルを削除する場合は、手動で削除する必要があります)。注意:
デザインノートの 「クリーンアップ」コマンドは MNO(デザインノート)ファイルだけを削除します。_notes フォルダー内の _notes フォルダーまたは dwsync.xml ファイルは削除されません。Dreamweaver では、dwsync.xml ファイルを使用してサイトの同期に関する情報を維持します。
-
「デザインノートをアップロードして共有可能にする」を選択して「OK」をクリックし、サイトに関連付けられているデザインノートを他のすべてのドキュメントと共にアップロードします。
このオプションを選択すると、他のユーザーとデザインノートを共有できます。Dreamweaver では、ファイルを送信、または取得すると、関連付けられているデザインノートファイルも自動的に送信、または取得されます。
このオプションを選択しない場合、Dreamweaver はデザインノートをローカルで保持しますが、ファイルと一緒にアップロードしません。サイト上で単独で作業している場合、このオプションをオフにするとパフォーマンスが向上します。デザインノートは、ファイルをチェックインまたは送信してもリモートサイトに転送されません。引き続き、サイトのデザインノートをローカルに追加および変更できます。
デザインノートとファイルの関連付け
サイト内のドキュメントやテンプレートのそれぞれに対してデザインノートを作成できます。アプレット、ActiveX コントロール、イメージ、Flash コンテンツ、Shockwave オブジェクト、ドキュメント内のイメージフィールド用にもデザインノートを作成できます。
デザインノートが追加されたテンプレートを基にドキュメントを作成する場合、作成されるドキュメントはデザインノートを継承しません。
-
次のいずれかの操作を実行します。
ドキュメントウィンドウでファイルを開き、ファイル/デザインノートを選択します。
ファイルパネルで、ファイルを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、「デザインノート」を選択します。
注意:ファイルがリモートサイトにある場合は、先にファイルをチェックアウトまたは取得してから、そのファイルをローカルフォルダーで選択する必要があります。
-
「基本情報」タブのステータスメニューからドキュメントのステータスを選択します。
-
日付アイコン(「メモ」テキストボックスの上)をクリックし、ノートに現在の日付を挿入します。
-
「メモ」テキストボックスにコメントを入力します。
-
ファイルを開くたびにデザインノートファイルを表示させるには、「ファイルが開いているときに表示」を選択します。
-
「全情報」タブで、プラス「+」ボタンをクリックして、新規のキーと値のペアを追加します。ペアを選択してマイナス「-」ボタンをクリックすると、それを削除できます。
例えば、キーに Author という名前を付け(「名前」ボックス)、値を Heidi に定義(「値」ボックス)できます。
-
「OK」をクリックしてノートを保存します。
Dreamweaver では、ノートは、現在のファイルと同じ場所にある _notes というフォルダーに保存されます。デザインノートのファイル名は、ドキュメントのファイル名に拡張子 .mno が付いたものです。例えば、ファイル名が index.html の場合、関連付けられているデザインノートは index.html.mno という名前になります。
デザインノートの操作
デザインノートをファイルと関連付けると、デザインノートを開いてステータスを変更したり、デザインノートを削除できるようになります。
ファイルに関連するデザインノートを開く
-
次のいずれかの操作を行って、デザインノートを開きます。
ドキュメントウィンドウでファイルを開き、ファイル/デザインノートを選択します。
ファイルパネルで、ファイルを右クリック(Windows)または Control キーを押しながらクリック(Mac OS)し、「デザインノート」を選択します。
ファイルパネルの「ノート」列にある黄色いデザインノートアイコンをダブルクリックします。
注意:黄色いデザインノートアイコンを表示するには、サイト/サイトの管理/[サイト名]/編集/詳細設定/表示列を選択します。リストパネルで「ノート」を選択し、「表示」オプションを選択します。「ファイル」ツールバーの「展開 / 折りたたむ」ボタンをクリックして、ローカルサイトとリモートサイトの両方を表示すると、デザインノートを含むファイルの黄色いノートアイコンを表示する「ノート」列がローカルサイトに表示されます。
デザインノートのカスタムステータスの割り当て
-
ファイルまたはオブジェクトのデザインノートを開きます(前述の手順を参照してください)。
-
「全情報」タブをクリックします
-
「+」ボタンをクリックします。
-
「名前」フィールドに、「status」という単語を入力します。
-
「値」フィールドに、ステータスを入力します。
ステータス値が既にある場合、新しい値で置き換わります。
-
「基本情報」タブをクリックすると、ステータスポップアップメニューに新しいステータス値が表示されます。注意:
一度にステータスメニューに入力できるカスタム値は 1 つだけです。新しい値を入力すると、Dreamweaver により、先に入力されていたステータス値が新しい値に置き換えられます。
サイトからの関連しないデザインノートの削除
-
サイト/サイトの管理を選択します。
-
サイトを選択して、「編集」ボタンをクリックします。
-
サイト定義ダイアログボックスで、左側のカテゴリリストから「デザインノート」を選択します。
-
「クリーンアップ」ボタンをクリックします。
Dreamweaver により、どのファイルにも関連していないサイト内のデザインノートを、すべて削除してもよいか確認するメッセージが表示されます。
Dreamweaver では、関連付けられているデザインノートファイルのあるファイルを削除すると、Dreamweaver により同時にデザインノートファイルも削除されます。このため、デザインノートファイルが単独になるのは、通常、Dreamweaver 以外のアプリケーションを使用して、関連付けられたファイルを削除または名前変更した場合だけです。
注意:「デザインノート保持」をオフにした状態で「クリーンアップ」をクリックすると、Dreamweaver によりサイトにあるすべてのデザインノートが削除されます。