margin、paddingの初期化:CSS入門

ブログが作りたい!CSS入門 > margin、paddingの初期化:CSS入門

margin、paddingの初期化:CSS入門

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】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

はじめまして。つい最近からブログをつけるようになったのですが、初めに軽い気持ちでこれにしよって感じで決めた(他の人が作成した)テンプレートをそのまま使用してきました。でも、でも・・・・飽きたんですデザインが。今さらど素人の自分が変えれるわけないです。デザイン。でも、一念発起。CSSをいじればデザイン変更できるかもしれないとCSS解読に乗り出しました。でも、わからない。わたし、いわゆる、CSS迷子。誰か・・・助けて・・・な気分でした。初期化のところでつまづいていたんです。よ~く解りました。とりあえず初期化のことは。ありがとうございました。

いじり

Raohさん、こんにちは!( ・∀・)ノHappy GW
コメントありがとうございます。

CSS・・・難しいですよね。

それでも、少しずつでもやっていけば、
きっといじりまくれると思います。

いじり倒せると思います。
いじりー岡田れると思います。(´▽`)♪レロレロ~

それでは、ご武運をお祈りしております。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/270-8fc82883
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて