GGG

突然ですが、不定期で僕の持っているCSSの知識を公開したいと思います。


最初に断っておくと、WEBの世界はまだまだ発展途上で、今の常識は1年後は非常識になりことも多々あります。

そんなわけで、ここで公開する技術ももしかすると、すぐに古くなってしまうかもしれません・・・

そこはご容赦願いますです。


また、リクエスト・苦情があれば随時承りますので、なるべくお手柔らかにお願いしますｗ


んでは、やっと第1回目。



CSSはカスケーディング・スタイル・シート（以降「CSS」）といって、簡単に言うとテキストやレイアウトの見栄えを制御するものです。


聞きなれない方もいるかもしれませんが、すでにお使いのブラウザには各々のCSSが適用されています。
残念なことに、その各々のCSSやブラウザのバグにより、同じサイトでも見え方が違うことがおきたりします


今回はまず各々のCSSをリセットし、よりレイアウトをデザインしやすくする方法について書きたいと考えています。


要するにあらかじめ決まっている、marginやリストのインデントを無くしてしまうわけです。
そうすると自分で好きな数値でmarginやインデントをとることができますよね。


下記のは一例ですが、大体こんな感じでしょうか？



---------------------------------------------------------
body {
background-color: #fff;
padding: 0;
margin: 0;
font-size: 0.8em;
color: #000;
}

h1,h2,h3,h4,h5,ul,ol,li,p,dd,dt,dl {
margin: 0;
padding: 0;
}

---------------------------------------------------------



これで背景の色は白(#fff)、テキストの色は黒(#000)、marginやpadding、リストのインデントはゼロになりました。


あとはその後に好きな数値を記述していけばよいのです。


実はCSSは同じセレクタが下に記述してあると上書きすることになっています。
なので、リストのインデントを15pxつけたいとするならば、上記のコードの下に



---------------------------------------------------------

li{
margin-left: 15px;
}

---------------------------------------------------------



と記述してやれば良いのです。


是非、実践してみてください！
これだけでもかなり、レイアウトはしやすくなりますよ！！

でわ。