ボックスモデル関連のCSSプロパティ

Articles

CSS入門

ボックスモデル関連のCSSプロパティ

この記事ではボックスモデル関連のCSSプロパティについて説明します。

幅と高さ、余白などのプロパティについて、利用用途や記述の仕方を学べます。

YouTube Video

プレビュー用のHTML

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

ボックスモデル関連

`width`と`height`プロパティ

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

widthとheightプロパティは、要素の幅と高さを指定するためのCSSプロパティです。これらは、特にブロック要素や画像、ビデオなどのサイズを設定する際に使用されます。

width-height-fixedクラスでは、幅と高さに固定値を指定しています。
width-height-percentクラスでは、幅と高さに割合のパーセントを指定しています。

指定できる値

widthとheightプロパティには以下の値を指定できます。

auto: デフォルトのサイズです。親要素に合わせてサイズを自動で調整します。
固定値: 固定した幅をピクセル、パーセント、または相対単位で指定します。(ex: 100px, 50%, 10rem)
- 例えば、250pxは要素のサイズを250ピクセルに設定し、50%は親要素のサイズに対して50%に設定します。
min-content: 内容の最小サイズに合わせます。
max-content: 内容の最大サイズに合わせます。
fit-content: 要素のサイズをコンテンツのサイズに基づいて適切に調整します。

最小値と最大値の指定

min-width、max-width、min-height、max-heightは、要素の幅と高さに関するサイズの制約を設定するためのCSSプロパティです。これらを使用することで、要素が特定のサイズ範囲内に収まるようにできます。

`margin`と`padding`プロパティ

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

marginとpaddingは、CSSでボックスモデルの中にある要素の外側と内側の余白を制御するためのプロパティです。これらは、要素間のスペースを調整したり、見た目を整えるために使われます。

margin-paddingクラスでは、marginとpaddingを両方指定しています。実線の枠線の外側にmarginのスペースがあり、実線の枠線の内側にpaddingのスペースがあります。
margin-onlyクラスでは、marginのみを指定しています。実線の枠線の内側のpaddingのスペースがないため、margin-paddingクラスと比較して青色の領域が小さくなっていることがわかります。
no-marginクラスでは、marginとpaddingの両方が0に設定されています。実線の枠線の外側のmarginのスペースがないため、青色の領域が左側いっぱいに寄せられていることがわかります。

このように、marginプロパティによって要素の外側の余白を設定し、要素間の距離を調整できます。一方、paddingプロパティは要素の内側の余白を設定し、コンテンツとボーダーの間の距離を調整します。

`margin`プロパティ

marginプロパティは要素の外側の余白（マージン）を設定します。隣接する要素とのスペースを確保するのに使います。以下の値を指定できます。
固定値: マージンのサイズをピクセル、相対単位（em、rem）、またはパーセントで指定できます。(ex: 10px, 1em, 5%)
auto: ブロック要素を中央に配置する際に便利です。幅が指定されている場合、左右のマージンを自動調整します。
正負の値: 正の値で余白を広げ、負の値で要素を近づけます。

省略形の書き方:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

marginプロパティには、1つから4つの値を指定できます。

1つの値: すべての方向に適用されます。
2つの値: 1つ目が上下、2つ目が左右に適用されます。
3つの値: 上、左右、下の順に適用されます。
4つの値: 上、右、下、左の順に適用されます。

`padding`プロパティ

機能:

paddingプロパティは要素の内側の余白（パディング）を設定します。要素のコンテンツとボーダーの間にスペースを設けるのに使います。以下の値を指定できます。
固定値: パディングのサイズを指定します。(ex: 10px, 1em, 5%)
負の値は使用できません。パディングの値は正の数値のみ指定可能です。

省略形の書き方:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

marginと同じように1つの値から4つの値まで指定できます。

1つの値: すべての方向に適用されます。
2つの値: 1つ目が上下、2つ目が左右に適用されます。
3つの値: 上、左右、下の順に適用されます。
4つの値: 上、右、下、左の順に適用されます。

`box-sizing`プロパティ

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizingは、CSSのプロパティの一つで、要素の幅と高さをどのように計算するかを制御するものです。

content-boxクラスでは要素の幅は360pxです。widthの300px、左右のpaddingが合計40px、左右のborderが合計20pxで全体で360pxになります。
border-boxでは要素の幅は300pxです。指定されたwidthにpaddingとborderが含まれます。

`box-sizing`の値

box-sizingには主にcontent-boxとborder-boxの2つの値があり、content-boxがデフォルト値になります。

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

