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

div タグを手動で挿入し、それらのタグに CSS の位置スタイルを適用してページレイアウトを作成することができます。div タグは、Web ページのコンテンツ内の論理区域を定義するタグです。div タグを使用すると、コンテンツのブロックを中央に配置して列効果を作成し、異なるカラー領域を作成するなどの作業をおこなうことができます。

div タグと Cascading Style Sheets(CSS)を使用する Web ページの作成に不慣れな場合は、Dreamweaver に付属の事前にデザインされたいずれかのレイアウトに基づいて CSS レイアウトを作成することができます。CSS の操作には不安があるが、テーブルの使用に精通している場合は、テーブルを使用することもできます。

Div タグの挿入

div タグを使用すると、CSS レイアウトブロックを作成して、それをドキュメントに配置できます。これは、ドキュメントに関連付けられているスタイルが配置された既存の CSS スタイルシートがある場合に便利です。Dreamweaver により、Div タグをすばやく挿入して既存のスタイルを適用することができます。

  1. ドキュメントウィンドウで、div タグを表示する場所に挿入ポイントを置きます。
  2. 次のいずれかの操作を実行します。
    • 挿入/HTML/Div を選択します。

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

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

    挿入

    div タグの位置を選択し、新規タグでない場合はタグ名を選択します。

    クラス

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

    ID

    div の識別に使用する名前を変更できます。スタイルシートを添付した場合、そのスタイルシートに定義されている ID がリストに表示されます。ドキュメント内に既にあるブロックの ID は表示されません。

    注意:

    ドキュメント内の別のタグと同じ ID を入力すると、Dreamweaver により警告が表示されます。

    新規 CSS ルール

    新規 CSS ルールダイアログボックスを表示します。

  4. 「OK」をクリックします。

    div タグがボックスとしてプレースホルダーテキストと共にドキュメント内に表示されます。ボックスの端の上にポインターを移動すると、Dreamweaver により、ボックスの端がハイライト表示されます。

    div タグは、絶対位置に配置されている場合、AP エレメントになります (絶対位置に配置されていない div タグは編集できます)。

Div タグの編集

div タグを挿入した後、このタグを操作するか、このタグにコンテンツを追加することができます。

注意:

絶対位置に配置された Div タグは、AP エレメントになります。

div タグに境界線を割り当てるか「CSS レイアウトのアウトライン」を選択すると、境界線が表示されます。「CSS レイアウトのアウトライン」は、表示/ビジュアルエイドメニューで、初期設定で選択されます。div タグの上にポインターを移動すると、Dreamweaver によってタグがハイライト表示されます。ハイライトカラーを変更し、またはハイライト表示を無効にすることができます。

div タグを選択すると、CSS デザイナーを使用して、そのルールを表示して編集することができます。コンテンツを div タグに追加するには、div タグ内に挿入ポイントを配置し、コンテンツをページに追加するときと同じ要領でコンテンツを追加します。

  1. 以下のいずれかの操作をおこない、div タグを選択します。
    • div タグの境界線をクリックします。

    注意:

    境界線を見つけるには、ハイライト表示されている部分を探します。

    • div タグの内側をクリックし、Ctrl+A(Windows)または Command+A(Mac OS)を 2 回押します。

    • div タグの内側をクリックし、ドキュメントウィンドウの下部にあるタグセレクターから div タグを選択します。

  2. CSS デザイナーパネルが開いていない場合は、ウィンドウ/CSS デザイナーを選択して開きます。

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

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

Div タグのハイライトカラーの変更

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

  1. 編集/環境設定(Windows)または Dreamweaver/環境設定(Mac OS)を選択します。
  2. 左のカテゴリーリストで「ハイライト」を選択します。
  3. 次のいずれかの変更を加えて、「OK」をクリックします。
    • div タグのハイライトカラーを変更するには、「マウスオーバー」カラーボックスをクリックし、カラーピッカーを使用してハイライトカラーを選択します。または、テキストボックスにハイライトカラーの 16 進数値を入力します。

    • div タグのハイライト表示の有効または無効を切り替えるには、「マウスオーバー」の「表示」チェックボックスをオンまたはオフにします。

    注意:

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

CSS レイアウトブロック

デザインビューで作業をしながら、CSS レイアウトブロックを視覚化することができます。CSS レイアウトブロックは HTML ページエレメントであり、ページ上の任意の場所に配置できます。具体的に CSS レイアウトブロックとは、div タグ(display:inline なし)、あるいは display:blockposition: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 レイアウトアウトラインを有効または無効にすることができます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー