ウェブデザイナー募集 ホームページ作成HOME

ホームページ作成講座HAC Design

CSS margin

CSS margin

margin(マージン)とは、レイアウト文字や文章を表示したりする場合の内容の領域の設定をするものです。余白などをとり見栄えをよくする為に表示する領域の指定ができるのが、margin(マージン)とpadding(パディング)です。

このmargin(マージン)とpadding(パディング)はともに余白などの領域を指定できるものですが、このふたつには微妙な違いがあります。margin(マージン)とpadding(パディング)の違いが理解できるようになると、ブログのカスタマイズもさくさく進むはずです。

また微妙なレイアウトの調整もできるようになります。

しかしmargin(マージン)とpadding(パディング)は似ているので違いがわかりにくいのです。
わかりやすいようにイラストとともに説明しますね。

CSS margin(マージン)とpadding(パディング)の違い

margin(マージン)とpadding(パディング)の違いは簡単に言ってしまえば、背景ごと移動するのがmargin(マージン)、中の文字だけ移動するのがpadding(パディング)です。
下記のように背景の設定がしてあるタグにそれぞれ30pxの余白を設定します。

margin-left:30px を設定した場合、タグそのものがまるまる30px移動します。

padding-left:30px を設定した場合中身の文字だけが30px移動します。

この違いはよく覚えておきましょう。ブログなどではこのmargin(マージン)とpadding(パディング)が数箇所で設定されています。サイドバーが落ちてしまったときはこのmargin(マージン)とpadding(パディング)の数値の設定がおかしくないか?チェックしてみるといいでしょう。

また、背景を設定していないタグでは、どちらをつかっても見た目が変わらないので、わかりにくいかと思います。自分でこの違いを理解するには、背景の設定してあるタグで試してみましょう。

padding(パディング)は設定する際に、横の幅の設定を確かめて、レイアウトからはみ出ないような設定をすることを頭に入れて置いてください。padding(パディング)をあちらこちらで設定するとレイアウトが崩れたとき混乱するので、どちらをつかっても見た目が変わらない場合はmargin(マージン)で余白の設定をすることをお勧めします。

CSS margin(マージン)とpadding(パディング)の設定

下記はmargin(マージン)とpadding(パディング)の書き方の例です。

margin まとめて設定した場合
margin-top margin-top:30px margin:30px 0px 0px 0px
margin-bottom margin-bottom:30px margin:0px 0px 30px 0px
margin-right margin-right:30px margin:0px 30px 0px 0px
margin-left margin-left:30px margin:0px 0px 0px 30px
padding まとめて設定した場合
padding-top padding-top:30px padding:30px 0px 0px 0px
padding-bottom padding-bottom:30px padding:0px 0px 30px 0px
padding-right padding-right:30px padding:0px 30px 0px 0px
padding-left padding-left:30px padding:0px 0px 0px 30px

ここで覚えておきたいのがまとめて設定した場合の書き方です。
たとえば、【margin-top】【margin-bottom】【margin-right】【margin-left】にそれぞれ違う数値を設定したい場合などに便利です。CSSがスッキリまとまるというメリットがありますが、検索エンジン対策になるわけでもないので、書き方は好きな方でOKです。

それでは数値は同じ設定で書き比べてみましょう。

#bannar{
margin-top:30px;
margin-bottom:10px;
margin-right:20px;
margin-left:40px;
}

上記のような設定をまとめると下記のようになります。

#bannar{
margin:30px 20px 10px 40px;
}

このように値を4つ指定した場合は記述した順に[上][右][下][左]のマージンとなります。
その他に まとめて設定する場合は下記のようになります。

値を1つ指定した場合は指定した値が[上下左右]のmargin

#bannar{
margin:30px;
}

上下左右に30pxの余白ができる。

値を2つ指定した場合は記述した順に[上下][左右]のmargin

#bannar{
margin:30px 20px;
}

上下に30px 左右に20pxの余白ができる。

値を3つ指定した場合は記述した順に[上][左右][下]のmargin

#bannar{
margin:30px 20px 40px;
}

上に30px 左右に20px 下に40pxの余白ができる。

設定はまとめても、一つ一つ書いても自分がわかりやすければどちらでも構わないと思います。

最初のうちは、あまり細かい余白の設定をすると混乱しますので、少しずつ使っていくのがいいと思います。なれてきたら横幅の計算なども頭にはいるのであせらず少しずつ設定を複雑にしていってください。それまでは極力シンプルで、たくさんの設定をしないことです。


CSSの基礎知識
CSS・スタイルシートとは
ブログのCSS
CSSでレイアウト 書き方編
CSSでレイアウト 実践編
CSSポイントレイアウト
CSS フォント
CSS テーブル
CSS ロールオーバー
CSS 背景
CSS margin
CSS float
あると便利!
CSS エディター
FireFoxとCSS
CSSのお勧め書籍
リファレンスHOME
ウェブサイトHOME