間隔をあける【margin、padding】:CSS入門

ブログが作りたい!CSS入門 > 間隔をあける【margin、padding】:CSS入門

間隔をあける【margin、padding】:CSS入門

間隔をあける【margin、padding】:CSS入門

CSS入門(9)

さて、「margin、padding」の初期化も済んだし・・・もう、お風呂にでも入って、寝ましょうか?疲れたし。

そのようなわけにもいかないので、お話は、次の順番で進みます。

margin、paddingが何のことやら分からない人は、記事「margin、paddingとは?:CSS入門」からご覧ください。

▲ページの先頭に戻る

margin、paddingで間隔をあける

margin、paddingを使って、間隔(余白)を指定しましょう。

1:margin、paddingの事前計画

(01)

まず、どういう状況かと言えば、ブラウザで表示すると、次のようになっているはずです。<h1>タグ、<h2>タグが初期化された状態です。

ブラウザで表示

CSSコードは、次のような状況です。borderは、CSS入門ですので、分かりやすい形にしてあります。

(02)

えー、次のように変更してみようと思います。

h1

paddingで、全方向に「5px」指定する。

h2

marginで、上に「10px」指定する。

paddingで、上下に「2px」、左右に「5px」指定する。

img

marginで、上に「4px」、下に「6px」、左右に「15px」指定する。

ちょっと分かり難いかもしれませんが、ブラウザで表示したときは、次のように間隔(余白)が入ります。

ブラウザで表示

▲ページの先頭に戻る

2:margin、paddingを指定する

(03)

それでは、ひとつずつ設定していくことにしましょう。まずは、<h1>タグにpaddingで、全方向に「5px」ずつ指定します。

CSSコードは、次のように書くことができます。

値は、左から「上」、「右」、「下」、「左」を意味します。つまり、時計回りで値を指定していくわけです。

paddingの上右下左の指定方法

(04)

どんどん設定していきましょう。<h2>タグにmarginで、上に「10px」指定します。

CSSコードは、次のように書くことができます。

それから、<h2>タグにpaddingで、上下に「2px」、左右に「5px」指定します。

CSSコードは、次のように書くことができます。

(05)

最後に、<img>タグにmarginで、上に「4px」、下に「6px」、左右に「15px」指定します。

CSSコードは、次のように書くことができます。

いかがでしょう?marginにしろ、paddingにしろ、「上」、「右」、「下」、「左」の順番で値を指定すれば良いだけです。

▲ページの先頭に戻る

3:省略書きできます。

(06)

<h1>タグには、CSSコードを次のように書きました。

しかし、これはすべて「5px」ですから、次のように省略して書くことができます。1つだけ値を書く場合は、全方向に同じ値を指定する意味になります。

値がひとつ

(07)

<h2>タグには、CSSコードを次のように書きました。

しかし、わざわざ「0」を指定するのは、どうにも無駄です。marginは、borderと同様に「top」、「right」、「bottom」、「left」が指定できるので、次のように書くことができます。

整理すると、次のような感じです。

margin-top

padding-top

margin-right

padding-right

margin-bottom

padding-bottom

margin-left

padding-left

それから、<h2>タグは、もうひとつありましたね。

これは、次のように書くことができます。2つ値を書く場合は、1つ目の値が「上下」、2つ目の値が「左右」の意味になります。

値がふたつ

(08)

<img>タグには、CSSコードを次のように書きました。

これは、次のように書くことができます。3つ値を書く場合は、1つ目の値が「上」、2つ目の値が「左右」、3つ目の値が「下」の意味になります。

値がみっつ

▲ページの先頭に戻る

4:統合します。

(09)

これらを、CSSファイルに追加書きしておきましょう。

ちょっと、省略書きするのは、覚えるのがしんどいかもしれませんが、省略書きするのが一般的なので、時間をかけて覚えていってください。

もちろん、慣れるまで、値を4つ(上右下左)書く方法でも構いません。見かけたときに、驚かないようにはしておきましょう。

