BlueGriffon を使って<div>とCSS（スタイルシート）で レイアウト を構築します。
一般的なホームページのレイアウト
一般的なホームページのレイアウトはヘッダー・コンテンツ・メニュー・フッターの４つで構成されています。
BlueGriffonを起動
「新規作成」をクリック
「Dual View」をクリック
デザイン画面とソースコード画面を同時に表示する機能
「index.html」で保存
CSSの作成
「パネル」「スタイルシート」をクリック
スタイルシートを追加（＋）をクリック
「文書からリンクする」「新しいファイル」をクリック
index.htmlと同じフォルダにstyle.cssで保存
縦に<div>を積み重ねる
汎用コンテナー(div)をクリック
「Enter」を5回押して<div>を6つ縦に並べます。
9行目と18行目の</div><div>を削除します。
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html><div>へCSS（スタイルシート）を指定するには、id属性を使う。
<div>へ名前を付け、スタイルシートを指定します。
<div>をクリック
12行目の<div>を選択し「スタイル プロパティ」「この要素のみ（ID 指定）」をクリック
「大きさ」「幅：1002px」と入力し「Please enter an ID」に「wrapper」と入力してokを押す。
同様にid属性を指定します。
<div id="wrapper">
<div id="header"></div>
<div id="contents"></div>
<div id="menu"></div>
<div id="footer"></div>id別にスタイルを指定できるようになります。
#wrapper { }
#header { }
#contents { }
#menu { }
#footer { }同様に枠線の色と太さを設定します。
同様に10行目の<div id=”header”>に枠線の色と太さを設定します。
「float」を使い要素を横並びにする。
「float」は左右への回り込みを指定するスタイルシートです。
#id名 { float : left } 左へ回り込む
#id名 { float : right } 右へ回り込む
BlueGriffonで「float」を使う
12行目の<div>を選択し「スタイル プロパティ」「この要素のみ（ID 指定）」をクリック
「位置とレイアウト」「左にフローする」をクリック
「Please enter an ID」に「contents」と入力してokを押す。
同様に10行目の<div id=”menu”>に「右にフロー」し枠線の色と太さを設定します。
#contents {
float : left;
}
#menu {
width: 300;
float: right;
border: 1px solid #000099;
}フッターの回り込みを無くす。
20行目の<div>を選択し「スタイル プロパティ」「この要素のみ（ID 指定）」をクリック
「位置とレイアウト」「フロート解除」「両側」をクリック
both: 左寄せ、または右寄せされた全ての要素に対する回り込みを解除します。
同様に幅・枠線の色と太さを設定します。
#footer {
clear: both;
width: 1000px;
border: 2px solid #999999;
}レイアウトができました。
コメント