その２３ マージンとパディングとは
いよいよレイアウトも大詰めです。今回は余白を設定する要素、マージンとパディングを学びましょう。
余白を設定しレイアウトの見栄えをさらによくする。(マージンとパディングの設定)
まずは、index.htmlを左クリックで開いて確認します。
こちらで確認できます。(確認画面はこちら）
文字やサイドメニューは左によっていますし、サイドメニューの右側に配置したボーダーはサイドメニューに貼りついていてバランスが悪いです。そしてコンテンツ部分は逆に右側にくっついてこれもバランスが悪いですね。
これに余白を設定してバランスを整えるのがマージンとパディングの役割です。
では実際にどうなるのか？まずは説明はあとにして、設定してみましょう。
layout.cssをメモ帳で開いて、ハイライトの部分のように編集します。
h1{font-size:15px;}
h2{font-size:15px;}
h3{background-color:#33FF00;}
h4{background-color:#90ee90;}
#main{width:860px;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;}
#side{width:290px;
float:left;
border-right-width:1px;
border-right-style:dashed;
border-right-color:#666666;}
#contents{width:490px;
float:right;}
#footer{clear:both;}
#header{margin-left:30px;}
では確認してみましょう
こちらで確認できます。(確認画面は確認画面
ヘッダーの写真と文字が位置が右に寄りましたね。詳しい解説は後述するとして、どんどん作業を進めてみます。ついてきて下さいね☆
サイドメニューとコンテンツメニュー,そしてフッターの余白を設定する
つづいてサイドメニューの左余白とコンテンツメニューの右余白、そしてフッターの左に余白を設定しましょう。以下のようにスタイルシートに記述します
layout.cssをメモ帳で開いて以下のように書き加えます（ハイライトが編集部分）
h1{font-size:15px;}
h2{font-size:15px;}
h3{background-color:#33FF00;}
h4{background-color:#90ee90;}
#main{width:860px;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;}
#side{width:290px;
float:left;
border-right-width:1px;
border-right-style:dashed;
border-right-color:#666666;
margin-left:20px;}
#contents{width:490px;
float:right;
margin-right:20px;}
#footer{clear:both;
margin-left:20px;}
#header{margin-left:30px;}
では確認してみましょう
こちらで確認できます。(確認画面はこちら）
これでサイドメニュー、コンテンツ、フッターに余白の設定ができました。
ボーダーをパディングで右に移動する。
サイドメニューの右にぴったりとくっついたボーダーを右へ移動したいと思います。
ここでいよいよ登場するのがパディングです。これも実際にスタイルシートに記述してみます。
h1{font-size:15px;}
h2{font-size:15px;}
h3{background-color:#33FF00;}
h4{background-color:#90ee90;}
#main{width:860px;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;}
#side{width:290px;
float:left;
border-right-width:1px;
border-right-style:dashed;
border-right-color:#666666;
margin-left:20px;
padding-right:20px;}
#contents{width:490px;
float:right;
margin-right:20px;}
#footer{clear:both;
margin-left:20px;}
#header{margin-left:30px;}
では確認してみましょう
こちらで確認できます。(確認画面はこちら）
マージンとパディングの図解解説（今回のレイアウトを図にしてみる。）
今回のレイアウトを図で表すと以下のようになります。
- 枠の外は一番の大枠のbodyタグのブロック。そして、bodyの中にもとになるmainブロック。幅はスタイルシートで860pxに設定。
- そしてheaderのブロック。ヘッダー画像は800pxに設定。mainの枠の左側に貼りついていたため、margin-leftで30pxの余白を指定
- sideブロックはmainの左側に貼りついていたためmargin-leftで20pxの余白を指定
- contentsブロックはmainの右側にに貼りついていたためmargin-rightで20pxの余白を指定
- footerブロックはmainの左側に貼りついていたためmargin-leftで20pxの余白を指定
- sideの右側に貼りついていたボーダー線はpadding-rightで右へ20px移動
- このようにレイアウトを図にしてみるとブロックのどの部分がどういう設定なのかがわかりやすくなるかと思います。
マージンとパディングの明確な違いは何なのか？
では以下の図を見てください
さきほどのレイアウトの図のなかで、sideブロックの部分を抜き出してみました。ここでsideブロックの横幅はあくまで290pxです。（この図だと白い部分が２９０pxの幅をもつ）
sideブロックの右側にボーダーがありましたよね？マージンはこのボーダー（サイドメニューとコンテンツを区切る縦の区切り線）の外側に余白を作ります。そしてパディングの場合は
ボーダーの内側に余白を作ります。これがマージンとパディングの大きな違いです。
言葉で書いてもあまり理解できないかと思うので実際、さきほどのスタイルシートの記述を変えて検証してみましょう。
再びlayout.cssをメモ帳で開いていただき、以下のように修正してみてください。
h1{font-size:15px;}
h2{font-size:15px;}
h3{background-color:#33FF00;}
h4{background-color:#90ee90;}
#main{width:860px;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;}
#side{width:290px;
float:left;
border-right-width:1px;
border-right-style:dashed;
border-right-color:#666666;
margin-left:20px;
margin-right:20px;}
#contents{width:490px;
float:right;
margin-right:20px;}
#footer{clear:both;
margin-left:20px;}
#header{margin-left:30px;}
先ほどpaddingで設定していたスタイルシートをmarginに変えてみました。
上書き保存し、index.htmlを左クリックしてプレビューしてみてください。
こちらで確認できます。(確認画面はこちら）
ボーダーがsideに貼りついてしまったかと思います。
ですがこれは見方を変えれば、ボーダーの右側に20pxの余白を設定したということになります。
そしてsideブロックにボーダーが貼りついているということは、sideブロックとボーダーの間の
パディングは0pxということになりますね。
背景色の設定はパディングまでは影響するがマージンには影響しない
最後にsideブロックに背景色を設定してみましょう。
layout.cssに以下のように記述します。
h1{font-size:15px;}
h2{font-size:15px;}
h3{background-color:#33FF00;}
h4{background-color:#90ee90;}
#main{width:860px;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;}
#side{width:290px;
float:left;
border-right-width:1px;
border-right-style:dashed;
border-right-color:#666666;
margin-left:20px;
margin-right:20px;
background-color:#99FFCC;}
#contents{width:490px;
float:right;
margin-right:20px;}
#footer{clear:both;
margin-left:20px;}
#header{margin-left:30px;}
上書き保存し、index.htmlを左クリックしてプレビューしてみてください。
こちらで確認できます。(確認画面はこちら）
sideに背景色をつけました。
ここで分かることがあります。まず左の余白部分です。ここはマージンで余白を設定しています。
ということは、つまり背景色が影響しない部分ということです。そのためここはmainブロックで指定
した背景色（この場合はホワイト）のままになっているわけです。そして右側の部分はボーダーまで
がパディングの範囲ですので当然ボーダーを超えて背景色が設定されることはありません。
では左右のマージンの設定をパディングに変えたらどうなるでしょうか？
当然背景色がつくということになります。スタイルシートを以下のように変えてみましょう。
h1{font-size:15px;}
h2{font-size:15px;}
h3{background-color:#33FF00;}
h4{background-color:#90ee90;}
#main{width:860px;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;}
#side{width:290px;
float:left;
border-right-width:1px;
border-right-style:dashed;
border-right-color:#666666;
padding-left:20px;
padding-right:20px;
background-color:#99FFCC;}
#contents{width:490px;
float:right;
margin-right:20px;}
#footer{clear:both;
margin-left:20px;}
#header{margin-left:30px;}
上書き保存し、index.htmlを左クリックしてプレビューしてみてください。
こちらで確認できます。(確認画面はこちら）
今度はsideの左側はpaddingを20pxと設定したので、mainまでいっぱいに背景色がつきました。
この場合はmainとの間にマージンの余白は0pxということになります。そしてsideブロック
右側です。右側はボーダーが右にづれ、そしてそこまで背景色が影響していることがわかるかと
思います。これがマージンとパディングの概念です。
ではスタイルシートに設定したsideの背景を削除し、左余白で設定したパディングをマージンに
戻しましょう
h1{font-size:15px;}
h2{font-size:15px;}
h3{background-color:#33FF00;}
h4{background-color:#90ee90;}
#main{width:860px;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;}
#side{width:290px;
float:left;
border-right-width:1px;
border-right-style:dashed;
border-right-color:#666666;
margin-left:20px;
padding-right:20px;background-color:#99FFCC; →削除
}
#contents{width:490px;
float:right;
margin-right:20px;}
#footer{clear:both;
margin-left:20px;}
#header{margin-left:30px;}
マージンとパディングまとめ
マージンとパディングの違いは理解いただけましたか？
ボーダーの中の余白は・・・パディング
ボーダーの外の余白は・・・マージン
背景色が影響しないのは・・・パディング
背景色が影響するのは・・・マージン
覚えてくださいね
では他のページもブロックを変更しサイト全体を完成させましょう。
次のセクションは
その２４ 全てのページを完成させる です