★今すぐ仕事に結びつく資格&技能完全ガイド【情報満載のガイド無料進呈】

ホームページは難しくない  ちょこっとHTML  Lesson3

<body leftmargin="ピクセル"
topmargin="ピクセル"
rightmargin="ピクセル"
bottommargin="ピクセル" > 〜 </body>

ページの上下左右に、余白(マージン)値をピクセルで設定します。
インターネットエクスプローラ6でのデフォルトのマージン値は 
左右10ピクセル、上下15ピクセルになっています。

このタグは leftmarginの属性を設定すると 左右のマージンが設定され、
topmarginの属性を設定すると 上下のマージンが設定されますので
rightmargin と bottommargin を設定するときは 主に 上下左右
違った値を設定するときだけに利用します。
これは インターネットエクスプローラ用のタグですが
ネットスケープ7では ちゃんと反映されるようです 。

では さっそくやってみましょう!

まず 何も設定していない デフォルトのページです。
左右のマージンは 10ピクセル 上下のマージンは 15ピクセルでしたね。
左側のページ端から文字までの余白 及び 上端から文字までの余白を確認
してみてください。

→ デフォルトのページ

今度は 左右のマージンを80ピクセル 上下のマージンを30ピクセルで設定
してみましょう! HTMLタグはこんな感じです。

<html>
<head>
<title>マージンサンプル1</title>
</head>
<body leftmargin="80" topmargin="30">
     :
     :
     :
</body>
</html>

すると こんな感じになります。上下左右の余白を確認してみましょう

→ マージンサンプル 1

 

応用で 上下左右のマージンを "0" で設定すると、余白はなくなって
文字や画像も ページの端に揃います。 こんな感じです

→ マージンサンプル 2


● スタイルシートで設定する

このマージンをスタイルシートで設定してみましょう。
HTMLファイルの <head> 〜 </head>部分に このように設定します。
もちろん 外部スタイルシートでも設定可能です。

<style type="text/css">
body {margin-left: 80px;
   margin-top: 30px;}
< /style>

ちなみに 上下左右のマージンを"0"に設定したい場合は

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

これでOKです。

 


 

ホームページは難しくない  ちょこっとHTML  Lesson3

当ホームページは リンクフリーです! 
Copyright (C) 2004. mamoho. All Rights Reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます。