ボックス(HTML/CSS)の仕組み

なわて投稿サムネイル

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>