Dreamweaver で初めての CSS サイト作り

今月号の記事

CSS は、サイトのテキストだけでなく、サイト全体のコンテンツのレイアウトをデザインするための、最新かつ標準的な手法です。CSS でレイアウトを行うことの大きなメリットは、テーブルレイアウトとは対照的に、CSS レイアウトではプレゼンテーション（スタイル、見た目）とコンテンツ（情報）を分離できるということでしょう。

プレゼンテーションとコンテンツを分離することで、サイトを制御できるようになり、サイト全体にわたる変更であっても簡単に作業できます。制作者だけでなく、サイトのユーザにもメリットはあります。なぜなら、CSS レイアウトにすれば、HTML コードはよりシンプルでキレイになり、Web ブラウザの読み込み時間も短縮され、障碍を持つユーザであってもナビゲートしやすくなります。

Dreamweaver を使って CSS レイアウトを作るには、いくつかの方法があります。1つは、Dreamweaver に用意されている CSS レイアウトを使って、その CSS を目的に応じて修正していくという方法。他の方法としては、ゼロから制作していく方法です。本記事では、後者の方法を解説します。それでは、スタートしましょう！

ページレイアウトの設計

架空の会社「Crush Creek Winery」から、シンプルな CSS サイトの依頼を受けたとしましょう。図1は、クライアントとのミーティングの際にスケッチしたサイト設計です。

Crush Creek Wineryのサイトの初期スケッチ。
図1　Crush Creek Winery のサイトの初期スケッチ。

クライアントからは、各ページの写真とテキストを提供してもらいました。これ以降一緒に進めていくために、まずはそれらのデータ「sample file (ZIP, 73K) 」をダウンロードしてください。解凍したら、Dreamweaver でその解凍フォルダを新規サイトのルートフォルダとして定義します。

メニューから「サイト→新規サイト」を選んで、「詳細設定」タブを選びます。

図2　サイトを定義しているところ。
カテゴリリストから「ローカル情報」を選んで、サイト名欄に「Crush Creek Winery」と入力します。
ローカルルートフォルダ欄は、フォルダアイコンをクリックして、先ほどダウンロードして解凍した ccwinery フォルダを選びます。

ホームページと CSS ファイルの作成

まず、Crush Creek Winery サイトの最初のページとして、ホームページを作成します。

メニューから「ファイル→新規」を選んで、左側の「空白ページ」を選びます。
ページタイプは HTML、レイアウトは＜なし＞を選びます。
メニューから「ファイル→保存」を選んで、ファイル名「index.htm」として ccwinery フォルダに保存します。

次に、サイト全体のレイアウトを指定するCSSファイルを作成します。

メニューから「ファイル→新規」を選んで、左側の「空白ページ」を選びます。
ページタイプはCSSを選びます。
ファイル名「ccwinery.css」として ccwinery フォルダに保存します。

そして、index.htm と ccwinery.css をリンクさせます。

index.htm を開いて、メニューから「ウィンドウ→CSSスタイル」を選び、CSS スタイルパネルのリンクアイコンをクリックします。
表示された「外部スタイルシートの添付」ダイアログボックスの参照ボタンをクリックして ccwinery.css を選び（図3）、OK ボタンをクリックします。

図3　リンクさせたいCSSファイルを選択します。

これで index.htm と ccwinery.css が繋がり、ccwinery.css 上で作成したルールが index.htm に適用されるようになりました。

div タグの作成

スケッチしたレイアウトを実現するには5つの div タグが必要です。ヘッダ用（会社名やバナー写真を格納します）、左カラム用、右カラム用、フッタ用、ラッパー用（全体の幅を指定したり、ページコンテンツを中央配置にしたりするために使います）です。この5つの div タグを index.htm に挿入するとともに、ccwinery.css 上で各 div タグに対する設定を行う必要があります。そして、各divタグに対して、スタイル（背景色、幅、パディングなど）を指定していきます。

おそらく、index.htm に div タグを挿入すると同時に ccwinery.css 上で div タグに対する設定を行う方法で一番簡単なものは、Dreamweaver の挿入メニュー内にあるコマンドを使う方法です。

メニューから「挿入→レイアウトオブジェクト→Divタグ」を選んで、「Divタグを挿入」ダイアログボックスの「新規CSSルール」ボタンをクリックします（図4）。

図4　divタグを挿入します。
「新規CSSルール」ダイアログボックス上で、セレクタタイプ欄のプルダウンメニューから「ID（1つのHTMLエレメントのみに適用）」を選んで、セレクタ名欄に「header」と入力し、ルール定義欄で「ccwinery.css」を選びます。

図5　ヘッダセクション用のスタイルをセットアップしているところ。
OKボタンを3回押してスタイルの設定を完了し、index.htm にヘッダ用divタグを挿入します（図6）。スタイルの指定は、後ほど行います。

図6　index.htmにヘッダ用divタグを挿入します。

次に左カラムのセクションを作成します。このセクションは、ヘッダの後に来ます。ヘッダと同様に作業しますが、必ず、左カラム用 div タグはヘッダ用 div タグの後に挿入してください。

メニューから「挿入→レイアウトオブジェクト→Divタグ」を選んで、挿入欄のプルダウンメニューから「タグの後」「<div id="header">」を選びます（図7）。

図7　プルダウンメニューから「タグの後」を選びます。
「新規CSSルール」ダイアログボックス上で、セレクタタイプ欄のプルダウンメニューから「ID（1つのHTML エレメントのみに適用）」を選んで、セレクタ名欄に「leftcol」と入力し、ルール定義欄で「ccwinery.css」を選びます。
OK ボタンを3回押してダイアログボックスを閉じ、index.htm に左カラム用 div タグを挿入します。

同じ作業をして、左カラム用 div タグの後に右カラム用divタグが来るように、右カラム用 div タグの後にフッタ用 div タグが来るようにします（図8）。

図8　4つのdivタグを挿入しました。

最後の div タグを作ります。この div タグは、すべてのコンテンツを包むラッパー用で、ページの幅や全体の配置を指定するために使用します。

メニューから「編集→すべて選択」を選び、「挿入→レイアウトオブジェクト→Divタグ」を選びます。挿入欄のプルダウンメニューから「選択範囲の周囲で折り返し」を選び、「新規CSSルール」ボタンをクリックします。
「新規CSSルール」ダイアログボックス上で、セレクタタイプ欄のプルダウンメニューから「ID（1つのHTMLエレメントのみに適用）」を選んで、セレクタ名欄に「wrapper」と入力し、OK ボタンを3回押してダイアログボックスを閉じます。
コードビューに切り替えて、コード内容を確認します（図9）。

図9　コードビューにすると、ラッパー用divタグが他の4つのdivタグを囲んでいるはずです。

レイアウトのスタイルを編集

デザインビューでは、各 div タグのスタイルを編集して、レイアウトを制御することができます。まずは、ラッパー用 div タグから始めましょう。横幅を760ピクセル、中央配置にします。

「CSSスタイル」パネルで、（必要ならば）ccwinery.css の左横にある「+」をクリックしてスタイルを表示させ、「#wrapper」をダブルクリックして編集します。
カテゴリリストから「ボックス」を選んで、Width プロパティに760pxと設定します。
中央配置にするために、Margin エリアの「すべて同一」チェックを外し、Right と Left を「auto」にして OK ボタンをクリックします（図10）。

図10　ラッパー用divタグを編集しているところ。

次に左カラムが左側に、右カラムが右側に位置するようにします。

「#leftcol」をダブルクリックして編集します。
カテゴリリストから「ボックス」を選んで、Float プロパティを「Left」に設定し、OK ボタンをクリックします。
「#rightcol」をダブルクリックして編集します。
カテゴリリストから「ボックス」を選んで、Float プロパティを「Right」に設定し、OK ボタンをクリックします。

