Div タグの操作

最終更新日 : 2023年9月25日

Div タグを使用して、コンテンツのブロックを中央に配置して列効果を作成し、異なるカラー領域を作成するなどの作業をおこなう方法について説明します。

divタグを手動で挿入し、CSSポジショニングスタイルを適用することで、ページレイアウトを作成できます。div タグは、web ページのコンテンツ内で論理的な区分を定義するタグです。divタグを使用して、コンテンツのブロックを中央揃えにしたり、段組み効果を作成したり、異なる色の領域を作成したりすることができます。

divタグとカスケーディングスタイルシート（CSS）を使用してwebページを作成することに慣れていない場合は、Dreamweaverに付属する事前にデザインされたレイアウトの1つに基づいてCSSレイアウトを作成できます。CSSでの作業に慣れていないが、テーブルの使用に慣れている場合は、テーブルを使用することもできます。

Div タグの挿入

divタグを使用してCSSレイアウトブロックを作成し、ドキュメント内に配置できます。これは、ドキュメントにポジショニングスタイルが添付された既存のCSSスタイルシートがある場合に便利です。Dreamweaverでは、divタグをすばやく挿入し、既存のスタイルを適用できます。

ドキュメントウィンドウで、div タグを表示する位置に挿入ポイントを配置します。

次のいずれかの操作を実行します。

挿入＞HTML＞Divを選択します。
挿入パネルのHTMLカテゴリで、「Div」をクリックします。

次のいずれかのオプションを設定します。

挿入

divタグの場所と、新しいタグでない場合はタグ名を選択できます。

クラス

選択すると、現在タグに適用されているクラススタイルを表示できます。スタイルシートを添付している場合、そのスタイルシートで定義されているクラスがリストに表示されます。このポップアップメニューを使用して、タグに適用するスタイルを選択します。

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 Designer パネルが開いていない場合は、ウィンドウ／CSS Designer を選択して開きます。

divタグに適用されているルールがパネルに表示されます。

必要に応じて編集します。

divタグのハイライト色を変更

デザインビューでdivタグのエッジにポインターを移動すると、Dreamweaverがタグのボーダーをハイライト表示します。必要に応じてハイライトを有効または無効にしたり、環境設定ダイアログボックスでハイライト色を変更したりできます。

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択します。

左のカテゴリーリストで「ハイライト」を選択します。

次のいずれかの変更を加えて、「OK」をクリックします。

div タグのハイライトカラーを変更するには、「マウスオーバー」カラーボックスをクリックし、カラーピッカーを使用してハイライトカラーを選択します。または、テキストボックスにハイライトカラーの 16 進数値を入力します。
div タグのハイライト表示の有効または無効を切り替えるには、「マウスオーバー」の「表示」チェックボックスをオンまたはオフにします。

メモ

これらのオプションは、ポインターを重ねたときにDreamweaverがハイライト表示するテーブルなどのすべてのオブジェクトに影響します。

CSS レイアウトブロック

デザインビューで作業中にCSSレイアウトブロックをビジュアライゼーションできます。CSSレイアウトブロックは、ページ上の任意の場所に配置できるHTMLページ要素です。より具体的には、CSSレイアウトブロックはdisplay:inlineを含まないdivタグ、またはdisplay:block、position:absolute、position:relativeのCSS宣言を含むその他のページ要素です。以下は、DreamweaverでCSSレイアウトブロックと見なされる要素の例です：

div タグ
絶対位置または相対位置が割り当てられた画像
display:blockスタイルが割り当てられたaタグ
絶対位置または相対位置が割り当てられた段落

メモ

ビジュアルレンダリングの目的では、CSSレイアウトブロックにはインライン要素（つまり、コードがテキスト行内に含まれる要素）や段落などの単純なブロック要素は含まれません。

Dreamweaverには、CSSレイアウトブロックを表示するための視覚的な補助機能が数多く用意されています。たとえば、デザイン時にCSSレイアウトブロックのアウトライン、背景、およびボックスモデルを有効にできます。レイアウトブロック上にマウスポインターを浮動小数させたときに、選択されたCSSレイアウトブロックのプロパティを表示するツールチップも表示できます。

以下のCSSレイアウトブロックビジュアルエイドのリストは、Dreamweaverが各アイテムに対して表示可能としてレンダリングする内容を説明しています：

CSS レイアウトのアウトライン

ページ上にあるすべての CSS レイアウトブロックのアウトラインが表示されます。

CSS レイアウトの背景

個々のCSSレイアウトブロックに一時的に割り当てられた背景色を表示し、通常ページに表示される他の背景色や画像を非表示にします。

CSSレイアウトブロックの背景を表示するビジュアルエイドを有効にすると、Dreamweaverは各CSSレイアウトブロックに自動的に異なる背景色を割り当てます。（Dreamweaverはアルゴリズム処理を使用して色を選択するため、ユーザーが色を割り当てる方法はありません。）割り当てられた色は視覚的に区別しやすく、CSSレイアウトブロック間を区別するのに役立つように設計されています。

CSS レイアウトのボックスモデル

選択されたCSSレイアウトブロックのボックスモデル（つまり、パディングとマージン）を表示します。