ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(3)「ボックスモデルを理解してブログのサイズを調整する」

過去2回に渡って、開発ツールを使ったCSS編集のやり方を説明してきました。


ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(1)「HTML編:開発ツールの使い方とウェブリブログの新システムのレイアウトの仕組み」

ブラウザの開発ツールを使って知識ゼロから始めるCSS編集(2)「CSS編:開発ツールを使ったCSS編集のやり方」


今回は、これまで漠然と「枠」と表現してきたものを、もう少し深く掘り下げていこうと思います。


まずは開発ツールを起動して下さい。

※Microsoft Edgeを使用している方は、IEの方を起動して下さい(Edgeを避けた理由は、このページの一番下のおまけコーナーに書きます)。

Windows 10でのInternet Explorerの使用


css19.jpg


今回はテスト用の枠が2つある(枠が表示されるのはPCのブラウザで見た時のみ)と思いますが、まずは開発ツールのHTML上で、「<div class="l-wrapper">…</div>」の上にある「<div class='test_waku'>…</div>」を展開して、その中にある「<div class='test_waku1'>テスト用の枠1</div>」をクリックして下さい。


ここで注目して欲しいのは、開発ツール上に表示されている四角形の図形です。

Firefox → レイアウトの項目に表示される四角形の図形
Internet Explorer 11 → レイアウトの項目に表示される四角形の図形
Google Chrome → Stylesの項目に表示される四角形の図形


css04.jpg


この四角形の図形は、ボックスモデルと呼ばれるもので、第1回目の時に説明した透明な枠を詳しく表したものになります。


ボックスモデルは、以下のような4つの領域で構成されています。


<ボックスモデルの4つの領域>

css20.jpg

content領域:文章や画像など、メインとなるコンテンツが表示される領域
※2通りの指定の仕方がある

padding領域:コンテンツと境界線との間にある余白(枠の線と枠の中の要素の間の余白)
※paddingで余白の大きさを指定できる

border領域:ボックスの境界線(枠線)
※border-widthで線の大きさを指定できる

margin領域:境界線の外側の余白(枠と枠の間の余白)
※marginで余白の大きさを指定できる


開発ツールを使って、テスト用の枠1のwidth、height、padding、border、marginの値を変え、Webページ上に表示されている枠1とボックスモデルがどのように変化するのかを確認してみて下さい。


paddingとmarginの4つの値は、それぞれ「上側の余白、右側の余白、下側の余白、左側の余白」を表していて、4つ並べることで4方向それぞれに異なった値を設定することができます(値が1つの場合は4方向全ての余白が同じ値になる)。


ここからちょっと話がややこしくなるので、ややこしい話が嫌いな方はこの部分は読み飛ばして、こちら(クリックするとその部分に飛びます)に進んでください。





今回、テスト用の枠を2つ用意したのには理由があります。


まずは、「<div class='test_waku1'>テスト用の枠1</div>」と「<div class='test_waku1'>テスト用の枠2</div>」をクリックして、それぞれのCSSを見比べてみて下さい(もし値を変えている場合は、値を戻すか再読み込みをしてリセットして下さい)。


<test_wakuのCSS>

.test_waku1 {
 box-sizing: content-box;
 border-width: 10px; /* 枠線の太さ */
 margin: 20px 20px 20px 20px ; /* 枠の外側の余白 */
 padding: 20px 20px 20px 20px ; /* 枠の内側の余白 */
 width: 300px; /* 枠の横幅 */
 height: 100px; /* 枠の高さ */
}
.test_waku2 {
 box-sizing: border-box;
 border-width: 10px; /* 枠線の太さ */
 margin: 20px 20px 20px 20px ; /* 枠の外側の余白 */
 padding: 20px 20px 20px 20px ; /* 枠の内側の余白 */
 width: 300px; /* 枠の横幅 */
 height: 100px; /* 枠の高さ */
}


border-width、margin、padding、width、heightの値が全て同じなのに、2つの枠の大きさが全然違っていますね。


これは、box-sizingにcontent-boxを指定するかborder-boxを指定をするかによる違いで、content-boxを指定するとwidthとheightの値がそのままcontent領域の大きさになり、border-boxを指定するとwidthとheightの値はcontent領域とpadding領域とborder領域の3つの大きさを足した値になります。


css21.jpg

