マニュアル キャンセル

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

  1. Dreamweaver ユーザーガイド
  2. はじめに
    1. レスポンシブ web デザインの基本
    2. Dreamweaver の新機能
    3. Dreamweaver を使用した web 開発 - 概要
    4. Dreamweaver / よくある質問
    5. キーボードショートカット
    6. Dreamweaver の必要システム構成
    7. 機能の概要
  3. Dreamweaver と Creative Cloud
    1. Dreamweaver 設定と Creative Cloud の同期
    2. Dreamweaver での Creative Cloud ライブラリ
    3. Dreamweaver での Photoshop ファイルの使用
    4. Adobe Animate と Dreamweaver の操作
    5. ライブラリから web 用に最適化された SVG ファイルを抽出する
  4. Dreamweaver のワークスペースとビュー
    1. Dreamweaver ワークスペース
    2. ビジュアル開発のための Dreamweaver ワークスペースの最適化
    3. ファイル名またはコンテンツに基づいたファイルの検索 | Mac OS
  5. サイトの設定
    1. Dreamweaver サイトについて
    2. ローカルバージョンのサイトの設定
    3. Publishing server への接続
    4. テストサーバーの設定
    5. Dreamweaver サイトの設定の読み込みおよび書き出し
    6. リモートサーバーからローカルサイトのルートに既存の web サイトを取り込む
    7. Dreamweaver のアクセシビリティ機能
    8. 詳細設定
    9. ファイル転送に関するサイト環境設定の設定
    10. Dreamweaver でのプロキシサーバー設定の指定
    11. Dreamweaver 設定と Creative Cloud の同期
    12. Dreamweaver での Git の使用
  6. ファイルの管理
    1. ファイルの作成およびオープン
    2. ファイルとフォルダーの管理
    3. サーバーからのファイルの取得とサーバーへのファイルの送信
    4. ファイルのチェックインとチェックアウト
    5. ファイルの同期
    6. ファイルの違いの比較
    7. Dreamweaver サイト内のファイルおよびフォルダーのクローク
    8. Dreamweaver サイトでのデザインノートの有効化
    9. Gatekeeper の脆弱性の悪用を防ぐ
  7. レイアウトとデザイン
    1. レイアウト用ビジュアルエイドの使用
    2. CSS を使用したページのレイアウトについて
    3. Bootstrap を使用したレスポンシブな web サイトのデザイン
    4. Dreamweaver でのメディアクエリーの作成と使用
    5. テーブルを使用したコンテンツの表示
    6. カラー
    7. 可変グリッドレイアウトによるレスポンシブデザイン
    8. Dreamweaver 内の Extract
  8. CSS
    1. カスケーディングスタイルシートについて
    2. CSS デザイナーを使用したページのレイアウト
    3. Dreamweaver での CSS プリプロセッサーの使用
    4. Dreamweaver で CSS スタイルの環境設定を行う方法
    5. Dreamweaver での CSS ルールの移動
    6. Dreamweaver でのインライン CSS の CSS ルールへの変換
    7. Div タグの操作
    8. 背景へのグラデーションの適用
    9. Dreamweaver での CSS3 移行効果の作成および編集
    10. コードのフォーマット
  9. ページコンテンツとアセット
    1. ページプロパティの設定
    2. CSS 見出しプロパティおよび CSS リンクプロパティの設定
    3. テキストの操作
    4. テキスト、タグ、属性の検索と置換
    5. DOM パネル
    6. ライブビューでの編集
    7. Dreamweaver でのドキュメントのエンコード
    8. ドキュメントウィンドウでのエレメントの選択および表示
    9. プロパティインスペクターでのテキストプロパティの設定
    10. web ページのスペルチェック
    11. Dreamweaver での区切り線の使用
    12. Dreamweaver でのフォントの組み合わせの追加と変更
    13. アセットを使用した作業
    14. Dreamweaver での日付の挿入と更新
    15. Dreamweaver でのお気に入りアセットの作成と管理
    16. Dreamweaver でのイメージの挿入と編集
    17. メディアオブジェクトの追加
    18. Dreamweaver でのビデオの追加
    19. HTML5 ビデオの挿入
    20. SWF ファイルの挿入
    21. オーディオエフェクトの追加
    22. Dreamweaver での HTML5 オーディオの挿入
    23. ライブラリ項目の操作
    24. Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
  10. リンクおよびナビゲーション
    1. リンクおよびナビゲーションについて
    2. リンク
    3. イメージマップ
    4. リンクのトラブルシューティング
  11. jQuery Widget と効果
    1. Dreamweaver での jQuery UI Widget と Mobile Widget の使用
    2. Dreamweaver での jQuery 効果の使用
  12. web サイトのコーディング
    1. Dreamweaver でのコーディングについて
    2. Dreamweaver のコーディング環境
    3. コーディングの環境設定
    4. コードカラーリングのカスタマイズ
    5. コードの記述と編集
    6. コードヒントとコード補完機能
    7. コードの折りたたみと展開
    8. スニペットでコードを再利用する
    9. 構文チェックコード
    10. コードの最適化
    11. デザインビューでのコードの編集
    12. ページのヘッドコンテンツの操作
    13. Dreamweaver でのサーバーサイドインクルードの挿入
    14. Dreamweaver でのタグライブラリの使用
    15. Dreamweaver へのカスタムタグの読み込み
    16. JavaScript ビヘイビアーの使用(基本操作)
    17. JavaScript に組み込まれているビヘイビアーの適用
    18. XML および XSLT について
    19. Dreamweaver でのサーバーサイド XSL 変換の実行
    20. Dreamweaver でのクライアントサイド XSL 変換の実行
    21. Dreamweaver での XSLT の文字エンティティの追加
    22. コードのフォーマット
  13. 製品間ワークフロー
    1. Dreamweaver への拡張機能のインストールと使用
    2. Dreamweaver のアプリ内アップデート
    3. Dreamweaver での Microsoft Office 文書の挿入(Windows のみ)
    4. Fireworks および Dreamweaver による作業
    5. Contribute を使用した Dreamweaver サイトでのコンテンツの編集
    6. Dreamweaver と Business Catalyst の統合
    7. パーソナライズされた電子メールキャンペーンの作成
  14. テンプレート
    1. Dreamweaver テンプレートについて
    2. テンプレートおよびテンプレートから作成されたドキュメントの認識
    3. Dreamweaver テンプレートの作成
    4. テンプレート編集可能領域の作成
    5. Dreamweaver でのリピート領域およびテーブルの作成
    6. テンプレートの任意の領域の使用
    7. Dreamweaver での編集可能なタグ属性の定義
    8. Dreamweaver でネストされたテンプレートを作成する方法
    9. テンプレートの編集、更新、削除
    10. Dreamweaver での xml コンテンツの書き出しおよび読み込み
    11. 既存のドキュメントでのテンプレートの適用または削除
    12. Dreamweaver テンプレートでのコンテンツの編集
    13. Dreamweaver でのテンプレートタグのシンタックスルール
    14. テンプレート領域のハイライト表示の環境設定
    15. Dreamweaver でテンプレートを使用する利点
  15. モバイルとマルチスクリーン
    1. メディアクエリーの作成
    2. モバイルデバイス向けのページ方向の変更
    3. Dreamweaver を使用したモバイルデバイス向けの web アプリの作成
  16. 動的サイト、ページおよび web フォーム
    1. web アプリケーションについて
    2. アプリケーション開発のためのコンピューター設定
    3. データベース接続のトラブルシューティング
    4. Dreamweaver での接続スクリプトの削除
    5. 動的ページのデザイン
    6. 動的コンテンツソースの概要
    7. 動的コンテンツのソースの定義
    8. ページへの動的コンテンツの追加
    9. Dreamweaver での動的コンテンツの変更
    10. データベースのレコードの表示
    11. Dreamweaver でのライブデータの入力とトラブルシューティング
    12. Dreamweaver でのカスタムサーバービヘイビアーの追加
    13. Dreamweaver を使用したフォームの作成
    14. フォームを使用したユーザーからの情報の収集
    15. Dreamweaver での ColdFusion フォームの作成と有効化
    16. web フォームの作成
    17. フォームエレメントの HTML5 サポート強化
    18. Dreamweaver を使用したフォームの開発
  17. アプリケーションのビジュアル開発
    1. Dreamweaver でのマスターページと詳細ページの作成
    2. 検索ページと結果ページの作成
    3. レコード挿入ページの作成
    4. Dreamweaver でのレコードの更新ページの作成
    5. Dreamweaver でのレコード削除ページの作成
    6. Dreamweaver での ASP コマンドによるデータベースの修正
    7. 登録ページの作成
    8. ログインページの作成
    9. 許可されたユーザーのみがアクセスできるページの作成
    10. Dreamweaver を使用した ColdFusion のフォルダーの保護
    11. Dreamweaver での ColdFusion コンポーネントの使用
  18. web サイトのテスト、プレビュー、パブリッシュ
    1. ページのプレビュー
    2. 複数のデバイスでの Dreamweaver web ページのプレビュー
    3. Dreamweaver サイトのテスト

 

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 タグに適用されたときの結果は次のとおりです。

