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//()