content-boxを指定すると内容の幅と高さのみがwidthやheightで指定されます。paddingやborderはそれに追加されて、最終的なサイズが決まります。つまり、widthとheightはコンテンツの領域だけを指します。

この例では指定されたwidthは200pxですが、左右のpaddingとborderの幅も加わるため、最終的な要素の実際の幅は260pxとなります。

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

border-boxを指定するとwidthやheightに、paddingとborderが含まれた状態で計算されます。つまり、指定されたwidthやheightは、コンテンツとpaddingとborderの全体のサイズになります。

この例の場合、指定されたwidthは200pxで、paddingやborderも含まれているため、最終的な要素の実際の幅は200pxのままです。paddingやborderがその中で調整されます。

`box-sizing`の違いまとめ

プロパティ	計算方法	実際の幅の計算
`content-box` (デフォルト)	`width`はコンテンツのみ。`padding`や`border`は加算される	`width` + `padding` + `border`
`border-box`	`width`はすべて（コンテンツ、`padding`、`border`を含む）	指定された`width`がそのまま使われる

`box-sizing`の利点

border-boxを使用すると、レイアウトが安定します。paddingやborderを追加しても、指定したサイズが変わらないため、計算が簡単です。
フレキシブルなレイアウトを作成する際に便利です。特にレスポンシブデザインや複雑なレイアウトで、予期せぬサイズの変動を避けるためにborder-boxを使うことがよくあります。

グローバルに`border-box`を適用する方法

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

このようにCSSで設定することで、すべての要素にborder-boxを適用して、予期せぬサイズ変更を避けることができます。

まとめ

box-sizingは、要素のwidthやheightにpaddingやborderを含めるかどうかを制御します。
border-boxを使うと、要素のサイズ計算が簡単になり、レスポンシブデザインなどに適しています。

`visibility`プロパティ

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

visibility プロパティは、要素を表示または非表示にする際に使用されますが、displayプロパティとは異なり、要素が非表示でもレイアウトに影響を与えます。要素を隠すだけで、元の位置やサイズは保持され、他の要素のレイアウトに影響を与えません。

基本構文

1element {
2    visibility: value;
3}

value: 要素の可視性を指定する値です。

値の種類

visibilityプロパティには、次の値を指定できます。

`visible`

visibleを指定すると、要素が表示されます。これはデフォルト値です。

`hidden`

hiddenを指定すると、要素を非表示にしますが、要素のレイアウトスペースは確保されたままです。

`collapse`

collapseは、主にテーブルの行や列で使用されます。要素が非表示になり、スペースも無視されます。テーブルの行や列に適用した場合、非表示にした行や列はレイアウトから完全に取り除かれます。
ただし、テーブル要素以外の通常のブロック要素やインライン要素に使用した場合は、hiddenと同様に動作し、レイアウトスペースは保持されたままになります。

`inherit`

inheritを指定すると、親要素のvisibilityプロパティの値を継承します。

`visibility`と`display`の違い

visibilityとdisplayには次のような違いがあります。

visibility: hiddenは要素を非表示にしますが、要素のスペースやレイアウトは保持されます。
display: noneは要素を完全にレイアウトから取り除き、他の要素がそのスペースを埋めます。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。ぜひYouTubeチャンネルもご覧ください。

YouTube Video

コード表示と引用関連のCSSプロパティ背景関連のCSSプロパティ

ボックスモデル関連のCSSプロパティ

YouTube Video

プレビュー用のHTML

ボックスモデル関連

widthとheightプロパティ

指定できる値

最小値と最大値の指定

marginとpaddingプロパティ

marginプロパティ

省略形の書き方:

paddingプロパティ

機能:

省略形の書き方:

box-sizingプロパティ

box-sizingの値

content-box

border-box

box-sizingの違いまとめ

box-sizingの利点

グローバルにborder-boxを適用する方法

まとめ

visibilityプロパティ

基本構文

値の種類

visible

hidden

collapse

inherit

visibilityとdisplayの違い

YouTube Video

`width`と`height`プロパティ

`margin`と`padding`プロパティ

`margin`プロパティ

`padding`プロパティ

`box-sizing`プロパティ

`box-sizing`の値

`content-box`

`border-box`

`box-sizing`の違いまとめ

`box-sizing`の利点

グローバルに`border-box`を適用する方法

`visibility`プロパティ

`visible`

`hidden`

`collapse`

`inherit`

`visibility`と`display`の違い