東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

6.4 marginプロパティ

marginプロパティ

6.4 marginプロパティ

margin(マージン)プロパティは、ボーダーの外側部分の余白を定義するプロパティです。ボーダーの周囲すべてに同じ余白を設定するには、プロパティをmarginとし、値を1つ定義します。周囲に個別の余白を設定するには、場所に応じて、margin-top、margin-right、margin-bottom、nargin-leftと記述します。値には長さや%などがあります。

marginもpaddingと同様にショートハンド・プロパティのため、周囲の余白をまとめて指定できます。その場合には、1つ以上4つまでの値を空白区切りで指定します。値の数により、定義する余白の対象が異なります。

値の数

適用場所の順序

記述例

余白の内容

値が1つ

上下左右すべて

margin: 10px

上下左右それぞれに10px

値が2つ

上下と左右

margin: 5px 10px

上下に5px、左右に10px

値が3つ

上、左右、下

margin: 3px 10px 5px

上は3px、左右は10px、下は5px

値が4つ

上、右、下、左

margin: 3px 5px 8px 10px

上は3px、右は5px、下は8px、左は10px

表 6.4.1 : 値の指定方法

➢ marginの記述例

セレクタ {
margin: 値 ;
}
        

スタイルを記述して実際の表示を確認しましょう。

①ソースフォルダ    :webpage/ch06
②ファイル名      :margin.html

➢ margin.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>margin プロパティ</title>
<style>
	p {
		background-color: #85b9e9;
	}
	.example1 {
		margin: 50px;
	}
	.example2 {
		margin: 50px 100px;
	}
	.example3 {
		margin: 50px 10px 50px 200px;
	}
</style>
</head>
<body>
<p class="example1">上下左右に50pxのマージン</p>
<p class="example2">上下に50px、左右に100pxのマージン</p>
<p class="example3">上下に50px、左に200px、右に10pxのマージン</p>
</body>
</html>
        

ショートハンドプロパティの記述方法は、慣れるまで少し時間が掛かるかもしれません。しかし、これを使いこなせるようになると、CSSの記述が楽になり、また記述量もシンプルになります。色々なパターンの記述を試しながら、思い通りの表示ができるようになるまで少しずつ慣れていきましょう。

NEXT>> 6.5 文字に関するプロパティ

HTMLとCSSの入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.