BlueGriffon を使って<div>とCSS(スタイルシート)で レイアウト を構築します。
一般的なホームページのレイアウト
一般的なホームページのレイアウトはヘッダー・コンテンツ・メニュー・フッターの4つで構成されています。

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;
}
レイアウトができました。


コメント