HTML/CSSにおけるボックスの仕組み
ボックスとは
ボックスとはコンテンツを表示するための領域のこと。
HTMLの要素一つ一つに一つ一つのボックスが生成される。
つまり、HTMLの要素は、コンテンツとその領域を表すBOXから構成されている。
CSSがコンテンツとボックスにできること
コンテンツに対してできること
フォントの種類、サイズの変更する。
テキストの色装飾線の設定する。
トランスフォームによる変形。
BOXに対してできること
ボックスの背景色、背景画像の設定する。
ボックスのサイズやスペースを調整する。
ボーダーラインを調整する。
ボックスの配置を変更する。
ボックスモデル
ボックスの種類は大きく分けて、インラインボックスとブロックボックス
displayプロパティで指定する。
display: block; ブロックボックス
display: inline; インラインボックス
display: inline-block; インラインブロックボックス
display: none;
| 項目 | block | inline | inline-block |
|---|---|---|---|
| 特徴 | 親ボックスいっぱいに広がる。 テキストレベルの要素のコンテナ（入れ物）としての働き。 |
テキストの行内に入れ込む事ができる。テキストレベルの要素。 | – |
| 並び方 | 縦 | 横 | 横 |
| width とheight | 指定可能 ◯ | 指定不可 ❌ ※但し、<img>と<input>は指定可能 |
設定可能 ◯ |
| width | 横幅いっぱい | コンテンツ | コンテンツ(デフォルト) |
| height | コンテンツ | コンテンツ | コンテンツ(デフォルト) |
| 上下margin | ◯ | ❌ | ◯ |
| 左右margin | ◯ | ◯ | ◯ |
| 上下padding | ◯ | 前後の行とかぶる | ◯ |
| 左右padding | ◯ | ◯ | ◯ |
| text-align | ❌ | ◯ 親要素に指定 | ◯ 親要素に指定 |
| vertical-align | ❌ | ◯ | ◯ |
| デフォルト | <header>,<p>,<h1～h2>,<ul>,<div> | <span>,<a>,<strong>,<sup>,<sub>,<img> | – |