margin、paddingの初期化：CSS入門
CSS入門（8）
前回の記事「margin、paddingとは？：CSS入門」で、おおよそ marginと、paddingが、どういったものなのか分かったと思います。
今回は、marginと、paddingの初期化についてお話いたします。
margin、paddingの初期化
1：ブラウザの気配り
（01）
これまでに作成したページを、ちょっと眺めてみてください。何か、おかしいと思いませんか？
（02）
えぇ、そうなんです。既に、それぞれのタグが、バランス良く間隔をあけて、うまいことレイアウトされています。
不思議に思いませんか？私はまだ、marginも、paddingも指定していないのに、間隔があいています。
実はこれ、ブラウザが気を利かせて、margin、paddingに初期値を入れた上で、表示してくれているのです。
ブラウザによって、margin、paddingの初期値は違うことがあります。
2：初期化のコード
（03）
「なんだ〜、じゃあ margin、paddingなんて、わざわざ指定しなくてもいいんじゃ〜ん、インジャン・ジョー」と思った人もいらっしゃるかもしれませんが、これがそうでもないのです。
たいていの場合、無駄に間隔（余白）があいてしまうので、「ん〜もう、余計なことを！」と感じずにはいられません。えぇ、そうですとも。
（04）
さて、「余計なことを！」と感じた人は、margin、paddingの初期化を行うことになります。一般的に、次のように書きます。
* { margin: 0; padding: 0; }
ん？適用先に、おかしなことを書いていますね。これは、いわゆるひとつの「*（アスタリスク）」ではありませんか！なぜ？？？
3：「*（アスタリスク）」の意味
（05）
これは書き間違えているわけではありません。本当に「*（アスタリスク）」です。「*（アスタリスク）」は、CSSに限らず特別な意味をもつ記号です。
意味は、「すべて」です。
つまり、「すべての適用先に対して、margin、paddingを指定します！」という意味になります。
4：margin、paddingを初期化する
（06）
それでは、CSSコードに追加してみましょう。記述する場所は、より上の方に記述します。
なぜ、上の方に記述するか分かるかしら？なぜなら、CSSは、上から順番に実行するからです。初期化ですから、下の方に書いても意味がありません。
（07）
それでは、ブラウザで表示してみましょう。どうでしょう？すべて、くっついてしまったはずです。
5：すべて初期化して良いものかどうか？
（08）
さて、えーと、2006年くらいまででしょうか。このように、「初期化は、すべてにかけてしまえ」という人が多かったのですけれども、2007年くらいから、ちょっと風潮が変わってきたようです。
「それって、効率が悪くない？」と言う人が出てきたのです。
（09）
例えば、たーとーえーば！ですけれども、<h1>タグに、ブラウザの初期値としてmarginに「10px」が設定されているとします。
それを、初期化（ゼロ）して、さて、実際に指定しようとしたときにmarginに「10px」を入れているとしたら？どうでしょう？
そうです、無駄です。（「10 → 0 → 10」ということ）
あるいは、使うわないタグも初期化しているとしたら、それもやはり無駄と言えます。
（10）
そこで、「明らかに納得がいかないタグのみ、初期化した方が良いのではないか？」ということで、例えば、あなたが、<h1>タグと<h2>タグの間隔だけ納得がいかなければ、2つのみ初期化するわけです。
（11）
そのようなわけで、今回は、とりあえず、<h1>タグと<h2>タグだけを初期化することにします。
（12）
ブラウザで表示してみましょう。<h1>タグと<h2>タグだけが、初期化されたはずです。
どちらの方法が良いとも言い難いところですが、どちらかと言うと、必要な分だけ初期化する方が良いかもしれません。
「おいおい、このままくっついたままなのかよ〜う」と思うでしょうけれど、ご心配なく。次回、ちゃんとmarginと、paddingの指定を行います。
適用先の複数指定
1：無駄無駄無駄無駄無駄！！
（01）
上述にて作成したCSSコードを、もう一度ちょっと眺めてみてください。何かこう・・・柴咲コウ・・・無駄なところがあるような感じがしませんか？
2箇所ほど、探してみてください。
2：「1つめの無駄」
（02）
1つめの無駄が、実は、今回作成したmarginとpaddingの初期化のところです。
どうして無駄なのか、分かるでしょうか？
そうです。「margin: 0; padding: 0;」は、まったく一緒です。
ちょっと考えてみてください。例えば、h1〜h6までmarginとpaddingを初期化するとしたら、どのように書くでしょうか？
こんな風に、書いちゃいます？
3：適用先を複数指定する
（03）
このように、まったく同じことをさせたいものが複数ある場合は、適用先を複数指定することができます。
書き方は、次のように「,（カンマ）」で区切れば、OK牧場です。（ガッツさん）
（04）
今回の場合は、<h1>タグと<h2>タグだけなので、次のようになります。
「,（カンマ）」を省略したり、「.（ピリオド）」と間違ってしまうと違う意味になるので、気を付けてください。
4：2つめの無駄
（05）
2つめの無駄は、ちょっと分かり難いかもしれませんが、基本的な考え方は一緒です。
先日作成した、borderの箇所を見てください。「top」、「right」、「bottom」が、同じく「2px solid #191970;」になっています。
（06）
これは、次のように書くことが出来ます。
分かるでしょうか。一度、「上」、「右」、「下」、「左」すべてに、「2px solid #191970;」を指定して、「左」だけ「8px」で上書きしているわけです。
5：無駄は、本当の無駄か？
（07）
ただ、前述（06）の書き方が良いか？というと、必ずしもそうとは言えないかもしれません。
だって・・・・・・分かり難いじゃん。
メンテナンスする時のことも考えて、「どのように書くか？」を、決める必要があります。
できるだけシンプルに書くこと、修正・更新を行う人のスキルなども考慮しつつ、考えてみてください。
次回予告
次回は、margin、paddingを実際に使ってみますよ。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/17 更新日：2008/04/17
« 「margin、paddingとは？」｜「間隔をあける【margin、padding】」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/270-8fc82883
