マニュアル キャンセル

ページのヘッドコンテンツの操作

  1. Dreamweaver ユーザーガイド
  2. はじめに
    1. レスポンシブ web デザインの基本
    2. Dreamweaver の新機能
    3. Dreamweaver を使用した web 開発 - 概要
    4. Dreamweaver / よくある質問
    5. キーボードショートカット
    6. Dreamweaver の必要システム構成
    7. 機能の概要
  3. Dreamweaver と Creative Cloud
    1. Dreamweaver 設定と Creative Cloud の同期
    2. Dreamweaver での Creative Cloud ライブラリ
    3. Dreamweaver での Photoshop ファイルの使用
    4. Adobe Animate と Dreamweaver の操作
    5. ライブラリから web 用に最適化された SVG ファイルを抽出する
  4. Dreamweaver のワークスペースとビュー
    1. Dreamweaver ワークスペース
    2. ビジュアル開発のための Dreamweaver ワークスペースの最適化
    3. ファイル名またはコンテンツに基づいたファイルの検索 | Mac OS
  5. サイトの設定
    1. Dreamweaver サイトについて
    2. ローカルバージョンのサイトの設定
    3. Publishing server への接続
    4. テストサーバーの設定
    5. Dreamweaver サイトの設定の読み込みおよび書き出し
    6. リモートサーバーからローカルサイトのルートに既存の web サイトを取り込む
    7. Dreamweaver のアクセシビリティ機能
    8. 詳細設定
    9. ファイル転送に関するサイト環境設定の設定
    10. Dreamweaver でのプロキシサーバー設定の指定
    11. Dreamweaver 設定と Creative Cloud の同期
    12. Dreamweaver での Git の使用
  6. ファイルの管理
    1. ファイルの作成およびオープン
    2. ファイルとフォルダーの管理
    3. サーバーからのファイルの取得とサーバーへのファイルの送信
    4. ファイルのチェックインとチェックアウト
    5. ファイルの同期
    6. ファイルの違いの比較
    7. Dreamweaver サイト内のファイルおよびフォルダーのクローク
    8. Dreamweaver サイトでのデザインノートの有効化
    9. Gatekeeper の脆弱性の悪用を防ぐ
  7. レイアウトとデザイン
    1. レイアウト用ビジュアルエイドの使用
    2. CSS を使用したページのレイアウトについて
    3. Bootstrap を使用したレスポンシブな web サイトのデザイン
    4. Dreamweaver でのメディアクエリーの作成と使用
    5. テーブルを使用したコンテンツの表示
    6. カラー
    7. 可変グリッドレイアウトによるレスポンシブデザイン
    8. Dreamweaver 内の Extract
  8. CSS
    1. カスケーディングスタイルシートについて
    2. CSS デザイナーを使用したページのレイアウト
    3. Dreamweaver での CSS プリプロセッサーの使用
    4. Dreamweaver で CSS スタイルの環境設定を行う方法
    5. Dreamweaver での CSS ルールの移動
    6. Dreamweaver でのインライン CSS の CSS ルールへの変換
    7. Div タグの操作
    8. 背景へのグラデーションの適用
    9. Dreamweaver での CSS3 移行効果の作成および編集
    10. コードのフォーマット
  9. ページコンテンツとアセット
    1. ページプロパティの設定
    2. CSS 見出しプロパティおよび CSS リンクプロパティの設定
    3. テキストの操作
    4. テキスト、タグ、属性の検索と置換
    5. DOM パネル
    6. ライブビューでの編集
    7. Dreamweaver でのドキュメントのエンコード
    8. ドキュメントウィンドウでのエレメントの選択および表示
    9. プロパティインスペクターでのテキストプロパティの設定
    10. web ページのスペルチェック
    11. Dreamweaver での区切り線の使用
    12. Dreamweaver でのフォントの組み合わせの追加と変更
    13. アセットを使用した作業
    14. Dreamweaver での日付の挿入と更新
    15. Dreamweaver でのお気に入りアセットの作成と管理
    16. Dreamweaver でのイメージの挿入と編集
    17. メディアオブジェクトの追加
    18. Dreamweaver でのビデオの追加
    19. HTML5 ビデオの挿入
    20. SWF ファイルの挿入
    21. オーディオエフェクトの追加
    22. Dreamweaver での HTML5 オーディオの挿入
    23. ライブラリ項目の操作
    24. Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
  10. リンクおよびナビゲーション
    1. リンクおよびナビゲーションについて
    2. リンク
    3. イメージマップ
    4. リンクのトラブルシューティング
  11. jQuery Widget と効果
    1. Dreamweaver での jQuery UI Widget と Mobile Widget の使用
    2. Dreamweaver での jQuery 効果の使用
  12. web サイトのコーディング
    1. Dreamweaver でのコーディングについて
    2. Dreamweaver のコーディング環境
    3. コーディングの環境設定
    4. コードカラーリングのカスタマイズ
    5. コードの記述と編集
    6. コードヒントとコード補完機能
    7. コードの折りたたみと展開
    8. スニペットでコードを再利用する
    9. 構文チェックコード
    10. コードの最適化
    11. デザインビューでのコードの編集
    12. ページのヘッドコンテンツの操作
    13. Dreamweaver でのサーバーサイドインクルードの挿入
    14. Dreamweaver でのタグライブラリの使用
    15. Dreamweaver へのカスタムタグの読み込み
    16. JavaScript ビヘイビアーの使用(基本操作)
    17. JavaScript に組み込まれているビヘイビアーの適用
    18. XML および XSLT について
    19. Dreamweaver でのサーバーサイド XSL 変換の実行
    20. Dreamweaver でのクライアントサイド XSL 変換の実行
    21. Dreamweaver での XSLT の文字エンティティの追加
    22. コードのフォーマット
  13. 製品間ワークフロー
    1. Dreamweaver への拡張機能のインストールと使用
    2. Dreamweaver のアプリ内アップデート
    3. Dreamweaver での Microsoft Office 文書の挿入(Windows のみ)
    4. Fireworks および Dreamweaver による作業
    5. Contribute を使用した Dreamweaver サイトでのコンテンツの編集
    6. Dreamweaver と Business Catalyst の統合
    7. パーソナライズされた電子メールキャンペーンの作成
  14. テンプレート
    1. Dreamweaver テンプレートについて
    2. テンプレートおよびテンプレートから作成されたドキュメントの認識
    3. Dreamweaver テンプレートの作成
    4. テンプレート編集可能領域の作成
    5. Dreamweaver でのリピート領域およびテーブルの作成
    6. テンプレートの任意の領域の使用
    7. Dreamweaver での編集可能なタグ属性の定義
    8. Dreamweaver でネストされたテンプレートを作成する方法
    9. テンプレートの編集、更新、削除
    10. Dreamweaver での xml コンテンツの書き出しおよび読み込み
    11. 既存のドキュメントでのテンプレートの適用または削除
    12. Dreamweaver テンプレートでのコンテンツの編集
    13. Dreamweaver でのテンプレートタグのシンタックスルール
    14. テンプレート領域のハイライト表示の環境設定
    15. Dreamweaver でテンプレートを使用する利点
  15. モバイルとマルチスクリーン
    1. メディアクエリーの作成
    2. モバイルデバイス向けのページ方向の変更
    3. Dreamweaver を使用したモバイルデバイス向けの web アプリの作成
  16. 動的サイト、ページおよび web フォーム
    1. web アプリケーションについて
    2. アプリケーション開発のためのコンピューター設定
    3. データベース接続のトラブルシューティング
    4. Dreamweaver での接続スクリプトの削除
    5. 動的ページのデザイン
    6. 動的コンテンツソースの概要
    7. 動的コンテンツのソースの定義
    8. ページへの動的コンテンツの追加
    9. Dreamweaver での動的コンテンツの変更
    10. データベースのレコードの表示
    11. Dreamweaver でのライブデータの入力とトラブルシューティング
    12. Dreamweaver でのカスタムサーバービヘイビアーの追加
    13. Dreamweaver を使用したフォームの作成
    14. フォームを使用したユーザーからの情報の収集
    15. Dreamweaver での ColdFusion フォームの作成と有効化
    16. web フォームの作成
    17. フォームエレメントの HTML5 サポート強化
    18. Dreamweaver を使用したフォームの開発
  17. アプリケーションのビジュアル開発
    1. Dreamweaver でのマスターページと詳細ページの作成
    2. 検索ページと結果ページの作成
    3. レコード挿入ページの作成
    4. Dreamweaver でのレコードの更新ページの作成
    5. Dreamweaver でのレコード削除ページの作成
    6. Dreamweaver での ASP コマンドによるデータベースの修正
    7. 登録ページの作成
    8. ログインページの作成
    9. 許可されたユーザーのみがアクセスできるページの作成
    10. Dreamweaver を使用した ColdFusion のフォルダーの保護
    11. Dreamweaver での ColdFusion コンポーネントの使用
  18. web サイトのテスト、プレビュー、パブリッシュ
    1. ページのプレビュー
    2. 複数のデバイスでの Dreamweaver web ページのプレビュー
    3. Dreamweaver サイトのテスト
  19. トラブルシューティング
    1. 修正された問題
    2. 既知の問題

 

 

