CSS を使用したページのレイアウトについて

最終更新日 : 2024年4月25日

CSS レイアウトの基本的な構造と、Dreamweaver で CSS を使用してページやコンテンツをデザインする方法を説明します。

CSS ページのレイアウトについて

CSS ページのレイアウトでは、従来の HTML のテーブルやフレームではなくカスケーディングスタイルシートフォーマットを使用して、Web ページ上のコンテンツが整理されます。 CSS レイアウトの基本的な作成ブロックは Div タグです。Div タグは、テキストやイメージなどのページエレメントのコンテナとして機能することの多い HTML タグです。 CSS レイアウトを作成する場合は、ページ上に Div タグを置き、それらのタグにコンテンツを追加し、さらにそれらを様々な場所に配置します。テーブルの行と列内にのみ存在するテーブルセルとは異なり、Div タグは Web ページ上のあらゆる場所に配置できます。 Div タグは、絶対的に配置するか（x 座標と y 座標を指定）、相対的に配置（現在の位置を基準とした位置を指定）できます。フロート、余白およびマージンを指定して Div タグを配置することもできます。これは、現在の Web 標準で推奨される方法です。

CSS ページのレイアウト構造について

このセクションを進める前に、基本的なCSSの概念について理解している必要があります。

CSSレイアウトの基本的な構成要素はdivタグです。これは、多くの場合、テキスト、画像、およびその他のページ要素のコンテナとして機能するHTMLタグです。次の例は、3つの独立したdivタグを含むHTMLページを示しています。1つの大きな「コンテナ」タグと、コンテナタグ内にある他の2つのタグ（サイドバータグとメインコンテンツタグ）です。

A. コンテナ Div B. サイドバー Div C. メインコンテンツ Div

次に示すのは、HTML 内の 3 つの Div タグをすべて含んだコードです。

<h3>Sidebar Content</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>

</div>

<h1> Main Content </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Praesent aliquam, justo convallis luctus rutrum.</p>

<p>Phasellus tristique purus a augue condimentum adipiscing.Aenean sagittis.Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

<h2>H2 level heading </h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>

</div>

上記の例では、どのdivタグにも「スタイリング」が設定されていません。CSS規則が定義されていない場合、各divタグとその内容はページ上のデフォルトの位置に配置されます。ただし、各divタグに固有のid（上記の例のように）がある場合、そのidを使用してCSS規則を作成し、適用時にdivタグのスタイルと位置を変更できます。

次のCSS規則は、ドキュメントのheadセクションまたは外部CSSファイルに配置でき、ページ上の最初の、または「コンテナ」divタグのスタイリング規則を作成します。

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

#containerルールは、コンテナのdivタグを幅780ピクセル、白い背景、余白なし（ページの左側から）、黒の1ピクセルの実線ボーダー、左揃えのテキストでスタイル設定します。コンテナのdivタグにルールを適用した結果は以下の通りです：

A. 左揃えのテキスト B. 白い背景 C. 1 ピクセルの黒い実線の境界線

次の CSS ルールは、サイドバー Div タグ用のスタイルルールを作成します。

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

#sidebarルールは、サイドバーのdivタグに対して、幅200ピクセル、グレーの背景、上下15ピクセルのパディング、右10ピクセルのパディング、左20ピクセルのパディングを設定します。（余白の順序は、初期設定では top-right-bottom-left です）。さらに、このルールはfloat: leftプロパティでサイドバーのdivタグを配置します。このプロパティは、サイドバーのdivタグをコンテナのdivタグの左側に配置します。サイドバーのdivタグにルールを適用した結果は以下の通りです：

A. 200 ピクセルの幅 B. 上余白と下余白、15 ピクセル

最後に、メインコンテナの div タグの CSS ルールでレイアウトが完成します。

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

#mainContentルールは、メインコンテンツのdivを左余白250ピクセルでスタイル設定します。これは、コンテナdivの左側とメインコンテンツdivの左側の間に250ピクセルのスペースを空けることを意味します。さらに、このルールはメインコンテンツのdivの右側、下側、左側に20ピクセルの余白を設けます。mainContentのdivにルールを適用した結果は以下の通りです：

コード全体を次に示します。

A. 20 ピクセルの左余白 B. 20 ピクセルの右余白 C. 20 ピクセルの下余白

<head>

<title>Untitled Document</title>

#container {

width: 780px;

background: #FFFFFF;

margin: 0 auto;

border: 1px solid #000000;

text-align: left;

}

#sidebar {

float: left;

width: 200px;

background: #EBEBEB;

padding: 15px 10px 15px 20px;

}

#mainContent {

margin: 0 0 0 250px;

padding: 0 20px 20px 20px;

}

</style>

</head>

<body>

<h3>サイドバーコンテンツ</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit。</p>

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis。</p>

</div>

<h1> メインコンテンツ </h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit。Praesent aliquam, justo convallis luctus rutrum。</p>

<p>Phasellus tristique purus a augue condimentum adipiscing。Aenean sagittis。Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio。</p>

<h2>H2レベル見出し</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit。Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam。</p>

</div>

</body>

メモ

上記のコード例は、Dreamweaverに付属するプリデザインレイアウトを使用して新しいドキュメントを作成する際に、2列の固定左サイドバーレイアウトを作成するコードの簡略版です。

CSS レイアウトを使用したページの作成

Dreamweaver で新しいページを作成するときに、CSS レイアウトをあらかじめ含んでいるページを作成することができます。 Dreamweaver では、16 種類の CSS レイアウトを選択できるようになっています。また、CSS レイアウトを独自に作成して設定フォルダーに追加すると、新規ドキュメントダイアログボックスにレイアウトの選択肢としてそれらが表示されるようになります。

CSS レイアウトを使用したページの作成

ファイル／新規を選択します。

新規ドキュメントダイアログボックスで、空白ページカテゴリを選択します。（初期設定ではこれが選択されます）。

「ページタイプ」で、作成するページの種類を選択します。

メモ

レイアウトには HTML ページタイプを選択する必要があります。例えば、HTML、ColdFusion®、PHP などを選択できます。ActionScript™、CSS、ライブラリアイテム、JavaScript、XML、XSLT、またはColdFusionコンポーネントページをCSSレイアウトで作成することはできません。新規ドキュメントダイアログボックスのその他カテゴリのページタイプも、CSSページレイアウトを含むことはできません。

「レイアウト」で、使用する CSS レイアウトを選択します。 16種類の異なるレイアウトから選択することができます。プレビューウィンドウにはレイアウトが表示され、選択したレイアウトの簡単な説明が表示されます。

プリデザインCSSレイアウトは、次のタイプの列を提供します：

固定

列幅をピクセルで指定します。列は、ブラウザーのサイズやサイト訪問者のテキスト設定に基づいてリサイズされません。

リキッド

列の幅は、サイト訪問者のブラウザー幅のパーセンテージとして指定されます。サイト訪問者がブラウザーを広くしたり狭くしたりするとデザインが適応しますが、サイト訪問者のテキスト設定に基づいて変更されることはありません。

ドキュメントタイプポップアップメニューでドキュメントタイプを選択します。

レイアウトCSSのポップアップメニューから、レイアウトのCSSの場所を選択します。

ヘッドに追加

レイアウトの CSS を作成中のページのヘッドに追加します。

新規ファイルを作成

レイアウト用のCSSを新しい外部CSSスタイルシートに追加し、作成中のページに新しいスタイルシートを添付します。

既存ファイルへリンク

レイアウトに必要なCSSルールが既に含まれている既存のCSSファイルを指定できます。このオプションは、同じCSSレイアウト（CSSルールが単一ファイルに含まれている）を複数のドキュメントで使用したい場合に特に便利です。

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

レイアウトCSSのポップアップメニューから「ヘッドに追加」を選択した場合（デフォルトオプション）、「作成」をクリックします。

レイアウト CSS ポップアップメニューから「新規ファイルを作成」を選択した場合は、「作成」をクリックし、「スタイルシートファイルに名前を付けて保存」ダイアログボックスで新しい外部ファイルの名前を指定します。

レイアウト CSS ポップアップメニューから「既存のファイルにリンク」を選択した場合は、「スタイルシートを追加」アイコンをクリックし、「外部スタイルシートを添付」ダイアログボックスを完了して「OK」をクリックすることで、外部ファイルを「CSS ファイルを添付」テキストボックスに追加します。完了したら、「新規ドキュメント」ダイアログボックスで「作成」をクリックします。

メモ

「既存のファイルにリンク」オプションを選択する場合、指定するファイルには既に CSS ファイルのルールが含まれている必要があります。

レイアウト CSS を新しいファイルに配置するか既存のファイルにリンクすると、Dreamweaver は自動的にそのファイルを作成中の HTML ページにリンクします。

メモ

IE レンダリングの問題を回避するのに役立つ Internet Explorer 条件付きコメント（CC）は、レイアウト CSS の場所として「新規外部ファイル」または「既存外部ファイル」を選択した場合でも、新しい CSS レイアウトドキュメントのヘッドに埋め込まれたままになります。

（オプション）ページを作成するときに、（CSS レイアウトとは関係のない）CSS スタイルシートを新しいページに添付することもできます。これを行うには、「CSS ファイルを添付」パネルの上にある「スタイルシートを添付」アイコンをクリックし、CSS スタイルシートを選択します。

このプロセスの詳細な手順については、David Powers の記事「新規ドキュメントへのスタイルシートの自動添付」を参照してください。

選択肢のリストにカスタム CSS レイアウトを追加

「新規ドキュメント」ダイアログボックスの選択肢のリストに追加したい CSS レイアウトを含む HTML ページを作成します。レイアウトの CSS は HTML ページのヘッドに配置する必要があります。

メモ

カスタム CSS レイアウトを Dreamweaver に付属する他のレイアウトと一致させるには、HTML ファイルを .htm 拡張子で保存してください。

HTML ページを Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts フォルダーに追加します。

（オプション）レイアウトのプレビュー画像（例：GIF または .png ファイル）を Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts フォルダーに追加します。Dreamweaver に付属するデフォルトの画像は、幅 227 ピクセル x 高さ 193 ピクセルの PNG ファイルです。

メモ

簡単に追跡できるように、プレビュー画像には HTML ファイルと同じファイル名を付けます。例えば、HTML ファイルが myCustomLayout.htm という名前の場合は、プレビュー画像を myCustomLayout.png という名前にします。

（オプション）Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes フォルダーを開き、同じフォルダー内の既存のノーツファイルをコピーして貼り付け、カスタムレイアウト用にコピーの名前を変更することで、カスタムレイアウト用のノーツファイルを作成します。例えば、oneColElsCtr.htm.mno ファイルをコピーして、myCustomLayout.htm.mno に名前を変更できます。

（オプション）カスタムレイアウト用のノーツファイルを作成した後、そのファイルを開いてレイアウト名、説明、およびプレビュー画像を指定できます。

その他の関連ヘルプ

Dreamweaver で美しい web サイトを構築
強力なオールインワンツールで動的な web サイトをデザイン、コーディング、管理できます。

アプリを開く

レイアウト用ビジュアルエイドの使用

Bootstrap を使用したレスポンシブな Web サイトのデザイン

学ぶ

アプリ内のステップバイステップのビデオチュートリアルと実践的なガイダンスで学習できます。

コミュニティ

ディスカッションに参加し、回答を見つけ、専門家から学び、知識を共有することができます。

アドビホーム

お気に入りの Creative Cloud アプリ、サービス、ファイル管理などにアクセスできます。