前へ 目次 次へ

margin,border,padding,content

ホームページのレイアウトをしようとすると、 いわゆるボックスと呼ばれる領域に着いて知る必要があります。

ボックスは以下のようなmargin,border,padding,contentという、 4つの領域から成り立っています。

これら4つの領域に関してスタイルシートを適用してみましょう。

margin

style20.css
p{
	background-clor: red ;
}
.mt50{
	margin-top: 50px ;
}
.mb50{
	margin-bottom: 50px ;
}
.ml50{
	margin-left: 50px ;
}
.mr30{
	margin-right: 30px ;
}
.mg{
	margin: 70px;
}
css20s1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>「歩行ロボット進化論」</title>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<link rel="stylesheet" href="style20.css" type="text/css">
<body>
<p class="mt50">自己紹介</p>
<p class="mb50">自作歩行ロボット紹介</p>
<p class="ml50">歩行ロボットリンク集</p>
<p class="mr30">日記</p>
<p class="mg">更新暦</p>
</body>
</html>

クリックすると表示結果をみることができます

2003//()

トップページへ

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送