Expression Web 4 Beginner's Guide

Expression Web初心者向けガイド。ステップバイステップで解説していきます。

それぞれのセクション用のDIVを挿入するには

Section 3 トップページと基本スタイルの作成
最終更新日時: 2019/01/28 17:01:29
  • このエントリーをはてなブックマークに追加

ドキュメントにセクションを定義するには「DIV」を使います。[ツールボックス]パネルを利用するか、[共通]ツールバーの[DIV]を使います。HTML 5の場合はそれぞれ<header><article><aside><footer>等のタグを使います。

はじめに

HTML 4.01 Transitionalのページの構成はおおむね以下の図の通りです。基本は1カラムで、ある程度の横幅になると2カラム表示するようにしています。さらに、<div id="page_content">の中に<div class="article">、<div id="sidebar">の中にさらに<div class="aside">を入れています。ちなみに、#headerや#footerの中に.containerがあるのは、デスクトップ表示の時にボックス単位で中央に配置するためです。横幅指定されているDIVにpaddingを使うとレイアウトが崩れてしまうため、それぞれ.article と .aside のDIVを挿入し、それぞれmarginで余白を取っています。

操作方法

  1. 新しいサイトを作成するには』を参考にして新しいサイトを作成しておきます。
  2. 分割ビューに切り替えます。

ヘッダー、段組みコンテナ、フッターのDIVの挿入

<body>と</body>タグの要素に3つのDIVを下に並べて挿入します。

  1. [ツールボックス]パネルの[<div>]をダブルクリックするか、[挿入]メニューの[HTML]をポイントして[<div>]をクリックします。共通ツールバーの[<div>]ボタンを使う場合はクリックします。
  2. コードビューの挿入されたDIVの終了タグの末尾にカーソルを移動して、[ツールボックス]パネルの[<div>]をダブルクリックします。
  3. コードビューの挿入されたDIVの終了タグの末尾にカーソルを移動して、[ツールボックス]パネルの[<div>]をダブルクリックします。

段組みコンテナ内にページコンテンツ、サイドバーの挿入

  1. コードビューの2つ目のDIV内にカーソルがあることを確認して、[ツールボックス]パネルの[<div>]をダブルクリックします。
  2. 挿入されたDIV内にカーソルがあることを確認して、[ツールボックス]パネルの[<div>]をダブルクリックします。
  3. 手順2で挿入されたDIV終了の末尾にカーソルを移動して、[ツールボックス]パネルの[<div>]をダブルクリックします。

  • このエントリーをはてなブックマークに追加

コメント

▲このページのトップへ