ハンデプログラマー

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

トップ > HTML/CSS入門 > スタイルシートの基本(パディング)

スタイルシートの基本(パディング)

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

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

@charset "UTF-8";

body{
background:#ffffff;
}

div{
background:#e6e6fa;
}

.padding1{
background-color:#b0c4de;
padding:10px;
}
 
.padding2{
background-color:#b0c4de;
padding:20px;
}

.padding3{
background-color:#b0c4de;
padding:10px 20px;
}

.padding4{
background-color:#b0c4de;
padding:10px 20px 30px;
}

.padding5{
background-color:#b0c4de;
padding:10px 20px 30px 40px;
}

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

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

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

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

<div>
<p class="padding1">
パディング上下左右10px
</p>

<p class="padding2">
パディング上下左右20px
</p>

<p class="padding3">
パディング上下10px、左右20px
</p>

<p class="padding4">
パディング上10px、左右20px、下30px
</p>

<p class="padding5">
パディング上10px、右20px、下30px、左40px
</p>
</div>

</body>
</html>

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

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

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

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

.padding1{
background-color:#b0c4de;
padding:10px;
}

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

.padding2{
background-color:#b0c4de;
padding:20px;
}

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

.padding3{
background-color:#b0c4de;
padding:10px 20px;
}

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

.padding4{
background-color:#b0c4de;
padding:10px 20px 30px;
}

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

.padding5{
background-color:#b0c4de;
padding:10px 20px 30px 40px;
}

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

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

marginとpaddingは間違いやすいものです。marginは外側、paddingは内側の隙間と覚えていただくと良いと思います。

プログラミング言語

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

ページのトップへ戻る