ドキュメントウィンドウで、div タグを表示する場所に挿入ポイントを置きます。
最終更新日 :
2021年4月28日
- 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 サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
Div タグを使用して、コンテンツのブロックを中央に配置して列効果を作成し、異なるカラー領域を作成するなどの作業を行う方法について説明します。
div タグを手動で挿入し、それらのタグに CSS の位置スタイルを適用してページレイアウトを作成することができます。div タグは、Web ページのコンテンツ内の論理区域を定義するタグです。div タグを使用すると、コンテンツのブロックを中央に配置して列効果を作成し、異なるカラー領域を作成するなどの作業をおこなうことができます。
div タグと Cascading Style Sheets（CSS）を使用する Web ページの作成に不慣れな場合は、Dreamweaver に付属の事前にデザインされたいずれかのレイアウトに基づいて CSS レイアウトを作成することができます。CSS の操作には不安があるが、テーブルの使用に精通している場合は、テーブルを使用することもできます。
Div タグの挿入
div タグを使用すると、CSS レイアウトブロックを作成して、それをドキュメントに配置できます。これは、ドキュメントに関連付けられているスタイルが配置された既存の CSS スタイルシートがある場合に便利です。Dreamweaver により、Div タグをすばやく挿入して既存のスタイルを適用することができます。
-
-
次のいずれかの操作を実行します。
挿入／HTML／Div を選択します。
挿入パネルの「HTML」カテゴリーで、「Div」をクリックします。
-
次のいずれかのオプションを設定します。
挿入
div タグの位置を選択し、新規タグでない場合はタグ名を選択します。
クラス
選択すると、現在タグに適用されているクラススタイルを表示できます。スタイルシートを添付した場合、そのスタイルシートに定義されているクラスがリストに表示されます。ポップアップメニューから、タグに適用するスタイルを選択します。
ID
div の識別に使用する名前を変更できます。スタイルシートを添付した場合、そのスタイルシートに定義されている ID がリストに表示されます。ドキュメント内に既にあるブロックの ID は表示されません。
注意：ドキュメント内の別のタグと同じ ID を入力すると、Dreamweaver により警告が表示されます。
新規 CSS ルール
新規 CSS ルールダイアログボックスを表示します。
-
「OK」をクリックします。
div タグがボックスとしてプレースホルダーテキストと共にドキュメント内に表示されます。ボックスの端の上にポインターを移動すると、Dreamweaver により、ボックスの端がハイライト表示されます。
div タグは、絶対位置に配置されている場合、AP エレメントになります （絶対位置に配置されていない div タグは編集できます）。
Div タグの編集
div タグを挿入した後、このタグを操作するか、このタグにコンテンツを追加することができます。
注意：
絶対位置に配置された Div タグは、AP エレメントになります。
div タグに境界線を割り当てるか「CSS レイアウトのアウトライン」を選択すると、境界線が表示されます。「CSS レイアウトのアウトライン」は、表示／ビジュアルエイドメニューで、初期設定で選択されます。div タグの上にポインターを移動すると、Dreamweaver によってタグがハイライト表示されます。ハイライトカラーを変更し、またはハイライト表示を無効にすることができます。
div タグを選択すると、CSS デザイナーを使用して、そのルールを表示して編集することができます。コンテンツを div タグに追加するには、div タグ内に挿入ポイントを配置し、コンテンツをページに追加するときと同じ要領でコンテンツを追加します。
-
以下のいずれかの操作をおこない、div タグを選択します。
- div タグの境界線をクリックします。
注意：境界線を見つけるには、ハイライト表示されている部分を探します。
div タグの内側をクリックし、Ctrl+A（Windows）または Command+A（Mac OS）を 2 回押します。
div タグの内側をクリックし、ドキュメントウィンドウの下部にあるタグセレクターから div タグを選択します。
-
CSS デザイナーパネルが開いていない場合は、ウィンドウ／CSS デザイナーを選択して開きます。
div タグに適用されているルールがパネルに表示されます。
-
必要に応じて編集します。
Div タグのハイライトカラーの変更
デザインビューで div タグの端にポインターを移動すると、Dreamweaver によりタグの境界線がハイライト表示されます。必要に応じて、環境設定ダイアログボックスでハイライト表示を有効または無効にするか、ハイライトカラーを変更します。
-
編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択します。
-
左のカテゴリーリストで「ハイライト」を選択します。
-
次のいずれかの変更を加えて、「OK」をクリックします。
div タグのハイライトカラーを変更するには、「マウスオーバー」カラーボックスをクリックし、カラーピッカーを使用してハイライトカラーを選択します。または、テキストボックスにハイライトカラーの 16 進数値を入力します。
div タグのハイライト表示の有効または無効を切り替えるには、「マウスオーバー」の「表示」チェックボックスをオンまたはオフにします。
注意：これらのオプションは、ポインターを移動したときに、Dreamweaver によってハイライト表示されるすべてのオブジェクト（テーブルなど）に影響します。
CSS レイアウトブロック
デザインビューで作業をしながら、CSS レイアウトブロックを視覚化することができます。CSS レイアウトブロックは HTML ページエレメントであり、ページ上の任意の場所に配置できます。具体的に CSS レイアウトブロックとは、div タグ（display:inline なし）、あるいは display:block、position:absolute、または position:relative CSS 宣言を含む他のページエレメントのことです。以下に示すのは、Dreamweaver では CSS レイアウトブロックと見なされるエレメントの例です。
div タグ
絶対位置または相対位置が割り当てられたイメージ
a タグ（display:block スタイルが割り当てられているもの）
絶対位置または相対位置が割り当てられた段落
注意：
視覚的なレンダリングのため、CSS レイアウトブロックにはインラインエレメント（コードがテキストの行に含まれるエレメント）、または段落のような単純なブロックエレメントは含まれません。
Dreamweaver には、CSS レイアウトブロックを表示するためのビジュアルエイドが多数用意されています。例えば、デザイン中に CSS レイアウトブロックのアウトライン、背景、およびボックスモデルを有効にすることができます。また、レイアウトブロックの上にマウスポインターを移動したときに、選択した CSS レイアウトブロックのプロパティを表示するツールヒントを表示することもできます。
以下のリストに、Dreamweaver で表示される CSS レイアウトブロックのビジュアルエイドを示します。
CSS レイアウトのアウトライン
ページ上にあるすべての CSS レイアウトブロックのアウトラインが表示されます。
CSS レイアウトの背景
個別の CSS レイアウトブロックに一時的に割り当てられた背景色が表示され、通常、ページ上に表示される他の背景色またはイメージは非表示になります。
CSS レイアウトブロックの背景を表示するためにビジュアルエイドを有効にすると、Dreamweaver は、各 CSS レイアウトブロックに個別の背景色を自動的に割り当てます（Dreamweaver では、アルゴリズム的処理によって背景色が選択されるため、ユーザーが背景色を割り当てる方法はありません）。割り当てられたカラーは視覚的に判別しやすいため、CSS レイアウトブロック間で区別できるようになっています。
CSS レイアウトのボックスモデル
選択した CSS レイアウトブロックのボックスモデル（余白とマージン）が表示されます。
CSS レイアウトブロックの表示
必要に応じて、CSS レイアウトブロックのビジュアルエイドの表示／非表示を切り替えることができます。すべての CSS レイアウトブロックを表示するには、表示／デザインビューのオプション／ビジュアルエイドを選択します。
CSS レイアウトの背景、CSS レイアウトのボックスモデルおよび CSS レイアウトアウトラインを有効または無効にすることができます。