コンテナ Div タグ、780 ピクセル、余白なし

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 タグに適用されたときの結果は次のとおりです。

サイドバー 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 に適用されたときの結果は次のとおりです。

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

メインコンテンツ Div、250 ピクセルの左マージン

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 レイアウトを使用したページの作成

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

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

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

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

    固定

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

    リキッド

    列の幅をサイトのビジターのブラウザー幅に対する割合で指定します。サイトのビジターがブラウザーの幅を拡大縮小すると、デザインが適合されますが、サイトのビジターがテキスト設定を変更しても、デザインは適合されません。

  5. ドキュメントタイプポップアップメニューでドキュメントタイプを選択します。
  6. レイアウト CSS ポップアップメニューで、レイアウトの CSS の場所を選択します。

    ヘッドに追加

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

    新規ファイルを作成

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

    既存ファイルへリンク

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

  7. 次のいずれかの操作を実行します。
    • レイアウト CSS ポップアップメニューで「ヘッドに追加」(初期設定オプション)を選択した場合は、「作成」をクリックします。
    • レイアウト CSS ポップアップメニューで「新規ファイルを作成」を選択した場合は、「作成」をクリックし、スタイルシートファイルの新規保存ダイアログボックスで新しい外部ファイルの名前を指定します。
    • レイアウト CSS ポップアップメニューで「既存ファイルへリンク」を選択した場合は、スタイルシートを添付アイコンをクリックして 「CSS ファイルを添付」テキストボックスに外部ファイルを追加することでスタイルシートファイルの新規保存ダイアログボックスに入力し、「OK」をクリックします。作業が完了したら、新規ドキュメントダイアログボックスで「作成」をクリックします。
    注意:

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

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

    注意:

    Internet Explorer の表示上の問題に対処するための IE 条件分岐コメント(CC)は、レイアウト CSS の場所として新規外部ファイルまたは既存の外部ファイルを選択した場合でも、新しい CSS レイアウトドキュメントのヘッドに埋め込まれたままとなります。

  8. (オプション)CSS レイアウトとは無関係の新しいページを作成する際に、そのページに CSS スタイルシートを添付することもできます。そのためには、CSS ファイルを添付ペインの上にあるスタイルシートを添付アイコンをクリックし、CSS スタイルシートを選択します。

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

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

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

    カスタム CSS レイアウトを Dreamweaver 付属の他のレイアウトと一貫させるには、.htm 拡張子を指定して HTML ファイルを保存する必要があります。

  2. HTML ページを Adobe Dreamweaver CS5¥Configuration¥BuiltIn¥Layouts フォルダーに追加します。
  3. (オプション)レイアウトのプレビューイメージ(例えば .gif ファイルや .png ファイル)を Adobe Dreamweaver CS5¥Configuration¥BuiltIn¥Layouts フォルダーに追加します。Dreamweaver 付属の初期設定イメージは、幅が 227 ピクセル、高さが 193 ピクセルの PNG ファイルです。
    注意:

    プレビューイメージファイルには、容易に追跡できるように、HTML ファイルと同じ名前を付けてください。例えば、HTML ファイルの名前が myCustomLayout.htm である場合は、プレビューイメージファイルの名前を image myCustomLayout.png にします。

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

アカウントにログイン