はじめに
ウェブページの要素は、ボックスモデルと呼ばれる仕組みに基づいて配置されます。ボックスモデルは要素のサイズ、余白、ボーダー、パディングを含み、要素のスタイリングと配置に影響を与えます。
この記事では、ウェブ制作初心者の方に向けてCSSの基本であるボックスモデルとは何か、ボックスモデルに関係するプロパティ、要素の大きさはどのように計算されるかなどについて解説します。
この記事の対象者
- ウェブ制作を基礎から学びたい方
- CSSについて学び始めた方
- ボックスモデルについて知りたい方
この記事の目標
- ボックスモデルについて理解する
- 要素の大きさを変更できる
- 余白を調整できる
この記事で使用するCSSプロパティ
- width, height
- border
- margin, padding
- その他：display, box-sizing
ボックスモデルについて
ボックスモデルは、ウェブページ上の要素のデザインや配置を制御する基本的な概念です。
各要素は、コンテンツ、パディング、ボーダー、マージンの四つの層から成るボックスとして考えることができます。
具体的には、コンテンツは要素そのものを指し、パディングはコンテンツとボーダーの間に余白を作ります。また、ボーダーは要素の境界線を作り、マージンは他の要素との余白を定義します。これにより、要素のデザインや配置を細かく調整することが可能となります。
要素の大きさを指定する
HTMLの要素の多くは、CSSではブロック要素とインライン要素に分類されます。
ブロック要素は、デフォルトでは親要素いっぱいの横幅を持っており、高さは要素内のコンテンツに依存します。インライン要素はコンテンツの幅と高さに依存します。
要素の大きさを変更するには、widthとheightプロパティを使用します。
width: 要素の幅を指定します。値は主にpxや%で指定します。height: 要素の高さを指定します。値は主にpxや%で指定します。
width, heightの使い方
width, heightプロパティはブロック要素とインライン要素で使い方が少し違います。具体的には、ブロック要素はwidth, heightの使用に制限がありませんが、インライン要素にwidth, heightを指定するには工夫が必要です。
ブロック要素のwidth, height
以下はブロック要素のデフォルト値とwidth、heightを指定する例です。
/* widthとheightのデフォルト値 */
.box {
width: 100%;
height: auto;
}
/* 幅と高さを指定 */
.box2 {
width: 400px;
height: 400px;
}また、widthの値をfit-contentとすることで、ブロック内のコンテンツの最も幅が広い要素に合わせて幅が調整されます。
<div class="box">
<div class="box-item-small"></div>
<div class="box-item-lerge"></div>
</div>.box {
width: fit-content;
}
.box > .box-item-small {
width: 100px;
}
.box > .box-item-lerge {
width: 400px;
}この例では、.boxは子要素の.box-item-lergeに合わせて400pxになります。fit-contentは少し複雑に感じるかもしれませんが、知っていると役に立つこともあるでしょう。
インライン要素のwidth, height
インライン要素には通常、width, heightの指定はできません。しかし、デザインやHTMLの構造上の都合によりインライン要素に対してwidth, heightの指定が必要な場合は多々あります。そんな時はdisplayプロパティを変更することで指定できるようになります。
span {
display: inline-block; // display: blockでも可
width: 100px;
height: 100px;
}display: blockでも幅と高さを指定することはできますが、spanタグにdisplay: blockは冗長なので通常は使用しません。そのような記述になる場合は、spanではなくdivを使用する方が適している可能性があります。
境界線を表示する
境界線は要素やセクションを視覚的に区別し、コンテンツのグルーピングや階層構造を明確に示す手助けとなります。
また、境界線はデザインに奥行きや立体感をもたらし、ユーザーの注目を引くのに役立ちます。ウェブデザインにおいて、境界線の使い方を工夫することで、情報の伝達性と視覚的魅力を両立させることができます。
CSSで境界線を表示するには、一般的にborderプロパティが使用されます。borderプロパティには幅、実線や点線などの種類、色を設定します。
- border-width：境界線の幅を指定します。値は主にpxで指定します。
- border-style：境界線の種類を指定します。値は主にsolidなどキーワードで指定します。
- border-color：境界線の色を指定します。値は主に色名やRGB値、HEXコードで指定します。
borderの使い方
以下のように記述することで、要素に境界線を表示されることができます。
/* 1px幅の赤い実線を表示 */
.box {
border-width: 1px;
border-style: solid;
border-color: #ff0000;
}borderの指定は、一般的にショートハンドという省略記法が使われます。各プロパティは半角スペースで区切ります。
border: border-width border-style border-color;
下記の例は上記と同じ意味です。
/* 1px幅の赤い実線を表示 */
.box {
border: 1px solid #ff0000;
}border-styleはには様々な種類がありますが、ブラウザによって表示が異なる場合があります。一般的には下記の値を指定することが多いです。
- solid：実線
- dotted：点線
- dashed：破線
- double：二重線
部分的に表示する
borderは位置を指定することで、一部分のみに表示させることができます。
- border-top：要素の上に表示します。
- border-bottom：要素の下に表示します。
- border-right：要素の右に表示します。
- border-left：要素の左に表示します。
/* 2px幅の赤い実線を要素の下に表示 */
.box {
border-bottom: 2px solid #ff0000;
}また、下記のように指定することで一部の境界線の色を変更するということもできます。
.box {
border: 1px solid #808080;
border-left-color: #ff0000;
}borderは組み合わせ次第で様々な表現ができます。いろいろ試してみると良いでしょう。
境界線の角を丸める
border-radiusを指定することで境界線の角を丸めることができます。値は主にpxや%が使われます。
/* 角を5pxの位置から丸める */
.box {
border: 5px solid #ff0000;
border-radius: 5px;
}また、border-radiusはborderの指定をしていなくても適用されます。
.box {
border-radius: 5px;
}border-radiusの%指定は、その要素の幅や高さを基準が基準になります。なので、縦横比が同じで50%の値を指定すると正円になります。
/* 直径400pxの正円 */
.maru {
width: 400px;
height: 400px;
border-radius: 50%;
}余白を空ける
適切な余白の配置により、コンテンツや要素間に適度なスペースを持たせることができ、ページの視覚的なバランスを保つことができます。また、余白はコンテンツを際立たせ、情報の整理と階層構造を明確にする手助けとなります。
CSSで余白を設定する基本的なプロパティには、marginとpaddingの2種類があります。値は主にpx、em、remが使用されます。
margin: 要素の外側の余白を指定します。要素と要素の間隔を調整する際に使用します。padding: 要素の内側の余白を指定します。要素内のコンテンツと境界線との間隔を調整します。
margin, paddingの使い方
margin, paddingもブロック要素とインライン要素では挙動が少し異なります。これらのプロパティもブロック要素は制限がありませんが、インライン要素には多少制限があるので理解しましょう。
ブロック要素のmargin, padding
ブロック要素に対してはmarginとpaddingは上下左右とも自由に指定できます。
.box {
padding-top: 16px;
padding-left: 16px;
padding-bottom: 16px;
padding-right: 16px;
}
.box {
margin-top: 16px;
margin-left: 16px;
margin-bottom: 16px;
margin-right: 16px;
}また、ショートハンドで記述することもできます。
.box {
padding: 16px; // 上下左右に16px
padding: 16px 8px; // 上下に16px、左右に8px
padding: 16px 8px 12px; // 上に16px、左右に8px、下に12px
padding: 16px 8px 12px 4px; // 上に16px、右に8px、下に12px、左に4px
}この例はpaddingの指定ですが、marginでも同じです。
.box {
margin: 16px; // 上下左右に16px
margin: 16px 8px; // 上下に16px、左右に8px
margin: 16px 8px 12px; // 上に16px、左右に8px、下に12px
margin: 16px 8px 12px 4px; // 上に16px、右に8px、下に12px、左に4px
}水平方向のmargin
ブロック要素の場合、marginは水平方向にのみautoという値を指定できます。要素はスタイリングを行わなければ左上から順番に配置されますが、marginにautoを指定することで要素の位置を変更することができます。
/* 中央に配置 */
.box {
width: 400px;
height: 400px;
margin: 0 auto;
}
/* 右に配置 */
.box {
width: 400px;
height: 400px;
margin-left: auto;
margin-right: 0;
}
/* 右に16px空けて配置 */
.box {
width: 400px;
height: 400px;
margin-left: auto;
margin-right: 16px;
}ちなみに、marginのautoは親要素を基準にするため、widthが100％だと意味がありません。
/* ブロック要素のwidthはデフォルトで100%なので意味がありません */
.box {
margin: 0 auto;
}垂直方向のmargin
marginは垂直方向においてマージンの相殺が行われます。具体的には、上下に配置された要素のmargin–topやmargin–bottomは一番大きな値のみが適用されます。
<div class="box-m100">
<p>上下マージン100pxのboxです。</p>
</div>
<div class="box-m200">
<p>上下マージン200pxのboxです。</p>
</div>.box-m100 {
margin: 100px 0;
}
.box-m200 {
margin: 200px 0;
}この例では、.box-m100には上下に100pxのmargin指定がしてありますが、.box-m200の上下200pxのmarginに相殺され、実際の.box-m100と.box-m200の間は200pxの余白が空くことになります。「100+200=300」とはならないので注意しましょう。
.box-m100のmarginの値が無効化されるわけではないので、.box-m100の上に配置される要素のmargin-bottomが100pxを超えなければ100pxが適用されます。
マージンの相殺によってどの値が適用されるか分かりづらくなるので、上下のmargin指定は一方向のみに統一すると良いでしょう。
.box-m100 {
margin-top: 100px;
}
.box-m200 {
margin-top: 200px;
}インライン要素のmargin, padding
インライン要素では上下にmarginを指定することはできません。また、paddingは上下左右に設定できますが、親要素は子要素として配置されたインライン要素のpadding値を高さに含めないため、場合によっては子要素が親要素からはみ出すことになり表示が崩れる可能性があります。
適切に余白を指定したい場合は、width, height同様にdisplayプロパティを変更する必要があります。
span {
padding: 16px; // 上下左右に16pxのパディング
margin: 16px; // 左右のみに16pxのマージン
}
span.inline-block {
display: inline-block; // display: blockでも可
margin: 16px; // 上下左右に16pxのマージン
}インライン要素に対するmarginは左右方向にのみ機能します。この制限は初心者のうちは忘れがちなので、細やかな余白の調整をしたい時に思わぬ字間を割かれる可能性があります。インライン要素には上下marginが効かないということを意識的に覚えておくと良いでしょう。
inline-blockはインライン要素とブロック要素の特徴を合わせ持つため、水平方向のmarginに対してautoを指定することもできるようになります。また、インライン要素の特徴によりwidthがコンテンツ幅になっているので、widthを記述しなくても中央配置されます。
span.inline-block {
display: inline-block;
margin: 0 auto; // 中央配置
}box-sizingについて
width, heightでのコンテンツの大きさを指定する方法や、borderの使い方、margin, paddingを用いた余白の指定方法について学びました。しかし、これで思いどおりに要素の大きさを指定できるかというと実際は簡単ではありません。
例えば、width, heightで指定した値はコンテンツの幅を指定するもので、通常はborderの幅やコンテンツとの余白であるpaddingの値を考慮しません。つまり、border-widthとpadding、width, heightの値を全て含めたものがその要素の大きさとなります。
/* 要素の大きさは幅・高さ共に434pxになります */
.box {
width: 400px;
height: 400px;
padding: 16px;
border: 1px solid #ff0000;
}この例では、paddingとborder-widthの値は上下左右に適用されるので、幅・高さ共に「400+(16+16)+(1+1)=434」となります。
この仕様はあまりにも直感的ではないため、このままではウェブサイトを完成させることすらできない可能性があります。
この要素の計算方法はbox-sizingというプロパティによるもので、デフォルトではこの値はcontent-boxになっています。要素の大きさを直感的に把握するためには、box-sizingの値をborder-boxに変更する必要があります。
/* 要素の大きさは幅・高さ共に400pxになります */
.box {
box-sizing: border-box;
width: 400px;
height: 400px;
padding: 16px;
border: 1px solid #ff0000;
}この例では、width, heightの値は400pxとなっていますが、実際のコンテンツのwidth, heightの値は「400-(16-16)-(1-1)=366」になります。「要素の大きさはpaddingとborderの値を含む」という仕様そのものは変わりませんが、こちらの方が要素の大きさを簡単に把握できることは自明でしょう。
要素毎にbox-sizingプロパティを指定すると、content-boxとborder-boxの要素が混在する可能性があります。このような状態は更に開発が困難になるため、ウェブサイトの基本スタイルとして以下の設定を行うことが一般的です。
*,
*:before,
*:after {
box-sizing: border-box;
}全称セレクタ（*の部分。ユニバーサルセレクタとも言います）を使用し、:before, :afterなどの疑似要素を含む全ての要素にbox-sizing: border-boxを指定しています。この記述をすることで全ての要素の大きさが把握しやすくなるので、要素の配置や余白が調整しやすくなります。
疑似要素を用いることで、HTMLに変更を加えることなく疑似的に要素を追加することができ、主に装飾目的で使用されます。:beforeと:afterの2種類を扱うことができ、:beforeは指定したセレクタの最初の子要素として、:afterは最後の子要素として配置されます。
以下の記事でウェブ制作初心者の方向けに分かりやすく解説しています。興味のある方は参考にしてください。
最後に
この章では、ボックスモデルについての解説と関連するプロパティ、要素の大きさがどのように計算されるかについて解説しました。
width, heightやborder, margin, paddingは要素の配置とデザインに大きな影響を与える重要なプロパティです。これらを扱えるようになることは必須のスキルなのでおさえておきましょう。
また、box-sizing: border-boxの指定をせずにCSSの学習を進めることはオススメできません。学習を困難にさせるという意味もありますが、コーディングにおいての特殊なクセはウェブサイトの保守性を損ねる可能性を生み出すので、気を付けるように心がけると良いでしょう。