CSSを使用したWEBレイアウトの基本

CSSを使用したWEBレイアウトの基本




(1)divボックスを作る
　　方法A＝HTMLソースに<div>〜</div>を直打ちする
　　方法B=画面上のバー「挿入>レイアウトオブジェクト>Divタグ」
　　方法C=挿入パネルの「Divタグの挿入」



(2)divボックスに名前を付ける
　　方法Aの場合＝<div id="~">...</div>または<div class="~">...</div>と直打ち
　　方法B・Cの場合
　　＝出てくるウインドウの指示に従って操作するとidやclass名をつける事が出来る
　　

(3)名前を付けたdivボックスの設定を作る
　・dreamweaver上でdivボックスを選択し、
　　選択した状態でCSSスタイルのパネルの右下の
　「新規CSSルールのボタン」をクリック。

(4)ブラウザで表示を確認

(5)気になる所を修正

(1)へ戻る
※Illustratorなどのような「文字や画像を自分が移動したい場所に配置する」
　という感覚ではなく、
　「文字や画像を入れたdivボックスの内と外に余白をどう作るか」
　を使ってレイアウトする感覚で操作していくとわかりやすい。

内(がわの余白)＝マージン margin
外(がわの余白)＝パディング padding