【Webデザイン・開発】ボックスモデルの解説と、要素間スペーシングのしくみ

2022-11-16

Webデザインでは特にスペーシングを理解することが重要です。

この投稿では、Webにおける要素のスペーシングの仕組みを学べます。Webデザインの仕組みを理解しようとするデザイナーにとって、有益になるようにスペーシングの基本的な事項について事例を交えてご説明します。

‍

ボックスモデルとは、ページ上のすべての要素の構造、レイアウト、および寸法を決定するものです。Webflowはコーディングのベストプラクティスに基づいて構築されているため、HTMLやCSSを完全にマスターする必要は無く、ボックスモデルを理解すれば Webflowを上手く使いこなすことが可能になります。

webflowのサイトがより良く構造化されることで、webflowのコードもより良く構造化されます。
その理由は、モバイルデバイスの画面サイズに対応するさまざまな「ブレイクポイント」において、より自然に各要素が再配置するようになっているからです。

Webflowについてはこちらをご覧ください

しかし、Webflow云々の前に、デザイナーであるならば（目指すならば）、自分の技術を正しく理解する必要があります。

Webflowを使用していないデザイナーも、ボックスモデルについて学ぶことで多くのメリットを得ることができます。これは、HTMLやCSSを学ぶための基礎となる概念です。この記事では、以上の理由から、この記事では、ボックスモデルについて焦点をあて、わかりやすく説明し、デザイナーとしての力を身に付けていただけるようにいたします。

‍

ボックスモデル

では、"ボックスモデル"とは一体何なのでしょうか？
要するに、ボックスモデルとは、Webページ構造がすべて一連のボックスで構成されているということにつきます。

HTMLとCSSの仕様を管理する W3C標準化団体による公式の定義を以下に示します。

CSS のボックスモデルとは、ドキュメントツリー内の要素に対して生成され、ビジュアルフォーマットモデルに従ってレイアウトされる矩形（くけい）のボックスのことを指します。

分かりやすく言うと、ボックスモデルとは次の3つの要素に分解できます。

・ウェブページの各要素（ドキュメントツリー）は、長方形の箱である

・これらの長方形のボックスは、高さと幅が同じである

・これらのボックスがウェブページ上でどのように隣り合って配置されるかを規定するルール（ビジュアルフォーマッティングモデル）がある

例えば、ホームページのナビゲーションバーもボックスです。
ナビゲーションバー内の個々のリンクはも、親ボックス（ナビゲーション要素）の中に存在するボックスです。
ヘッダーのヒーロー画像もボックスです。
画像の下にあるキャプションも、ボックスの角・枠が表示されずに、ボックスのコンテンツ（テキスト）だけが表示されているボックスです。キャプションの隣に別の要素を配置し、それぞれの要素の背景色を別々に設定すると、これらの要素が目には見えないボックスで定義されていることがわかります。

‍

ボックスモデルの領域

各ボックスは、4つの領域が重なって構成されています。以下に、一番内側の領域から一番外側の領域へと記します。

‍
・コンテンツ領域：単語や画像、親要素の中に含まれる子要素など、要素を構成するコンテンツが自然に占める領域のことを指します。コンテンツ領域は要素のメイン部分です。
‍
・パディング領域：すべてのボックスは、任意にコンテンツ領域を囲むパディングを持つことができます。このパディングによって、コンテンツ領域とボックスの見えない境界との間に距離が生じ、要素の形状が決定されます。たとえば、要素の背景色をベタ塗りし、要素のパディングを増やした場合、コンテンツ領域の端に色付きのスペースが多く表示されます。
‍
・ボーダー領域：ボックスを囲む境界線のサイズです。ボタンに太い枠線があることがありますが、あの枠線は、要素のボーダー領域です。つまり、ボーダーは、それ自体がコンテンツのコアとなる領域を占め、ボーダーによって要素全体の大きさが拡張されるのです。
‍
・マージン部分：ボックスの外側にある目には見えない余白のことで、隣接する要素との距離を調整するものです。マージンは、要素とその周囲との間のスペースを決定するため、要素を互いに押し退ける役割を担っているイメージです。例えば、下部のマージンが20pxの要素は、その下の要素から20pxの間隔を空けることになります。マイナス値でマージンを指定することもでき、これによって周囲の要素を被せることができます。

上図の入れ子になっている一連のボックスは、Webページで見られる通常のボタン要素のようなものだと想像してください。

また、パディング領域がまだ要素内にあることに注意してください。要素の背景はパディングエリアを含むように拡張されます。一方、ボーダーエリアとマージンエリアは、背景色が定義された時点以降に拡張。

‍

ディスプレイ

ボックス自体の領域だけでなく、各要素（ボックス）とその周辺の要素との関連性を表示する方法も知っておく必要があります。CSS を使用して要素のディスプレイを設定する方法はWebflowを例に挙げると次の4つです。

block、inline-block、inline、none

以下はその例です。

・block：ディスプレイが block の要素は、配置された行の利用可能な幅をすべて使用する様に広がります。つまり、ディスプレイが block の要素が占める領域は、親要素の100%となります。

・inline：その要素はコンテンツ領域、パディング領域、ボーダー領域が必要とする分だけスペースを自動的に取ります。

・Inline-block：上記と同じですが、要素に任意のボックス領域の値を与えることができるようになる点で異なります。これは通常のインラインでは制御できません。これによって任意でボックスにパディングとマージンを定義できます。

・none：この要素は表示されず、どのような寸法に設定されているかにかかわらず、ページ上でスペースを取りません。これは、事実上、ページのコードに存在するにもかかわらず、ページから要素を（視覚的に）削除していることになります。

‍

幅と高さ

Web用の要素のサイズは、PhotoshopやIllustratorなどの静的なデザイン環境での要素のサイズ調整とは異なります。Webページ上の要素は、ユーザーのブラウザウィンドウのサイズによって寸法が異なるだけでなく、ある要素の位置が、実際に近くの要素の位置に影響を与えることがあるのです。この概念をもう少し掘り下げてみましょう。

Web上では、要素の寸法は親要素からの相対寸法か、それとは逆の絶対寸法のどちらかに分類することができます。

相対値によるサイズ設定は例えば、幅が50%の要素は、親要素の幅の50%を使用します。親の幅が変更されると、子要素の幅も自動的に変更されます。

絶対値によるサイズ設定（例：ピクセル値）は、親の幅に基づくものではなく、完全に静的なものです。たとえ親要素の寸法が変わっても、ブラウザのウィンドウサイズが変わっても、決して変更されることはありません。

また、この2種類のサイズに制約を設定することも可能です。これを行うには、要素の幅や高さの最小値と最大値を指定します。これは、要素が高すぎたり広すぎたりしないようにする方法として、相対寸法と組み合わせるのが最も一般的です。

たとえば、ボックスのサイズを親のサイズの50%と指定しつつ、横幅の最大値を500pxに指定したとします。このボックスは親要素が広がると原則親要素の50％の幅になるように広がりますが、ボックスの横幅が500pxを超えるとそれ以上拡大しなくなります。最小値はその逆で、最小値500pxだと、ボックスの横幅が500pxよりも小さくならないようになります。

要素の幅や高さの値を設定しない場合、その値は要素内のコンテンツ（コンテンツ領域）を基に自動的に拡大・縮小されます。

‍