スタイルシート(CSS)のまとめ方<自分用メモ> :ネット・ライフ(yuuの徒然日記)

HP運営やPC・MT・WPなどのトラブル奮闘・備忘録等・yuuの日常徒然ぼやき日記

ホーム > HP製作・ブログ関連 > スタイルシート(CSS)のまとめ方<自分用メモ>

スタイルシート(CSS)のまとめ方<自分用メモ>

スタイルシートが長くなる時に手書き修正する際の、自分用備忘メモ
 (分かってはいても長すぎて混乱する時があるのでまとめておこう)

●スタイルシート基本形
 セレクタ { プロパティ : 値 }
 例)a { color : blue; }

●id
 名前の前に「 # 」(シャープ)
 例)#main
 ※主にページに一つしかない要素に使う

●class
 名前の前に「 . 」(ピリオド)
 例).main
 ※ページ内に複数回使う要素がある場合に使う

●同じスタイルで異なる複数の適用先指定
 「 , 」(カンマ)区切り
 例)body , h1 , p {?表示指定?}

●子孫セレクタ (要素の中に含まれる要素)
 半角スペース区切り
 例)#main .box ul {?表示指定?}
 (「id=main」の中の「class=box」の中の「ul」要素にだけ適用)

●ひとつのセレクタに対して複数宣言を適用
 「 ; 」(セミコロン)区切り
 例)body{font-size: 100% ; color: #333333;}

●「padding」「margin」など
 ・margin: 0px;
   (上下左右)
 ・margin: 0px 0px;
   (上下/左右)
 ・margin: 0px 0px 0px;
   (上/左右/下)
 ・margin: 0px 0px 0px 0px;
   (上/右/下/左)




HTML・CSS関連の検証リンク
Another HTML-lint gateway …HTML文書の文法をチェックし、採点。
W3C CSS 検証サービス …CSSを検証
W3C MarkUp Validator …HTMLの文法を検証
関連記事
カテゴリー: HP製作・ブログ関連  | キーワードタグ: スタイルシートHP制作
[ 2006/11/22 23:20 ]    コメント(0)TB(0)  | Edit| ▲Top
コメントの投稿




    


管理者にだけ表示を許可する
コメントの表示
スポンサード リンク
人気記事ランキング