WEBデザイン授業３日目

今日の授業では、marginとpaddingの違いやfloatを設定する意味、擬似クラス、ロールオーバーと内容が濃かったのでひとつずつ思い出しながら理解していきたいと思います。

DOCTYPE宣言の入力

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<HTML>より上に宣言を置く。
<html lang="ja">・・・日本語で表示

CSSのルールを記述

1.チャーセット @charset "Shift_JIS";
2.セレクタのリセット
3.ページ全体の設定

ユニバーサルセレクタ（数年前までのリセット）

＊｛
margin:0;
padding:0;
}

#wrapperをセンターに設定する

body{
text-align:center; /*IE6以前のブラウザがautoに非対応のため*/

}

#wrapper{
width: 800px; /*幅800px*/
margin:0 auto;
text-align:left;/*右揃えになった内容を左揃えにする*/
}

text-alignプロパティ
  • div要素のようなブロックレベル要素をセンタリングするには「text-align」は使用不可
  • 「text-align」プロパティはインライン要素の位置揃えを指定するためのもの

floatを設定する意味

・最新の情報、優先順位の高い情報を右に配置したい時にflat:rightを使用する
・float:leftは左側からの追い込み

floatの下の回り込み解除

clear:bothを設定する。

擬似クラス（リンク文字の設定）

※この順番で記述する
a:link{
text-dexoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:under-line;
}
a:active{
}

ナビゲーション

ナビボタンはリスト項目にする

リスト項目を横に並べる

リストマーカーを消す

ul{
list-style:none;
}

li要素をインラインボックスにして横に並べる

・インライン要素は幅や高さを指定できない
li{
display: inline;
}

li要素をブロックボックスにして横に並べる

ブロックボックスにはwidthが指定できるので、画像のボタンに利用
li{
display: block;
}