WEBデザイン 火5-6 金1-2 (4F Macルーム)
WEB 第８回
http://get.adobe.com/jp/
Lesson-2
STEP:01 CSSを記述する場所について理解しておく
１)まずHTML内にCSSを記述する
２)HTML内に記述されたCSSを書き出す
３)HTML内に記述されたCSSを削除する
４)書き出したCSSをリンクする
元データ http://yoko14145.com/cid/style.zip
※CS3のDreamweaverの人は操作が教科書とは異なる部分が有ります。
STEP:02 ページ全体をボックスに入れる
前回からのデータが無い場合はここからDL
１）ページ全体を選択する
２）DIVボックスをつくる
３）DIVボックスに名前をつける
STEP:03 ボックスの余白を設定する
４）DIVボックスのCSSルールを作成する
５）DIVボックスをデザインする
左右に５０ピクセルのマージン(margin=外側の余白)を設定する
左右に２０ピクセルの余白(padding=パディング=内側の余白)を設定する
把握しよう！！paddingとmarginの違い
マージン(margin)をつかったほうが良い場合
borderの外側にスペースが必要な場合。スペースに背景色(画像)を適用したくない場合。
上下に隣接したボックスにスペースを設ける場合、
マージンの相殺を期待して、大きいサイズを有効にしたい場合。
例：15px + 20px の場合、スペースは20px。
※相殺されない場合もあります。
パディング(padding)をつかったほうが良い場合
borderの内側にスペースが必要な場合。スペースに背景色(画像)を適用したい場合。
上下に隣接したボックスにスペースを設ける場合、
上下に指定した合計の値を有効にしたい場合。
例：15px + 20px の場合、スペースは35px。
ブラウザによる問題
IE5.x, 6では、float指定したボックスにマージンを指定すると、左側が指定された値の2倍のマージンになってしまう場合があります。
その場合、「padding」を使用したり、ボックスに
「display:inline;」を指定することにより回避できます。
STEP:04 ブラウザでデザインを確認する
５の操作でCSSファイルの中身がどう編集されたか見る
「すべてを保存」でCSSとHTMLを同時に保存する
STEP:05 ボックスのボーダーを設定する
線の種類／線の太さ／線の色 を設定する
再びすべてを保存してアップロードする。