BlueGriffonを使って<div>とCSS(スタイルシート)でレイアウトを作る方法

BlueGriffonを使って<div>とCSS(スタイルシート)でレイアウトを構築します。

一般的なホームページのレイアウト

一般的なホームページのレイアウトはヘッダー・コンテンツ・メニュー・フッターの4つで構成されています。

一般的なブログのレイアウトはヘッダー・コンテンツ・メニュー・フッターの4つで構成されています。

BlueGriffonを起動

「新規作成」をクリック

BlueGriffonを起動し「新規作成」をクリック

「Dual View」をクリック

「Dual View」をクリック
Dual View

デザイン画面とソースコード画面を同時に表示する機能

「index.html」で保存

CSSの作成

「パネル」「スタイルシート」をクリック

「パネル」「スタイルシート」をクリック

スタイルシートを追加(+)をクリック

スタイルシートを追加(+)をクリック

「文書からリンクする」「新しいファイル」をクリック

「文書からリンクする」「新しいファイル」をクリック

index.htmlと同じフォルダにstyle.cssで保存

縦に<div>を積み重ねる

汎用コンテナー(div)をクリック

汎用コンテナー(div)をクリック

「Enter」を5回押して<div>を6つ縦に並べます。

9行目と18行目の</div><div>を削除します。

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>をクリック

<div>をクリック

12行目の<div>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック

12行目の<div>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック

「大きさ」「幅:1002px」と入力し「Please enter an ID」に「wrapper」と入力してokを押す。

「大きさ」「幅:1000px」と入力し「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名{}

id別にスタイルを指定できるようになります。

#wrapper {    }
#header {    }
#contents {    }
#menu {    }
#footer {    }

同様に枠線の色と太さを設定します。

同様に枠線の色と太さを設定する。

同様に10行目の<div id=”header”>に枠線の色と太さを設定します。

同様に10行目の<div id="header">に枠線の色と太さを設定します。

「float​」を使い要素を横並びにする。

「float」は左右への回り込みを指定するスタイルシートです。

#id名{}

#id名 { float : left }   左へ回り込む
#id名 { float : right }   右へ回り込む

BlueGriffonで「float」を使う

12行目の<div>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック

「位置とレイアウト」「左にフローする」をクリック

「位置とレイアウト」「左にフローとする」をクリック

「Please enter an ID」に「contents」と入力してokを押す。

「Please enter an ID」に「contents」と入力してokを押す。

同様に10行目の<div id=”menu”>に「右にフロー」し枠線の色と太さを設定します。

同様に10行目の<div id="menu">に「右にフロー」し枠線の色と太さを設定します。
#contents {
 float : left;
}
#menu {
 width: 300;
 float: right;
 border: 1px solid #000099; 
}

フッターの回り込みを無くす。

20行目の<div>を選択し「スタイル プロパティ」「この要素のみ(ID 指定)」をクリック

「位置とレイアウト」「フロート解除」「両側」をクリック

「位置とレイアウト」「フロート解除」「両側」をクリック
clear: both;

both: 左寄せ、または右寄せされた全ての要素に対する回り込みを解除します。

同様に幅・枠線の色と太さを設定します。

#footer {
 clear: both;
 width: 1000px;
 border: 2px solid #999999;
}

レイアウトができました。

レイアウトができました。

PHPで外部ファイルを読み込んでレイアウトを作る方法

無料のホームページ作成ソフトBlueGriffonでホームページを作る方法

コメント

タイトルとURLをコピーしました