CSS(スタイルシート)でデザインする

上下左右の余白を個別に指定する

ここで使うタグ

padding : 上右下左 ;

内側の余白を上右下左で指定する

margin : 上右下左 ;

外側の余白を上右下左で指定する

line-height: 高さ;

行の高さを指定する

???


「何もない空間がデザイン性と可読性をアップさせる」では余白を無くしました。その無くした余白を指定していきます。
余白を指定する方法は何種類あります。
padding(margin) : 10px 10px 10px 10px;上 右 下 左 )というふうに個別に指定する方法と
padding(margin) : 10px 10px;上下 右左)というまとめて上下 右左と指定する方法もあります。
padding(margin) : 10px;と指定すると上右下左 全てに余白を指定することになります。

いっかしょを個別に指定するには
padding(margin)-top(上) :10px
padding(margin)-bottom (下):10px
padding(margin)-right (右):10px
padding(margin)-left (左):10px
と個別に指定することができます。

<p>と</p>のあいだは「padding」と「margin」では行間は指定できません。
そこで使うのがline-height: 高さ;です。
line-heightを指定することで行間があきとても読みやすくなります。

ホームページ ソース
XHTML(HTML)

<html>

<head>
<meta http-equiv="Content-Type"
content="text/html; charset=shift_jis" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>タイトル</title>
</head>

<body>
<div id="body">

<div id="box-1">
<h1>h1 サイトタイトル</h1>
ホームページの説明文 <br />
テキスト テキスト テキスト テキスト テキスト テキスト
</div>

<div id="box-2">
<div class="menu">メニュー</div>
<ul>
<li>ページ1</li>
<li>ページ2</li>
<li>ページ3</li>
<li>ページ4</li>
<li>ページ5</li>
</ul>
<div class="menu">メニュー</div>
<ul>
<li>ページ1</li>
<li>ページ2</li>
<li>ページ3</li>
<li>ページ4</li>
<li>ページ5</li>
</ul>

</div>

<div id="box-3">
<h2>h;2 ページタイトル</h2>
<p>テキスト テキスト (省略)</p>

<h3>h3 見出し</h3>
<p>テキスト テキスト (省略)</p>

<h3>h3 見出し</h3>
<p>テキスト テキスト (省略)</p>
</div>

<div id="box-4">
copyright (c) ~~~.com All right reserved.
</div>

</div>

</body>

</html>


CSS(スタイルシート)

* {
      padding : 0px ;
      margin : 0px ;
      }

#body {
      width :800px ;
      border: 1px solid #9acd32;
      }

#box-1 {
      border-bottom: 1px solid #9acd320;
      background-image: url("img/top.png");
      font-size : 10px ;
      color : #ffffff ;
      padding : 40px 0px 100px 20px ;
      }

#box-2 {
      float : left;
      width :200px;
      font-size : 14px ;
      }

#box-3 {
      float : right;
      width :600px;
      }

#box-4 {
      clear: both;
      width: 800px;
      background-color : #9acd32;
      padding: 5px 0px;
      }

.menu {
      font-size : 15px ;
      background-color:#c0c0c0;
      padding: 5px ;
      }

ul {
      padding : 10px 5px 10px 30px;
      line-height: 20px;
      }


p {
      padding : 20px ;
      line-height: 30px;
      }


h1 {
      font-size : 20px ;
      color : #ffffff ;
      padding-bottom : 10px ;
      }

h2 {
      font-size : 18px ;
      color : #ffcc00 ;
      padding-left: 15px ;
      }

h3 {
      font-size : 18px ;
      color : #0000ff ;
      padding-left: 15px ;
      }

inserted by FC2 system