<content-box>
width 300px = content領域の横幅 300px
height 100px = content領域の高さ 100px

<border-box>
width 300px = 左右のborder領域の合計 20px + 左右のpadding領域の合計 40px + content領域の横幅 240px
height 100px = 上下のborder領域の合計 20px + 上下のpadding領域の合計 40px + content領域の高さ 40px

border-boxの場合、content領域の大きさを直接指定することはできず、
content領域の横幅 = width - 左右のborder領域の合計 - 左右のpadding領域の合計
content領域の高さ = height - 上下のborder領域の合計 - 上下のpadding領域の合計
になります。


widthとheightでcontent領域の大きさを決めるのがcontent-box、widthとheightでmarginを除いたborderまでの全領域の大きさを決めるのがborder-boxと覚えると覚えやすいかも。


頭が混乱してきた方は、とりあえずボックスモデルの大きさを指定する方法が2通りあるということだけでも覚えておいてください。


さて、なぜこんなことを長々と説明したのかというと、ウェブリブログのリニューアル前はcontent-boxでwidthとheightの長さが計算されていたんですが、リニューアル後にはborder-boxで計算されているという違いがあるからです


何も設定しない場合は、box-sizingはcontent-boxになるんですが、新しいシステムでは、CSSに下のような設定があり、全ての要素に対してbox-sizingがborder-boxになるように設定されてます。


* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}


なので、リニューアル前に独自で作ったCSSの設定を、そのまま新しいシステムに持ってくると、デザインが少し崩れる可能性があります(コンテンツ領域が小さくなる)。※paddingとborderの値が0なら影響なし





というわけで、ややこしい話はここで終了、上の部分を読み飛ばした方はここから読み始めて下さい。


それでは、実際にウェブリブログの各要素の枠のサイズを調整していきます。


css22.jpg

枠の大きさを指定する時には、width(横幅)とheight(高さ)を使いますが、高さは記事の長さによって変わるので、サイズを調整する時は通常width(横幅)のみを使います。


width(横幅)は、padding(中の余白)とborder(線の太さ)を含んだ枠全体の大きさになります。


ここでは、例として「ベーシック(記事概要)」のテンプレートを使用します。


【<body>(Webページ全体の一番大きな枠)】

css23.jpg

ページ全体の横幅が「width:800px;」
「margin: 0px auto;」を指定すると、コンテンツを中央に持ってくることができる(「margin: 0px auto;」を消すとブログが左端に寄る)
borderとpaddingは0

純粋に横幅が800pxの線のないただの枠

【<div class="l-wrapper">と<div class="l-wrapper__inner">(ブログ全体を囲う枠)】
※サイズの指定は<div class="l-wrapper">ではなく、1つ下の階層の<div class="l-wrapper__inner">にしてあるので注意

css24.jpg

ページ全体の横幅が「width:800px;」
borderとpaddingは0

純粋に横幅が800pxの線のないただの枠

【<div role="main" class="Main">と<div role="main" class="Main__inner">(ブログ中央の枠)】

css25.jpg

Main枠の方に「padding: 10px 20px;(値が2つの場合は、上下と左右に分かれる、上下が10pxで左右が20px)」
Main__inner枠の方に「width: 400px;」

【<aside role="complementary" class="Side">と<div class="Side__inner">(左右のサイドバーを囲む枠)】
※左右で同じ値

css26.jpg

Side枠の方に「padding: 10px 10px 10px 10px;」
Side__inner枠の方に「width: 160px;」

【<article class="Article">(記事本文を囲む枠)】

Main__innerと同じ「width: 400px;」
※記事ページには、Main枠の中にArticle枠があって、そこにも「width: 400px」の設定があるので、記事本文の枠を大きくするには、ここの設定も変える必要がある


ブログ全体の枠が800pxなので、サイドバー2つと中央のメイン領域の合計が800px以下になるように調整してあり、Main__innerの横幅400pxとMainの左右のpaddingの合計が40pxでMain枠の横幅全体は440px、サイドバーもSide__innerの横幅160pxとSideの左右のpaddingの合計が20pxでSide枠の横幅全体は180pxになっていて、サイドバーは2つあるので合計360px、Main枠の横幅440pxとSide枠の横幅360pxで合計が800pxになってます。


