インラインボックスとブロックボックスとは？

webデザインでのCSSは、ブラウザ（パソコン・タブレット・モバイル）に表示される文字や背景の色やライン（線）や余白などの見た目の装飾を整えるものです。

このCSS、近年書き方などが次々変わってきてしまったり、新しい表示方法になったりとかでこまめに調べながら、なるべく新しい書き方にしようと努めていたりします。

そんなCSSの基礎を備忘録として書いていきたいと思います！今回のCSSの基礎はレイアウトの要である「インラインボックス」と「ブロックボックス」とは？です。

CSSの基本のボックスモデルって何？

基本中の基本の言葉だそうです。ボックスモデルって何？自分だけで実作業をしているとこの文言はあまり意識しておらず、最初にCSSのことを勉強した時も、こんな言葉あったっけ？くらいの認識でした。でもその中身のインラインとブロックは認識していました。

HTMLに書かれたテキストや画像に「ボックス」と呼ばれる四角形の領域を生成し、CSSに指定を書いて積んだり並べたりすることで、配置を整えていきます。そして「ボックス」＝「コンテンツ領域」の幅と高さや余白などを設定していきます。

「ボックスモデル」には「インラインボックス」と「ブロックボックス」と言う2種類があります。

インラインボックス

「インラインボックス」とは左から右へ横方向に配置され、テキストの中の行内の一部としてレイアウトされるものだそうです。

インラインボックスは例外もありますが、コンテンツ領域であるボックスに「幅」「高さ」「上下マージン」は設定することはできません。

インラインボックスのまとめ

<span>、<strong>、<br>、<a>、<em>

<img><input>

インラインボックスの特徴

ブロックボックス

「幅」「高さ」「余白（パディング・マージン）」「ボーダー」のサイズを設定することができるボックスです。イメージ的にはそのまま箱に線や色をつけたり、画像やテキストなど要素で中身を埋めていく感じと考えています。

ブロックボックスのまとめ

<div>、<p>、< ul>、< ol>、<li>、<table>
など

ブロックボックスはコンテンツ領域の全てのサイズ設定をすることができます。

ブロックボックスはCSSで指定しない限り基本横並びの配置にはなりません。例えばボックスの横幅のサイズを親ボックスの半分以下の数値に指定しても、その後に続くボックスのサイズが小さくても、その横に詰めて並ぶことはありません。
CSSのfloatやflex、table、glidなどを使用して配置します。
代表的な部分ではグローバルメニューやカラムレイアウトに使われています。

このinline（インライン）とblock（ブロック）はCSSのdisplayプロパティでも設定の変更をすることができます。
displayプロパティは別の機会に説明いたします。

box-sizingとは

このプロパティは本当に便利です。昔のコテコテに幅と高さのサイズを固めたコードでは必要なかったものです。同じコードでPC、タブレット、スマホに対応するためボックスの幅を確定しないような指定をすることが多くなりました。width:100%;などですね。

このbox-sizingを指定しない場合、例えばコンテンツ領域を「width:100%;」にした場合、paddingとborderをつけるとコンテンツ領域が100%を超えてしまいます。親要素の幅を超えることになります。

box-sizingを指定します。box-sizingは、要素の大きさの決まり方を指定するプロパティです。そこで、「box-sizing:border-box;」をpaddingやborder（線）を設定したコンテンツ領域のボックスに設定するとpaddingやborder（線）が幅、高さに含まれる状態になります。

この設定で領域からはみ出ることがないので、横並びの配置にした時の数値はコンテンツ内に収まるように設定したのに段落ちしちゃうレイアウトや、スマホなどでブラウザ幅からはみ出て中身が見えなくなったりする心配が減りました。

最近では、Bootstrapなどでも基本設定とするCSSの全要素にかかるように書いてあったりするようです。