FC2ブログ
CSS Nite LP Part5
次のセッションはこもりまさあきさんの『これならいける? DreamWeaverで始めるCSSレイアウト』です。

id、class、セレクタをしっかり理解する

id…一意(唯一のもの)でなければならない

class…ページ内にいくつあっても良い。共通している箇所に使うといい

セレクタ…HTMLの中の要素にスタイルを割り当てるもの

idの場合…#id名

classの場合….(ドット)class名

HTMLタグの場合…そのまま記述(body、h1など)

セレクタの種類

ユニバーサルセレクタ*(アスタリスク)を使用する
グループセレクタ…h1,h2,h3のように,(カンマ)で区切って使用する
子孫セレクタ…contents pのように半角スペースで区切って使用する

DreamWeaverでのセレクタ自動補完機能
DreamWeaverでは、自動的に子孫セレクタでセレクタを記述してくれる

例)#containerの#globalnaviのulのliにカーソルを立て、新規CSSルールのボタンをクリックすると、セレクタの位置に自動的に#container #globalnavi ul liと記述される

ただしモノによっては記述が長くなり、分かり辛くなってしまうので、そういう場合は省略して記述する。
省略する場合には、どこから記述するのかを、チーム内でルールを決めておく。

例)#globalnavi liなど

同じ名前のセレクタは作らない

同じ名前のセレクタは作らない方がいい。
後に書いたもので上書きされてしまう。
それを逆手にとってしまうという手もある。

ブラウザの初期値のリセット

HTMLでマークアップしたものをブラウザプレビューをすると、ブラウザ毎に違って表示されてしまう。
これは要素ごとに、ブラウザが持つ初期値で表示されてしまうためである。
どのブラウザでも同じに表示させたい場合は、まずブラウザの初期値をリセットする必要がある。

●スタイルの初期化

1.ユニバーサルセレクタ…*(アスタリスク)を使って、全ての値を初期化してしまうやり方

* {
margin : 0;
padding : 0;
}


2.グループセレクタ…使用している要素のみを初期化してしまうやり方

h1,h2,h3,p{
margin : 0;
padding : 0;
}
スポンサーサイト
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック