サイト定義
フォルダー作る(public_html,CSS,imagesなど)
index.html作って保存
style.css作って保存
リンクさせる
■ここまでは一度作った雛形をコピペで貼り付けると楽
■注 書き込まなくていい
contents
leftBox
rightBox
footer
header
wrapper
main
leftArea
■①style.cssに書き込む
*{}
#wrapper{}
#main{}
#leftArea{}
#contents{}
#leftBox{}
#rightBox{}
#footer{}
#header{}
■②ソースコードの<body>の下に書き込む
<div id="wrapper">
<div id="main">
<div id="leftArea">
<div id="contents">contents</div>
<div id="leftBox">leftBox</div>
</div>
<div id="rightBox">rightBox</div>
<div id="footer">footer</div>
</div>
<div id="header">header</div>
</div>
■CSSスタイルパネルで
*---------ボックス>margin,padding 0
wrapper---ボックス>margin のすべて同一のチェック外し、右左を auto に
ボックス>width(800とかに)
main------ボックス>margin のすべて同一のチェック外し、 top 指定(150とかに)
ボックス>width
leftArea--ボックス>float left
ボックス>width 600とか
contents--ボックス>float right
ボックス>width 380
背景>好きな色
leftBox---ボックス>float left
ボックス>paddingすべて同一で 10とか(左右で20なので幅は200+20になる)
ボックス>width 200
背景>好きな色
rightBox--ボックス>float right
ボックス>width 200
背景>好きな色
footer----ボックス>clear both
ボックス>height 100
背景>好きな色
header----位置> placement top 0
位置> position absolute
ボックス>width(800とかに)(絶対位置を指定したら幅が0になるので幅の指定が必須)
ボックス>height 150
背景>好きな色
■
①デザインビュー上のleftBoxの文字を消してそこにmenu1と打ち込んでenter
menu2と打ち込んでenter
menu3と打ち込んでenter
menu4と打ち込んでenter
menu5と打ち込んでenter
注意 menu1とかではなく数字だけ打ち込んでも後でうまくいかない
②menu1
menu2
menu3
menu4
menu5
を選択反転させ、画面下部プロパティーインスペクターのリスト化ボタンでリストにする
③menu1
menu2
menu3
menu4
menu5
を選択反転させ、下部プロパティーインスペクターのリンクに#(ハッシュ)入れて、
ダミーアンカーを貼る。(これしないとアンカー<a>がつかない)
④menuのどれかひとつを選んで下部タグセレクターの<ul>を選んで
画面右側プロパティーパネルの下の新規CSSルールをクリックし
リストのposition をinsideに, typeを noneにする。
⑤menuのどれかひとつを選んでタグセレクターの<li>を選んで
右側プロパティーパネルの下の新規CSSルールをクリックし
幅、高さ、背景色を指定する。
(ボタンを横並びにするときはfloatを leftにする)
(必要ならmarginを指定する)
⑥menuのどれかひとつを選んでタグセレクターの<a>を選んで
右側プロパティーパネルの下の新規CSSルールをクリックし
displayを blockにして、その幅、高さを指定
⑦デザインビューのmenu1にカーソルを置き
タグセレクターの<li>を選んで
下部プロパティーインスペクターのIDにmenu1と入れる。
menu2
menu3
menu4
menu5にも各々同じことをする。
注意 ここも数字だけではだめ
⑧デザインビューのmenu1にカーソルを置き
タグセレクターの<li#menu1>を選んで
右側プロパティーパネルの下の新規CSSルールをクリックし
省略化で最短の文字列にし
背景で参照から画像指定 OK
menu2
menu3
menu4
menu5にも各々同じことをする。
⑨デザインビューのmenu1にカーソルを置き
タグセレクターの<a>を選んで
右側プロパティーパネルの下の新規CSSルールをクリックし
省略化で最短の文字列にし
#menu1 aに書き足して
#menu1 a:hover とする。
背景で参照から画像指定 OK
menu2
menu3
menu4
menu5にも各々同じことをする。
⑩右側プロパティーパネルの<li>をダブルクリック
ブロック text-align を -9999pixelにする。
or
<a>選んで
ブロック text-align をcenter
text-decoration none にして下線を消す
or
<a>選んで
padding top 8,height 32 とかにする
⑪保存し、IE更新