「padding」と「margin」をコントロールして、文章のレイアウトを整える--人気ホームページが作れる簡単作成講座

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

「padding」と「margin」をコントロールして、文章のレイアウトを整える

５－５　「padding」と「margin」をコントロールして、文章のレイアウトを整える

「padding」と「margin」のおさらい

全ての余白を０にしたことで、すっかりペッタンコになってしまったWebページですが、余白を作りだす「padding」と「margin」を一つ一つ指定して、読みやすく、デザイン性の高いWebページにしてみましょう。

その前に、おさらいです。
内側に余白を作るのがpadding。
外側に余白を作るのがmargin。

この違いをしっかり頭に入れて、続きを読んでくださいね。

レイアウトの内側に余白を指定する

#a-box { padding : 20px ; }

a-boxへ「padding」を指定することで、内側へ余白ができます。

テキストの内側と外側へ余白を指定する

h2 { padding : 10px;
margin : 5px; }

「padding」がテキストの背景色に余白を作り、「margin」がさらに外側へ余白を作っています。

ちょっとした違いですが、枠線にべったり付いていたテキストが離れて、読みやすくなります。

ホームページソース

a-box（id指定）、d-box（id指定）、<h2>、<h3>、<p>、category（class指定）へ「padding」と「margin」の指定ができました。

リスト表示させる<ul>が、極端に左に寄っていますね。
次のステップでは、左側の余白を多く指定して、右側へ配置してみましょう。

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');
          padding: 20px;
}

#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;
          padding: 10px;
}

h1 {
          font-size: 22px;
}

h2 {
          font-size: 17px;
          background-color: #FFFF99;
          padding: 10px;
          margin: 5px;
}

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

p {
          font-size: 14px;
          margin: 30px;
}

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

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

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