Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>余白(マージン)を指定しましょう!

余白(マージン)を指定しましょう!(margin-top、margin-bottom、margin-left、margin-right プロパティ)

普通コースじっくりコースアイコンの説明普通コースじっくりコースアイコンの説明

個別のマージンの種類と使用例のページ内リンク

margin-top プロパティ / margin-bottom プロパティ / margin-left プロパティ / margin-right プロパティ / 使用例 / 使用例の表示
マージンをまとめて指定する場合は次のページの「margin プロパティ」を参照してください

使用プロパティ セレクタ { margin-top: 長さ; }

CSS一覧プロパティ辞典 … margin-top プロパティ

margin-top プロパティを使うと、要素の上部のマージン(余白)を広げたり狭くしたりできます。値には長さ(「px」など)、パーセンテージ(「%」)、autoを指定できます。auto を値に指定すると、余白は「0」となります。

使用プロパティ セレクタ { margin-bottom: 縦方向の位置; }

CSS一覧プロパティ辞典 … margin-bottom プロパティ

margin-bottom プロパティを使うと、要素の下部のマージン(余白)を広げたり狭くしたりできます。値には長さ(「px」など)、パーセンテージ(「%」)、autoを指定できます。auto を値に指定すると、余白は「0」となります。

使用プロパティ セレクタ { margin-left: 縦方向の位置; }

CSS一覧プロパティ辞典 … margin-left プロパティ

margin-left プロパティを使うと、要素の左側のマージン(余白)を広げたり狭くしたりできます。値には長さ(「px」など)、パーセンテージ(「%」)、autoを指定できます。auto を値に指定すると、余白は右側の余白と要素の幅により自動的に決まります。

使用プロパティ セレクタ { margin-right: 縦方向の位置; }

CSS一覧プロパティ辞典 … margin-right プロパティ

margin-right プロパティを使うと、要素の右側のマージン(余白)を広げたり狭くしたりできます。値には長さ(「px」など)、パーセンテージ(「%」)、autoを指定できます。auto を値に指定すると、余白は左側の余白と要素の幅により自動的に決まります。

マージンのMEMO

ブロック要素(表など)を中央に配置!

margin-left プロパティと margin-right プロパティの値を「auto」にすると、表のような幅の決まっているブロック要素を中央揃えにすることができます。

ブロック要素(表など)を右に配置!

margin-left プロパティの値を「auto」にすると、表のような幅の決まっているブロック要素を右揃えや左揃えにすることができます。例えば margin-left プロパティの値を「auto」、margin-rightプロパティの値を「3em」に指定すると、右の余白は3文字分の余白で、左の余白は自動的に指定されます。

もともと余白が取られている要素の余白をなくすには?

h1 要素p 要素などのようにもともと余白が取られている要素の余白をなくすには、上下の(マージン)余白を指定できるmargin-top プロパティとmargin-bottom プロパティの値を「0」に設定します。

負の値を指定できます

マージンの幅を狭くしたい場合や画像を重ねたい場合はマイナスの値で指定します。

使用例

margin-top プロパティ、margin-left プロパティを使用し、h1 要素の上側と p 要素の左側に余白を入れてみましょう!

記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">

body { background-color: moccasin;}

h1 {
background-color: moccasin;
margin-top: 1em;
}

span{ font-weight: bold; }

p { line-height: 1.7em; margin-left: 1em; }

p.copy { font-family: "M SP明朝",serif; }

</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
ワンポインを紹介します!</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html>

使用例の表示

[margin-topプロパティ、margin-leftプロパティ適応前のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理

料理を少しおいしくするための
ワンポイントを紹介します!

おいしいチャーハンの作り方

Copyright © 2007 TomMY. All Rights Reserved.

↓
[margin-topプロパティ、margin-leftプロパティ適応後のブラウザでの表示例]
一人暮らしの前向きな料理
簡単に作れるワンポイント料理

料理を少しおいしくするための
ワンポイントを紹介します!

おいしいチャーハンの作り方

Copyright © 2007 TomMY. All Rights Reserved.

このように h1 要素の上側に1文字分の余白を取り(h1 { margin-top: 1em})、p 要素の左側に1文字分の余白を取りました(p { margon-left: 1em;})。マージンの指定は慣れればそれほど難しくないので、いろいろ試してみましょう!

関連情報ページ

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system