ボックスモデルとレイアウトの基本

ボックスモデルとレイアウトの基本

このページでは、ウェブページを構成する要素のレイアウトに関連する「ボックスモデル」とその基本的な考え方について学びます。ボックスモデルは、ウェブページの要素がどのように配置され、サイズが決まるかを理解する上で重要な概念です。

ボックスモデルとは

ボックスモデルは、ウェブページの要素を表現するための概念で、マージン、ボーダー、パディング、コンテンツの4つの領域で構成されます。

1. コンテンツ: 要素の実際の内容 (テキストや画像)。
2. パディング: コンテンツとボーダーの間のスペース。
3. ボーダー: 要素の周囲を取り囲む線。
4. マージン: 要素の外側にある空間で、他の要素との間隔を作ります。

CSSでは、これらのプロパティを使ってボックスモデルの各領域のサイズを指定できます。

<style>
  div {
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
  }
</style>

上記のコードでは、<div>要素のパディングを10px、ボーダーの幅を2px、マージンを20pxに設定しています。

表示形式

要素の表示形式は、ブロックレベル要素、インライン要素、インラインブロック要素の3つに分けられます。

1. ブロックレベル要素: 縦方向に並ぶ要素で、一般的には幅が親要素全体を占めます。例: <div>、<h1>～<h6>、<p> など。
2. インライン要素: 横方向に並ぶ要素で、内容の幅だけを占めます。例: <span>、<a>、<em> など。
3. インラインブロック要素: インライン要素のように横方向に並び、ブロック要素のように幅と高さを指定できる要素です。例: 、 など。

これらの表示形式は、CSSのdisplayプロパティを使って変更することができます。例えば、インライン要素をブロック要素に変更するには以下のように指定します。

<style>
  span {
    display: block;
  }
</style>

ポジショニング

CSSには、要素の配置方法を制御するためのポジショニングが用意されています。主なポジショニングは、以下の5つです。

1. static: デフォルトのポジショニング。要素は通常の文書フローに従って配置されます。
2. relative: 要素は通常の文書フローに従って配置された後、指定された相対位置に移動します。
3. absolute: 要素は親要素に対して絶対位置で配置され、通常の文書フローから外れます。
4. fixed: 要素はブラウザウィンドウに対して固定位置で配置され、スクロールに追従します。
5. sticky: 要素は通常の文書フローに従って配置され、一定範囲でスクロールに追従するような挙動をします。

これらのポジショニングは、CSSのpositionプロパティを使って指定できます。

<style>
  div {
    position: relative;
    top: 20px;
    left: 10px;
  }
</style>

上記のコードでは、<div>要素のポジショニングをrelativeに設定し、通常の文書フローに従った配置から上に20px、左に10pxずらしています。