ハンデプログラマー

障害者の方のためのプログラミング教室です。目指せ自立!!

トップ > HTML/CSS入門 > スタイルシートの基本(マージン)

スタイルシートの基本(マージン)

1、テラパッドを開きファイルを新規作成します。

2、下記のようにプログラムを打ち込みます。

@charset "UTF-8";

body{
background:#ffffff;
}

div{
background:#e6e6fa;
}

.margin1{
background-color:#b0c4de;
margin:10px;
}
 
.margin2{
background-color:#b0c4de;
margin:20px;
}

.margin3{
background-color:#b0c4de;
margin:10px 20px;
}

.margin4{
background-color:#b0c4de;
margin:10px 20px 30px;
}

.margin5{
background-color:#b0c4de;
margin:10px 20px 30px 40px;
}

3、HTMLと同じフォルダに「style6.css」というファイル名で保存します。

4、テラパッドを開きファイルを新規作成します。

2、下記のようにプログラムを記述します。

<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style6.css">
</head>
<body>

<div>
<p class="margin1">
マージン上下左右10px
</p>

<p class="margin2">
マージン上下左右20px
</p>

<p class="margin3">
マージン上下10px、左右20px
</p>

<p class="margin4">
マージン上10px、左右20px、下30px
</p>

<p class="margin5">
マージン上10px、右20px、下30px、左40px
</p>
</div>

</body>
</html>

3、このファイルをHTML形式で保存します。

4、HTMLファイルをダブルクリックして開きます。
テスト6表示

CSSで設定した領域にテキストが表示されます。

margin1クラスでは上下左右の長さ10pxの範囲に隙間を設定します。背景にはわかりやすいよう色を付けます。

.margin1{
background-color:#b0c4de;
margin:10px;
}

margin2クラスでは上下左右の長さ20pxの範囲に隙間を設定します。

.margin2{
background-color:#b0c4de;
margin:20px;
}

margin3クラスでは上下に10px、左右に20pxの範囲に隙間を設定します。

.margin3{
background-color:#b0c4de;
margin:10px 20px;
}

margin4クラスでは上に10px、左右に20px、下に30pxの範囲に隙間を設定します。

.margin4{
background-color:#b0c4de;
margin:10px 20px 30px;
}

margin5クラスでは上に10px、右に20px、下に30px、左に40pxの範囲に隙間を設定します。

.margin5{
background-color:#b0c4de;
margin:10px 20px 30px 40px;
}

また、わかりやすく個別に隙間を設定できるものもあります。
margin-top:上側
margin-bottom:下側
margin-left:左側
margin-right:右側

個別に設定すると間違いが少ないかもしれません。併用して使うと便利です。

プログラミング言語

こちらのサイトで扱うプログラミング言語一覧です。

ページのトップへ戻る