MB-Support

パソコン初心者のサポートページ

スタイルシートでボックスの外側の間隔を指定する方法 margin

 全ての要素にボックスが存在して、このボックスの外側の間隔を margin(マージン)と呼びます。マージンは親要素のボックスの間隔でもあり、最も親要素となる body にも初期状態で存在します。


ボックスの外枠の間隔を margin(マージン)と呼び、top(上)、right(右)、bottom(下)、left(左)と個別に間隔を指定できます。 以下のサンプルでは、ブロックレベルの <div> 〜 </div> でボックスを作り、赤い部分が margin となります。

ボックスは、四角い形をした何かを描画する必要はなく、例えば <p> 〜 </p> で囲まれた文章を設置しても、<img> で画像を設置してもボックスと定義され、全ての要素はボックスとして定義されます。

<img> で画像を設置して、段落<p> 〜 </p> で囲んだ場合は、p で作成されたボックスの中に、img で作成されたボックスが存在する事になります。

margin は、ボックスの外側の間隔と書きましたが、正確には親要素に対しての間隔です。 つまり、img を p で囲めば、img 要素で指定する margin は、親要素の p ボックス内の間隔となります。 この考え方をすると、最上級の親要素は、body になります。

例えば、以下は <body> 〜 <body> に画像を表示した場合です。


HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>題名</title>
</head>
<body>
<img src="画像のアドレス" width="48" height="55" />
</body>
</html>

ブラウザ


img 要素で表示された画像の回りの赤色(実際には背景色を指定していない)は、body 要素に対しての margin となります。 この単純なページを、Internet Explorer と Netscape Navigator で表示すると以下の様になります。

Netscape Navigator は、ベースが Firefox なので、IE と Firefox で比較していると言っても良いでしょう。 単純に img で画像を設置しただけですが、親要素の body との margin に違いがある事が分りますね?

ブラウザの動作は、サーバーにアクセスして HTML などのホームページに必要なファイルをダウンロードして、それらのファイルを組み立てて描写します。 このデータを描写する事をレタリングと呼び、レタリングを実行する機能をレタリングエンジンと呼びます。

ブラウザに搭載されているレタリングエンジンが同じであれば、このような違いは発生しませんが、Internet Explorer は SHTML エンジン、Netscape Navigator や Firefox は Gecko エンジンと、異なるエンジンを搭載しているため 描写に違いが発生します。 (Firefox は MSHTML エンジン に切り替え可能なハイブリット)

ホームページ制作者としては、Internet Explorer でも、Netscape Navigator や Firefoxでも、さらにはマックの Safari ブラウザ(KHTMLエンジン)、Opera ブラウザ(Presto エンジン)でも、同じ様に表示できる事を望む傾向 にあります。そこで、まずは最も親要素となる body で margin を 0px に設定するのが一般的です。

<style type="text/css">
<!--
body  {
         margin:0px;
} 
-->
</style>

親要素の margin がエンジンにより異なっていたのでは、ソースを書いていくうちに微妙な誤差が継続されます。 そこで、親要素の margin を 0 に統一する事で、子要素の画像が左上に同じく表示されます。

margin : 0px ; を指定すると、ボックスの外回りの上、右、下、左の間隔が全て 0px で統一されます。 これを個別に指定する方法は以下です。順番は、上、右、下、左。

<style type="text/css">
<!--
body  {
         margin-top:0px;
         margin-right:0px;
         margin-bottom:0px;
         margin-left:0px;
} 
-->
</style>

このスタイルは margin : 0px ; と同じですが、上下左右の margin を個別に指定したい時に利用します。 また、個別に指定する場合でも、一行にまとめる事もできます。

<style type="text/css">
<!--
body  {
         margin:0px 0px 0px 0px;
} 
-->
</style>

順番は 上、右、下、左の順に数字を指定して、半角スペースを入れます。以下はクラスで指定する場合の例。


HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>題名</title>
<style type="text/css">
<!--
.box  {
         margin:50px 100px 50px 100px;
} 
-->
</style>
</head>
<body>
 <div class="box">
  <p>ボックス</p>
 </div>
</body>
</html>

要素に直接指定する場合の例。


HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>題名</title>
</head>
<body>
 <div style="margin:50px 100px 50px 100px;">
  <p>ボックス</p>
 </div>
</body>
</html>


ブロックレベルに margin : 0px ; を指定する

HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>題名</title>
</head>
<body>
<p>
1行目:ブロックレベルの段落を意味する
 &lt;p&gt; 〜 &lt;/p&gt;
 で文章を構成すると、上下に margin が挿入されます。
</p>
<p>
2行目:↑こんな感じで。
</p>
<p>
3行目:この間隔を無くしたい場合は、
&lt;p&gt;要素に margin : 0px; を指定します。
</p>
</body>
</html>

ブラウザ

この間隔を無くしたい場合は、<p>要素に margin : 0px; を指定します。



ブロックレベルに margin : 0px ; を指定する

HTMLソース(メモ帳)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>題名</title>
<style type="text/css">
<!--
p  {
      margin:0px;
} 
-->
</style>
</head>
<body>
<p>
1行目:ブロックレベルの段落を意味する
 &lt;p&gt; 〜 &lt;/p&gt;
 で文章を構成すると、上下に margin が挿入されます。
</p>
<p>
2行目:↑こんな感じで。
</p>
<p>
3行目:この間隔を無くしたい場合は、
&lt;p&gt;要素に margin : 0px; を指定します。
</p>
</body>
</html>

ブラウザ



戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項