Dreamweaver Web ページでのコンテンツの表示と編集、メタプロパティとページタイトルの設定、ページのキーワードとページの指定などを行います。

ページには、そのページに関する情報を記述するエレメントがあり、この情報が検索ブラウザーで使用されます。head エレメントのプロパティを設定すると、ページの識別方法を制御できます。

ヘッドコンテンツの表示と編集

ドキュメントの head セクションのエレメントは、コードビューか、コードインスペクターを使用して表示できます。

ドキュメントの head セクションへのエレメントの挿入

  1. 挿入/HTML から head タグを選択します。

  2. 表示されるダイアログボックスまたはプロパティインスペクターで、エレメントのオプションを入力します。

ドキュメントの head セクションのエレメントの編集

head エレメントは、コードビュー、またはプロパティインスペクターでコードを直接入力して編集できます。

プロパティインスペクターを使用して head セクションのエレメントを編集するには:

  1. DOM パネル(ウィンドウ/DOM パネル)で head エレメントを選択します。 

    プロパティインスペクターに、選択したエレメントのプロパティが表示されます。

  2. プロパティインスペクターで、エレメントのプロパティを設定または変更します。

ページのメタプロパティの設定

meta タグは head エレメントで、文字のエンコード、作成者、著作権、キーワードなど、現在のページに関する情報を記録します。また、これらのタグは、ページの有効期限、更新間隔、POWDER レーティングなどの情報をサーバーに渡すために使用されます(POWDER(Protocol for Web Description Resources)とは、映画の年齢制限と同じようなアクセス制限(レーティング)を Web ページに適用するしくみです)。

meta タグの追加

  1. 挿入/メディア/メタを選択します。

  2. 表示されるダイアログボックスでプロパティを指定します。

既存の meta タグの編集

meta エレメントは、コードビュー、またはプロパティインスペクターでコードを直接入力して編集できます。

プロパティインスペクターを使用して meta セクションのエレメントを編集するには:

  1. DOM パネル(ウィンドウ/DOM パネル)で head エレメントを選択します。 

    プロパティインスペクターに、選択したエレメントのプロパティが表示されます。

  2. DOM パネルから meta タグを選択します。

  3. プロパティインスペクターでプロパティを指定します。

    属性

    meta タグの内容が、ページの説明(name)または HTTP ヘッダー情報(http-equiv)のどちらであるかを指定します。

    このタグに記述する情報のタイプを指定します。descriptionkeywordsrefresh など、一部の値は既に適切に定義されており、それぞれに対応するプロパティインスペクターが Dreamweaver に存在しますが、実用上は任意の値を指定できます(例:creationdatedocumentIDlevel)。

    コンテンツ

    実際の情報を指定します。例えば、「値」に level を指定した場合、「コンテンツ」には beginnerintermediateadvanced のいずれかを指定します。

ページタイトルの設定

タイトルプロパティは、ページタイトル 1 つだけです。ページタイトルは、次のいずれかの方法を使用して編集できます。

  • コード内でタイトルを直接編集する(コードビュー)
  • DOM パネルで title タグを選択し、プロパティインスペクターでタイトルを編集する

ページのキーワードの指定

サーチエンジンロボット(Web を自動参照して、サーチエンジンがインデックスを付ける情報を収集するプログラム)の多くは、キーワード meta タグの内容を読み取り、その情報を使用して Web ページのインデックスをデータベース内に作成します。一部のサーチエンジンでは、インデックスを付けるキーワード数または文字数が制限されていたり、制限を超えるとすべてのキーワードが無視される場合があります。このため、厳選した少数のキーワードだけを使用することをお勧めします。

キーワード meta タグの追加

  1. 挿入/HTML/キーワードを選択します。

  2. 表示されるダイアログボックスで、キーワードをコンマ区切りで指定します。

キーワード meta タグの編集

キーワード meta 詳細は、次のいずれかの方法を使用して編集できます。

  • コード内(コードビュー)でキーワードを直接編集します
  • DOM パネルでキーワードの meta タグを選択し、プロパティインスペクターでキーワードを表示、変更、または削除します。
注意:

キーワードはコンマで区切る必要があります。

ページの詳細の指定

サーチエンジンロボット(Web を自動参照して、サーチエンジンがインデックスを付ける情報を収集するプログラム)の多くは、詳細 meta タグの内容を読み取ります。サーチエンジンロボットには、この情報を使用して Web ページのインデックスをデータベース内に作成するものや、検索結果のページ上にドキュメントの最初の数行を表示する代わりに、この情報を表示するものがあります。サーチエンジンによってはインデックスに格納できる文字数に制限があるので、ページの説明は数語程度にすることをお勧めします(例:「ジョージア州アルバニーの宅配ポークバーベキュー」、「手ごろな価格の Web デザイン、世界中のお客様に対応します」)。

