この文書は、Dreamweaver CS4/CS5/CS5.5 の基本的な使用方法を分かりやすく図解した内容となっています。

Dreamweaver CS4/CS5/CS5.5 では、CSS のレイアウト設定が既に適用された状態からファイルを作成することができます。また、レイアウトは用途に応じて調整することも可能です。

CSS レイアウトとは?

以前は、ヘッダ、フッタ、サイドバー、メインコンテンツなどのブロックを HTML のテーブルで組む方法が主流でしたが、外観の要素は CSS で定義するという本来の趣旨にしたがい、現在は CSS でレイアウトを定義する手法が一般的になっています。ですが、このようなレイアウトを正しくブラウザで表示させるように CSS を記述するには一定の知識が必要なため、Dreamweaver にはあらかじめこのようなレイアウトが組まれたテンプレートが複数用意されています。

レイアウトを選択してページを作成してみよう

[ファイル] メニューの [新規] をクリックします。

[新規] ドキュメントダイアログボックスが表示されたら [空白ページ] をクリックします。

任意でページタイプ、レイアウトをクリックして選択します。

ここでは例として [ページタイプ:HTML]、[レイアウト:2 列を固定に、左にサイドバー、ヘッダーとフッター] を選択しています。

[ドキュメントタイプ] と [レイアウト CSS] をポップアップメニューから選択し、[作成] をクリックします。

ここでは例として [ドキュメントタイプ:XHTML 1.0 Transitional(トランジショナル)]、[レイアウト CSS:新規ファイルを作成] を選択しています。

[スタイルシートファイルの新規保存] ダイアログボックスが表示されます。このダイアログボックスでは HTML ページファイルではなく、外部スタイルシートファイルが保存されます。ファイル名と保存場所を指定し、[保存] をクリックします。

※自動的に CSS ファイルのファイル名が指定された状態でダイアログボックスが開きます。そのファイル名をそのまま使用することも可能です。

[サイトルート] ボタンを活用

Dreamweaver の保存ダイアログボックスに搭載されている [サイトルート] ボタンをクリックすると、サイトフォルダにすばやく移動することができます。サイトルート内のフォルダに保存することによって、リンク切れなどのトラブルを回避することができます。



レイアウトが適用された新規ページが開きます。

背景色を変更してみよう

すでに適用されているスタイルシートは自由に変更することが可能です。

ここでは例としてヘッダの背景色を変更する方法について説明します。

見出しの部分をクリックしてカーソルを置きます。

タグセレクタで [<div#header>] をクリックします。

目的のタグをすばやく見つけるには

レイアウトが複雑なページでは、タグセレクタに複数のタグが表示され、どれが目的のタグなのかを判別するのが難しい場合があります。タグセレクタでクリックしたタグは [デザイン] ビュー上でハイライト表示され、またマウスカーソルを上に乗せると ID、クラス、タグなどの情報がポップアップされるため、これらの情報も参考にして目的のタグを見つけることができます。また、コードの知識がある場合は、[分割] ビューで作業を行うことにより、さらにタグを識別しやすくなります。

コードナビゲータを活用しよう

Alt(Windows)/Command + Option(Macintosh)キーを押しながら任意の場所をクリックすると、クリックした領域に影響を及ぼすコードへのリンクが、コードナビゲータに表示されます。この中に表示される CSS ルールにカーソルを合わせると、ルールのプロパティがツールヒントとして表示されるため、目的のタグをすばやく見つけることができます。コードナビゲータで CSS ルールをクリックすると、ルールに直接移動できます。

※ コードナビゲータは、コードナビゲータインジケータをクリックして表示することもできます。カーソルを 2 秒間操作しないで置くと、テキストの挿入ポイント付近にコードナビゲータインジケータ が表示されます。

[CSS スタイル] パネルで [現在] タブをクリックし、”.header”のプロパティの [background] 横の数値をクリックします。

任意で色番号を入力し、別の場所をクリックします。

※例としてここでは [Background-color(背景色)] をピンク(#FF9090)に変更しています。

見出し部分の背景色がピンクに変わります。

レイアウトを変更してみよう

メインコンテンツ内のレイアウトを横並びに変更することができます。はじめに、すでに設定されている幅やマージンの値を確認してから変更の操作を行います。

コンテンツの段落もしくは画像をクリックしてカーソルを置き、タグセレクタで [div.content] をクリックします。

[CSS スタイル] パネルで幅の値を参照します。[width] の値が [780px] に指定されていることを確認します。

次に、 [フォーマット] メニューの [CSS スタイル] をポイントし、[新規] をクリックします。

 [新規 CSS ルール] ダイアログボックスが表示されます。以下の設定を行い、 [OK] をクリックします。

  • セレクタタイプ : [クラス(HTML エレメントのみに適用可能)] 
  • セレクタ名は任意で名前を入力します。例としてここでは [con] と入力します。
  • ルール定義は保存したCSSファイル名を選択します。

 [.con の CSS ルール定義] ダイアログボックスが表示されます。以下の設定を行い、 [OK] をクリックします。

  • [width] :350 
  • [Float] : [left] 
  • [Padding] と [Margin] の 「すべて同一」チェックボックスのチェックを外します。
  • [Padding] と [Margin] の [Right] を 5 と入力します。
  • [Padding] と [Margin] の [Left] を 10 と入力します。

横並びにしたい段落をクリックしてカーソルを置き、タグセレクタで [p] をクリックします。

[プロパティ] の [クラス] ポップアップメニューから[con] クリックします。

段落が先ほど指定したサイズになります。

続いて、次の段落にStep5 を繰り返します。

段落が横並びに変更されました。

※Step4 の [.con の CSS ルール定義] ダイアログボックスで背景やボーダーも一緒に指定すると、見やすいコンテンツに装飾できます。

CSS ファイルを直接編集

Dreamweaver では、[CSS スタイルパネル] や [CSS ルール定義] ダイアログボックスを使用せず、直接 CSS ファイルを編集することも可能です。レイアウトを選択して作成されたページの場合、CSS の記述には細かい説明やヒントがコメントとして追加されているため、HTML コードと照らし合わせることなく編集することが可能です。

アドビコミュニティフォーラムをご利用下さい

この文章はお役に立てましたでしょうか?さらに情報をお探しになる場合には、アドビスタッフがお届けしている解決事例やメンバー同士での活発な意見交換をチェックできるコミュニティフォーラムをご利用下さい。

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

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