何もない空間がデザイン性と可読性をアップさせる--人気ホームページが作れる簡単作成講座

トップページ　＞　初心者講座　＞　

何もない空間がデザイン性と可読性をアップさせる

５－４　何もない空間がデザイン性と可読性をアップさせる

デザインというと、画像を使ったり、センスの良い配色にしたり、カッコいいロゴマークを作ったりすることを思い浮かべるものですが、何もないというのも、デザインなんです。

余白を指定することでホームページはとても読みやすく、デザインの良いものになります。

余白には2種類ある

余白を作りだすCSS（スタイルシート）は「padding」と「margin」です。

<h1>～<h6>,<p>,<ol>,<ul>,<div>などのXHTML（HTML)タグの
内側に余白を作るのがpadding。
外側に余白を作るのがmargin。

ホームページを作る上で、非常に多く使われるCSS（スタイルシート）ですので、
2つの違いを良く覚えておいてください。

XHTML/HTML タグには、余白が自動挿入されるものがある

余白を指定する前に、現在のプレビューを見てください。

余白を指定する前ですが、すでに多くの余白が含まれていることが分かると思います。

実は XHTML（HTML)タグには初めから余白が設定されているものがあり、「padding」や「margin」で余白を指定しなくてもXHTML/HTML タグを使用するだけで、自動的に余白が挿入されます。

それなら、わざわざ余白を指定する必要はないように思うかも知れませんが、自動的に挿入される余白は、タグによって余白の幅や余白箇所が違うだけでなく、ホームページを閲覧する環境（ブラウザ）によっても余白の幅や余白箇所が違うため、閲覧環境によってレイアウトが崩れる原因の一つになります。

そこで、*（アスタリスク）を使って「padding」と「margin」を0pxに指定し、自動挿入される余白を無くしてしまいましょう。

*（アスタリスク）で全ての余白をリセット

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

*（アスタリスク）に指定されたCSS（スタイルシート）は、全てのXHTML(HTML)に反映されます。

せっかくの余白を無くすことは無駄のように思えるかも知れませんが、自動挿入される余白が０に統一され、余白のコントロールが簡単になります。

ホームページソース

すっかり、ペッタンコになりました（笑）

XHTML

<div id="a-box">

<h1>h1 サイトタイトル</h1>
ホームページの説明文 <br />
テキスト　テキスト　テキスト　テキスト　テキスト　テキスト

</div>

<div id="b-box">

<h2>h2 ページタイトル</h2>
<p>テキスト　（省略）</p>

<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>

<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>

</div>

<div id="c-box">

<div class="category">カテゴリー１</div>
<ul>
<li>ページ１</li>
<li>ページ２</li>
<li>ページ３</li>
</ul>

<div class="category">カテゴリー２</div>
<ul>
<li>ページ４</li>
<li>ページ５</li>
<li>ページ６</li>
</ul>

</div>

<div id="d-box">

copyright (c) oooo.com All right reserved.

</div>

</div>

</body>

</html>

CSS（スタイルシート）

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

#site-box {
          width : 750px;
          border: 1px solid #FF9900;
}

#a-box {
border-bottom: 1px solid #FF9900;
background-image: url('img/header.gif');
}

#b-box {
float: left;
width: 500px;
}

#c-box {
          float: right;
          width: 250px;
          font-size: 12px;
}

#d-box {
          clear: both;
          width: 750px;
          background-color: #FFFF99;
          font-size: 12px;
}

h1 {
          font-size: 22px;
}

h2 {
          font-size: 17px;
          background-color: #FFFF99;
}

h3 {
          font-size: 15px;
          color: #FF9900;
}

p {
          font-size: 14px;
}

.category {
          font-size: 14px;
          color: #FFFFFF;
          background-color: #FF9900;
}

＜＜前のページ　　次のページ＞＞

このページをブックマークする→　