フッタが左右のカラムの下に来るようにします。

「#footer」をダブルクリックして編集します。
カテゴリリストから「ボックス」を選んで、Clear プロパティを「Both」に設定し、OK ボタンをクリックします。

これらの結果、ページの状態は図11のようになるはずです。

図11　右カラムが右側にフロートしています。

最後にラッパーの背景色をダークグレーにします。そして、周辺エリアの背景色をライトグレーにするために、新しくbodyタグ用のスタイルを設定します。

メニューから「フォーマット→CSSスタイル→新規」を選びます。
セレクタタイプ欄で「タグ（HTML エレメントを再定義）」を選び、セレクタ名欄は「body」を選んで、OK ボタンをクリックします。
「CSSルール定義」ダイアログボックス上で、カテゴリリストの「背景」を選び、Background-Color プロパティに「#C8C8C8」と入力します。
カテゴリリストの「ボックス」を選び、Padding エリアの「すべて同一」チェックボックスを外し、Top に50pxと指定して、OK ボタンをクリックします。すると、ページ上部に素敵なスペースが確保されます。

ラッパーの背景色をダークグレーにします。

「#wrapper」をダブルクリックして編集します。
カテゴリリストから「背景」を選んで、Background-Color プロパティに「#4A4A4A」と入力し、OK ボタンをクリックします。

これまでの作業の結果は、図12のようになっているはずです。

図12　編集後のレイアウトスタイル。

div タグにコンテンツを追加

Crush Creek Vineyards のホームページをもっと作り込んでいきましょう。いよいよ、コンテンツです。ヘッダセクションにバナーイメージを追加します。

ヘッダにあるテキストを削除します。
メニューから「挿入→イメージ」を選び、images フォルダに移動して header.jpg を選びます。

次は、フッタセクションです。

フッタにあるテキストを削除します。
「©2009 Crush Creek Winery」と入力します。

左カラムです。

左カラムにあるテキストを削除します。
to_copy_from フォルダ内にある for_ccwinery_site.htm を開いて、4つのリンクをコピーし、左カラムにペーストします。

右カラムです。

右カラムにあるテキストを削除します。
for_ccwinery_site.htm から右カラム用のテキストをコピーして、右カラムにペーストします。

すべてのコンテンツを配置したホームページは図13のようになっているはずです。

図13　divタグにコンテンツを追加した、Crush Creek Wineryのホームページ。

コンテンツの編集とスタイル付け

次に各セクションのコンテンツの見た目を整えていきましょう。
右カラムの背景色を白にします（図14）。

「#rightcol」をダブルクリックします。
カテゴリリストから「背景」を選んで、Background-Color プロパティに「#FFFFFF」と入力します。
カテゴリリストから「ボックス」を選んで、Width プロパティを520px、Padding エリアの「すべて同一」チェックボックスをマークし、27pxに設定します。
カテゴリリストから「タイプ」を選んで、Font-Family プロパティのプルダウンメニューから「Arial, Helvetica, Sans-Serif」を選びます。Font-Size プロパティを75％、Line-Height プロパティを160%、Color プロパティを「#4A4A4A」と設定します。

図14　右カラムのCSSを編集したところ。

次は、フッタセクションです。

「#footer」をダブルクリックします。
カテゴリリストから「背景」を選んで、Background-Color プロパティに「#EFEFEF」と入力します。
カテゴリリストから「ボックス」を選んで、Padding エリアの「すべて同一」チェックボックスを外し、Top を4px、Right を25px、Bottom を4px、Left を25pxに設定します。
カテゴリリストから「ブロック」を選んで、Text-Align プロパティを Right に設定します。
カテゴリリストから「タイプ」を選んで、Font-Family プロパティのプルダウンメニューから「Arial, Helvetica, Sans-Serif」を選びます。Font-Weight プロパティを Bold、Font-Size プロパティを60％に設定して OK ボタンをクリックします。

図15　フッタのCSSを編集したところ。

左カラムです。

「#leftcol」をダブルクリックします。
カテゴリリストから「ボックス」を選んで、Padding エリアの「すべて同一」チェックボックスをマークし、27px に設定して OK ボタンをクリックします。

左カラムのリンクには特別なスタイルを適用させます（図16）。

メニューから「フォーマット→CSSスタイル→新規」を選びます。
セレクタタイプ欄で「複合（選択に基づく）」を選び、セレクタ名欄は「#leftcol a」と入力し、ルール定義欄は ccwinery.css を選んで、OK ボタンをクリックします。
「CSSルール定義」ダイアログボックス上で、カテゴリリストの「タイプ」を選び、Color プロパティに「#FFFFFF」と入力します。Font-Family プロパティのプルダウンメニューから「Arial, Helvetica, Sans-Serif」を選び、Font-Weight プロパティを Bold、Font-Size プロパティを75％、Text-Transform プロパティを「Uppercase」、Text-Decoration プロパティを「None」に設定します。

図16　左カラムのCSSを編集したところ。

リンクにロールオーバー効果をつけるために十分なスペースを確保します。

カテゴリリストから「ブロック」を選んで、Display プロパティは「Block」を選びます。
カテゴリリストから「ボックス」を選んで、Padding エリアの「すべて同一」チェックボックスを外し、Top を4px、Right を20px、Bottom を4px、Left を4pxに設定します。

最後に、ロールオーバーの色を設定します。

メニューから「フォーマット→CSSスタイル→新規」を選びます。
セレクタタイプ欄で「複合（選択に基づく）」を選び、セレクタ名欄は「a:hover」、ルール定義欄は ccwinery.css を選んで、OK ボタンをクリックします。
「CSS ルール定義」ダイアログボックス上で、カテゴリリストの「背景」を選び、Background-Color プロパティに「#660000」と入力します。

以上の作業が完了したら、ライブビューでロールオーバー効果を確認することができます。

完成後のホームページをライブビューで表示すると図17のようになります。

図17　期待通りの見た目になっているかライブビューで確認してください。

残りのページの作成

大変な作業パートは終わりました。残りのページの作成は、比較的簡単にできます。

index.htm を保存します。
メニューから「ファイル→新規保存」を選んで、ファイル名を「wines.htm」とし、for_ccwinery_site.htm から wines.htm 用のテキストをコピー＆ペーストします。
これらの作業を繰り返して、tastingroom.htm と contact.htm を作成します。
リンクをチェックするために、メニューから「ファイル→すべて保存」を選んで、「ファイル→ブラウザでプレビュー→{任意のブラウザ}」を選び、ブラウザ上でリンクをクリックしてください。

もし、各ページのヘッダの上部に余分なスペースができてしまった場合は、ライブビューをオフにして、ヘッダに挿入ポインタを置き、プロパティパネルのフォーマット欄を「なし」に設定してください。この余分なスペースはpタグによって発生しています。他の対策としては、line-height プロパティの値を小さく設定する方法もあります。

スタイルを使ってサイトをセットアップすることの大きなメリットは、1つのスタイルを編集するだけで、そのスタイルを適用させている全てのコンテンツを瞬時に変更できることです。ぜひ、試してみてください。例えば、a:hover をダブルクリックして、色を変えてみてください。ブラウザでプレビューして、リンクにロールオーバーすると色が変更されているはずです。

もう皆さんは、Dreamweaver を使って CSS サイトを作れるようになりました。初期スタイルをセットアップするには、多少手間が掛かるかもしれませんが、一度できてしまえば、追加ページを簡単に作ることができますし、サイト全体のデザインも自動で更新できるようになります。

もっと CSS に関する情報を知りたいという人は、Dreamweaver Developer Center の「Learn to work with CSS (※英語)」を見てください。