Webサイト制作の留意点 - CSSによるマージン相殺 -

【こちらの記事は、約3分程でお読みいただけます。】

皆さん、いつもKENスクールのブログを見ていただき、
ありがとうございます！

Webサイトを制作するときに、
1ページの中に情報を詰め込みすぎてしまうことは、ありませんか？

特にコーポレイトサイト（企業サイト）では、
企業として余裕を感じられる印象を演出したいため、
余白の作り方が非常に大事になります。

その余白を作る際に必要なのが、「マージン」ですね！

CSSでmargin指定を用いて余白を設けていきますが、
その時によく起こる現象...

「マージンの相殺」は、ご存知ですか？

要素（タグ）間のマージンが隣り合っているときは、
お互いのマージンが相殺され、一つになってしまう現象です。

例えば、上記の図のように、
上の<p>の下マージンに20px、
下の<p>の上マージンに40pxが設定されている場合、
合わせて60pxのマージンが入るわけではありません。

値の大きい40pxのマージンが適用されます。

※プラスの値の場合は大きい値が、
マイナスの値の場合は小さい値が適用されます。

※マージンの相殺は上下のマージンのみで、
左右のマージンには適用されません。

しかし、例外があります。

・floatを指定している要素と隣り合う要素間

・position：absolute；　を指定している

・position：fixed；　を指定している

上記の場合、マージンの相殺は発生しません。


このようにマージンをしっかり理解し、余白を生かした
Webサイトを制作しましょう！＾＾

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

各種ブラウザ対策も万全！Web制作スキルは、
KENスクールで実務を通して学習しよう！

⇒【CSS基礎 + 上級レイアウト講座】
IE6の見栄えを整える際に、CSSのhackというテクニックを覚えるのは
必須になります。
CSS基礎講座では、はじめてでも安心のCSSレイアウトを組める学習を、
そして、CSS上級レイアウト講座では、どんなブラウザにも対応できる、
CSSの記述方法を伝授します。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 藤澤