詳細 meta タグの追加

  1. 挿入/HTML/詳細を選択します。

  2. 表示されるダイアログボックスに説明文を入力します。

詳細 meta タグの編集

meta 詳細は、次のいずれかの方法を使用して編集できます。

  • コード内(コードビュー)で詳細を直接編集します
  • DOM パネルで詳細の meta タグを選択し、プロパティインスペクターで詳細を編集します。

ページの更新プロパティの設定

更新エレメントを使用して、一定の時間が経過したらページが自動的に更新されるように(現在のページを再ロードまたは別のページを表示)指定します。このエレメントは、通常、URL が変更されたというテキストメッセージの表示後に、別の URL にリダイレクトするときに使用します。

更新 meta タグの追加

  1. 挿入/メディア/メタを選択します。

  2. 表示されるダイアログボックスで、プロパティを次のように指定します。

    Attribute

    meta タグに HTTP ヘッダー情報(http-equivalent)が含まれることを指定します。

    Value

    このタグで提供する情報のタイプが refresh であることを指定します。

    Content

    ブラウザーがページを更新するまでの待ち時間(秒)を指定します。ブラウザーのロード終了後すぐにページを更新するには、このボックスに「0」を入力します。

更新 meta タグの編集

更新 meta タグは、次のいずれかの方法を使用して編集できます。

  • コード内(コードビュー)でプロパティを直接編集します
  • DOM パネルまたはコード内で更新の meta タグを選択し、プロパティインスペクターでプロパティを編集します。

ベース meta タグの編集

ページ内のすべてのドキュメント相対パスの基準と見なされるベース URL を設定するために使用される、ベースエレメントを編集できます。

  1. DOM パネルでベースエレメントを選択します。

  2. プロパティインスペクターで、ベース meta タグのプロパティを指定します。

    Href

    ベースの URL です。「参照」ボタンをクリックしてファイルを参照および選択するか、ボックスにパスを入力します。

    ターゲット

    リンク先のすべてのドキュメントを開くフレームまたはウィンドウを指定します。現在のフレームセットからフレームを 1 つ選択するか、次の予約名のいずれかを選択します。

    • _blank:リンクされたドキュメントを、名前のない新規のブラウザーウィンドウにロードします。

    • _parent:リンクされたドキュメントを、リンクが含まれている親フレームセットまたはフレームのウィンドウにロードします。リンクを含むフレームがネストされていない場合は、_top を選択した場合と同じことになり、リンクされたドキュメントはブラウザーウィンドウ全体にロードされます。

    • _self:リンクされたドキュメントを、リンクと同じフレームまたはウィンドウにロードします。このターゲットは初期設定なので、通常は指定する必要はありません。

    • _top:リンクされたドキュメントをブラウザーウィンドウ全体にロードして、すべてのフレームを削除します。

現在のドキュメントと別のファイルとのリレーションシップを定義する link タグを編集できます。

注意:

link タグが head セクション内にある場合、body セクション内にあるドキュメント間の HTML リンクと同じものではありません。

  1. DOM パネルまたはコードビューでリンクエレメントを選択します。

  2. プロパティインスペクターで、リンク meta タグのプロパティを指定します。

    Href

    リレーションシップを定義する対象ファイルの URL です。「参照」ボタンをクリックしてファイルを参照および選択するか、ボックスにパスを入力します。この属性は、通常の HTML という意味でリンク先のファイルを示すものではありません。リンクエレメントで指定するリレーションシップはそれよりも複雑です。

    ID

    リンクに固有の識別子を指定します。

    タイトル

    リレーションシップの説明を入力します。この属性は、リンク先のスタイルシートと特別な関連があります。詳しくは、World Wide Web Consortium の Web サイト(www.w3.org/TR/REC-html40/present/styles.html#style-external)で、HTML 4.0 仕様の「External Style Sheets」の項を参照してください。

    Rel

    現在のドキュメントと、「Href」ボックスで指定したドキュメントとのリレーションシップを指定します。指定可能な値には、AlternateStylesheetStartNextPrevContentsIndexGlossaryCopyrightChapterSectionSubsectionAppendixHelpBookmark などがあります。複数のリレーションシップを指定する場合は、値をスペースで区切ります。

    Rev

    現在のドキュメントと、「Href」ボックスで指定したドキュメントとのリレーションシップの逆(「Rel」の逆)を指定します。指定可能な値は、「Rel」と同じです。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト