マニュアルキャンセル

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

検索

最終更新日 : 2021年4月28日

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

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

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

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

この項に進む前に、CSS の基本的な概念を理解しておく必要があります。

CSS レイアウトの基本的な作成ブロックは Div タグです。Div タグは、テキストやイメージなどのページエレメントのコンテナとして機能することの多い HTML タグです。次の例では、3 つの異なる Div タグを含んだ HTML ページを示します。1 つは大きな "コンテナ" タグで、残りの 2 つはコンテナタグに含まれているサイドバータグとメインコンテンツタグです。

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

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

<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
    <div id="sidebar"> 
    <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> 
     
<!--mainContent div tag--> 
    <div id="mainContent"> 
    <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>

上の例では、どの Div タグにも "スタイル" が関連付けられていません。CSS ルールが定義されていない状態では、各 Div タグとそのコンテンツがページ上の初期設定の位置に配置されます。ただし、各 Div タグには固有の ID が割り当てられており（上の例を参照）、この ID を使用して CSS ルールを作成し、これを適用することで、Div タグのスタイルと配置を変更できます。

次に示す CSS ルールは、ドキュメントのヘッドか外部 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 ピクセルの空間を空けるよう設定しています。このルールがメインコンテンツ Div に適用されたときの結果は次のとおりです。

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

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

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#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> 
<!--container div tag--> 
<div id="container"> 
    <!--sidebar div tag--> 
    <div id="sidebar"> 
    <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> 
     <!--mainContent div tag--> 
    <div id="mainContent"> 
    <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> 
</body>

注意：

上の例のコードは、Dreamweaver 付属の事前にデザインされたレイアウトを使用して新しいドキュメントを作成するときに、2 列を固定に、左にサイドバーレイアウトを作成するコードを簡略化したものです。

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

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

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

ファイル／新規を選択します。
新規ドキュメントダイアログボックスで、「空白ページ」カテゴリーを選択します（初期設定ではこれが選択されます）。
「ページタイプ」で、作成するページの種類を選択します。

注意：

レイアウトには HTML ページタイプを選択する必要があります。例えば、HTML、ColdFusion®、PHP などを選択できます。CSS レイアウトを使用して ActionScript™、CSS、ライブラリ項目、JavaScript、XML、XSLT、または ColdFusion コンポーネントのページを作成することはできません。新規ドキュメントダイアログボックスの「その他」カテゴリーのページタイプにも、CSS ページレイアウトを含めることはできません。
「レイアウト」で、使用する CSS レイアウトを選択します。16 種類のレイアウトから選択できます。プレビューウィンドウにレイアウトが表示され、選択したレイアウトの簡単な説明が示されます。

事前にデザインされた CSS レイアウトでは、次のタイプの列が提供されています。

固定

列幅をピクセルで指定します。ブラウザーのサイズやサイトのビジターのテキスト設定に関係なく、列のサイズが固定されます。

リキッド

列の幅をサイトのビジターのブラウザー幅に対する割合で指定します。サイトのビジターがブラウザーの幅を拡大縮小すると、デザインが適合されますが、サイトのビジターがテキスト設定を変更しても、デザインは適合されません。
ドキュメントタイプポップアップメニューでドキュメントタイプを選択します。
レイアウト CSS ポップアップメニューで、レイアウトの CSS の場所を選択します。

ヘッドに追加

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

新規ファイルを作成

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

既存ファイルへリンク

レイアウトに必要な CSS ルールをあらかじめ含んでいる既存の CSS ファイルを指定できます。このオプションは、複数のドキュメントで同じ CSS レイアウト（CSS ルールが単一のファイルに収められているレイアウト）を使用する場合に特に便利です。
次のいずれかの操作を実行します。
- レイアウト CSS ポップアップメニューで「ヘッドに追加」（初期設定オプション）を選択した場合は、「作成」をクリックします。
- レイアウト CSS ポップアップメニューで「新規ファイルを作成」を選択した場合は、「作成」をクリックし、スタイルシートファイルの新規保存ダイアログボックスで新しい外部ファイルの名前を指定します。
- レイアウト CSS ポップアップメニューで「既存ファイルへリンク」を選択した場合は、スタイルシートを添付アイコンをクリックして「CSS ファイルを添付」テキストボックスに外部ファイルを追加することでスタイルシートファイルの新規保存ダイアログボックスに入力し、「OK」をクリックします。作業が完了したら、新規ドキュメントダイアログボックスで「作成」をクリックします。
注意：

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

レイアウト CSS を新しいファイルに挿入するか、外部ファイルにリンクすると、Dreamweaver によって自動的にそのファイルが作成中の HTML ページにリンクされます。

注意：

Internet Explorer の表示上の問題に対処するための IE 条件分岐コメント（CC）は、レイアウト CSS の場所として新規外部ファイルまたは既存の外部ファイルを選択した場合でも、新しい CSS レイアウトドキュメントのヘッドに埋め込まれたままとなります。
（オプション）CSS レイアウトとは無関係の新しいページを作成する際に、そのページに CSS スタイルシートを添付することもできます。そのためには、CSS ファイルを添付ペインの上にあるスタイルシートを添付アイコンをクリックし、CSS スタイルシートを選択します。

このプロセスの詳しいウォークスルーについては、David Powers の記事（Automatically attaching a style sheet to new documents（英語））を参照してください。

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

新規ドキュメントダイアログボックスの選択リストに追加したい CSS レイアウトを含んでいる HTML ページを作成します。レイアウトの CSS は、HTML ページのヘッドに含まれていなければなりません。

注意：

カスタム CSS レイアウトを Dreamweaver 付属の他のレイアウトと一貫させるには、.htm 拡張子を指定して HTML ファイルを保存する必要があります。
HTML ページを Adobe Dreamweaver CS5¥Configuration¥BuiltIn¥Layouts フォルダーに追加します。
（オプション）レイアウトのプレビューイメージ（例えば .gif ファイルや .png ファイル）を Adobe Dreamweaver CS5¥Configuration¥BuiltIn¥Layouts フォルダーに追加します。Dreamweaver 付属の初期設定イメージは、幅が 227 ピクセル、高さが 193 ピクセルの PNG ファイルです。

注意：

プレビューイメージファイルには、容易に追跡できるように、HTML ファイルと同じ名前を付けてください。例えば、HTML ファイルの名前が myCustomLayout.htm である場合は、プレビューイメージファイルの名前を image myCustomLayout.png にします。
（オプション）カスタムレイアウト用のノートファイルを作成します。このためには、Adobe Dreamweaver CS5¥Configuration¥BuiltIn¥Layouts¥_notes フォルダーを開き、同じフォルダー内にあるいずれかの既存ノートファイルをコピーしてペーストし、そのコピーファイルの名前をカスタムレイアウトに合わせて変更します。例えば、oneColElsCtr.htm.mno ファイルをコピーし、そのファイル名を myCustomLayout.htm.mno にすることができます。
（オプション）カスタムレイアウト用のノートファイルを作成したら、このファイルを開いて、レイアウト名、説明、およびプレビューイメージを指定できます。

その他の関連ヘルプ

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る

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

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

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

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

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

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

その他の関連ヘルプ

ヘルプをすばやく簡単に入手

アドビサポートコミュニティ

サポート