▲ページの先頭に戻る

5:tableにも

(10)

<table>タグにも、marginを入れておいてください。上下左右 5pxくらいかしら。よろしくお願いします。

▲ページの先頭に戻る

次回予告

次回は、子孫セレクタについて書く予定です。

▲ページの先頭に戻る

関連記事

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/18

« 「margin、paddingの初期化」|「継承と子孫セレクタとは?」 »

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

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

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

びっくりした!!

こんばんは!
marginとpaddingは、IE6が最も世話を焼かせる部分だと思っているので
本当に興味深く読ませて頂きました。

で、それを吹っ飛ばしてしまうくらい、すっごいびっくりしたんですけど、
marginとpadding、これ、ぶ、ブラウザが勝手に開けててくれたんですね!
いやーびっくりした、全然、そんな事思っても見ませんでした。
あー、ほんとびっくりした・・・
全く空間があいている事に疑問も持たずにこれまで来てましたorz
なるほど、こういう事だったんですね。

実は、ボーダーも自分はソフトに頼ったりしてるから、4つの値を全部書く、
なんて事はたまにやってます。
でも、やっぱりなー。自分でまとめて指定をして行くようにしなくちゃ!と、
思いました。頑張ろう!

なんとなく、読む前と違って頭が良くなった気がする・・・!
もしかして、利口になったかも・・・!
見落としていた部分が多いmarginとpaddingなので、これから何回も
この記事見直したいと思います!

というわけではてぶに登録してみる・・・!



ブラウザの初期化

ひろこさん、こんにちは。

marginとpaddingは、IE6が最も世話を焼かせるのか!知らなかった。
CSSハックが必要ってことですね。調べておかないといけないな。

教えてくれてありがとうございます。(・∀・)/39

初期化は、余白(marginとpadding)以外にも行います。
ここなんか参考になるのではないかしら。↓

 http://developer.yahoo.com/yui/reset/

たとえ英語が苦手だったとしても、下にずずっとスクロールして、
コードを見れば、大丈夫です。(コードは世界共通言語)

borderは、上下左右すべて一緒でないなら、
別々でいいんじゃないですかね。たぶん。

うへっ、はてぶッスか。恐れ多いなぁ。(´Д`;)

オソルオソル ここまで来てしました。

marginとかpadding、読むだけでもスゴイ。
もちろんkumaCrowさんが凄いのですが。

tableのmarginは60pxにしました。
ちゃんと間隔が空いてびっくりです。

すんごいなぁ

sachiさん、こんばんは。

すーごい!
CSSもやってまうのですね。

どんだけ、吸収力高いんですか!
びっくり。

きっと、もともと頭がよろしいのね。

でも、少しずつ話はややこしくなってくるので、
うまく書けていないところも出てきます。

不明瞭な箇所があれば、ご指摘ください。
宜しくお願いします。

質問

h2にpaddingで、上下に「2px」、左右に「5px」指定しているのに、なんで表示画面が、「ブログの情報」というテキストの右が大きくあいているのですか?どうみても5px以上あいてると思うのですが・・・。初心者の素朴な疑問です。
よろしくおねがいします。

お試しあれー

Coccoさん、こんばんは!( ・∀・)ノ
コメントありがとうございます。

h1と比較して考えてみてください。
何か気づきはえられないでしょうか。

あるいは、「ブログの情報」というテキストをもっともっと
長い文章にしてみてください。

もし分かりにくいようであれば、
paddingの数値を大きくしてみると分かりよいかもしれません。

実際に試してみて、
肌で感じてみたほうがきっと理解しやすいものと思います。


以上のことを試してみても、
「分からないじゃないの、このうすらハゲ!」と思ったら、

お手間さまですが改めてコメントしてくださいませ。
よろしくお願いします。

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/271-117c5221
 | トップページ | 

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
ありのごとくあつまりて