CSSは下側に書いた方の値が適用されるので、1つ1つの値を変えるのがめんどうな場合は、↓のようなコンパクトにまとめたCSSを予め書いておき、それを管理画面のCSS編集の一番下に丸ごとコピーしてもOKです。


css43.jpg
/* ブログの横幅を変える */
body , .l-wrapper .l-wrapper__inner , .Header__contentsParts {width: 1000px;} /* ブログ全体 */
.Main .Main__inner , .Main .Main__inner .Main__contents , .Article {width: 500px;} /* メイン&記事ページ */
.Side .Side__inner {width: 210px;} /* サイドバー */
/* ブログパーツの横幅を変える */
.Header__contentsParts .Module {width: 220px;} /* ヘッダー(タイトル下) */
.Main .Main__inner .Main__contentsParts .Module {width: 220px;} /* 記事下 */
.Footer .Footer__inner .Footer__contentsParts .Module {width: 220px;} /* フッター */
/* 背景色と余白 */
.Main {background: #F3F3F3;padding: 10px 20px;} /* メイン */
.Article {padding: 0;margin-bottom: 25px;} /* 記事ページ */
.Side {background: #E9E9E9;padding: 10px 10px 10px 10px;} /* サイドバー */

※CSSでclass名を指定する時、「,」で名前を区切ると、複数のclass名をまとめて指定することができる
※上の例は、ブログ全体を1000px、メインを500px(余白を含めると540px)、サイドを210px(余白を含めると230px、左右で460px)にしたもの


上の例は単純にブログの横幅を広げただけですが、ボックスモデルをきちんと理解すれば、自分で余白なども自由に変えることが可能です。





■おまけ1「ブログパーツの横幅に関して」


css44.jpg


管理画面から「デザイン」→「コンテンツ(サイドバー)」を選択すると、ブログのヘッダー(タイトルの下)、サイドバー、記事下、フッターにブログパーツを追加することができます(パーツを追加したら、一番下の保存ボタンを押すことを忘れずに!!)。


これらのパーツにもCSSで横幅が設定されていて、自由に変えることができます。


css45.jpg

/* ブログパーツの横幅を変える */
.Header__contentsParts .Module {width: 220px;} /* ヘッダー(タイトル下) */
.Main .Main__inner .Main__contentsParts .Module {width: 220px;} /* 記事下 */
.Footer .Footer__inner .Footer__contentsParts .Module {width: 220px;} /* フッター */


サイドバー以外の部分にブログパーツを追加した場合、ブログパーツが横並びになりますが、ヘッダーの場所に自由形式(HTMLや文章を好きなように記述できるパーツ)のブログパーツを1つだけ追加し、「.Header__contentsParts .Module」の幅をブログ全体の幅と同じにすると、タイトル下に大きなフリースペースを作ることが出来ます。





■おまけ2「marginの仕様」


今回、テスト用の枠を2つ用意したのにはもう1つ理由があって、それがmarginの特殊な仕様の説明のためです。


枠1には下側のマージンが20px、枠2には上側のマージンが20pxに設定されているので、両方合わせて40pxの余白ができると思いがちですが、実際にWebページに表示されている2つの枠を見てみると、20px分の余白しか出来ていないことがわかります。


これは、marginの仕様によるもので、縦方向に並んだ要素のマージンは、大きい方のサイズを持った一つのマージンになります。


マージンの相殺 - CSS: カスケーディングスタイルシート | MDN

CSSのmarginとは?paddingとは?余白の指定方法まとめ





■おまけ3「Edgeを避けた理由」


css29.jpg


↑こちらは、テスト用の枠1と枠2のボックスモデルをEdgeで表示したものなんですが、content-boxとborder-boxでボックスモデルが全く一緒なんですよね。


他のブラウザでは、border-boxの時はcontent領域の数値が小さくなるので、Edgeの開発ツールを使う場合は注意が必要ですね。





■おまけ4「ウェブリブログのリニューアル前のwidthとheightの計算方法」


前のブログでは、HTMLの一番上に「<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">」の記述があり、CSSは標準モードで解釈されていました。

DOCTYPEスイッチ-HTMLの基本


content-boxを指定すると、DOCTYPEスイッチの標準モードのような表示になる
border-boxを指定すると、DOCTYPEスイッチの互換モードのような表示になる

box-sizing-CSS3リファレンス















スポンサーリンク


記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。