display

要素をどんな箱として表示するかを決めるプロパティ。改行、占有幅、子要素の並び方まで変わります。

遊んでみよう

まえ123あと

文章の途中に入り、空きがあれば前後の要素と同じ行に並びます

CSS

.element display: inline;

値のパターン

表示形式 display

displayの構成要素

01outside

外側の表示形式

blockやinlineは、要素自身が周囲の要素とどう並ぶかを決めます。

02inside

内側のレイアウト

flexやgridは、要素の子要素をどの仕組みで並べるかを決めます。

03box

表示する箱の有無

noneを指定すると、要素と子孫の箱がなくなり、配置用の空間も残りません。

早見表

最初はこの6つから。要素自身の並び方と、子要素の並び方を分けて考えるのがコツです。

01block前後で改行する箱幅いっぱい

02inline文章内に並ぶ箱仕様上の初期値

03inline-block横並びにできる箱幅・高さも有効

04flex1方向のレイアウトFlexbox

05grid行と列のレイアウトGrid

06none箱を表示しない空間も消える

よくある使い方

ナビゲーションを横に並べる

親要素をFlexboxにすると、リンクを横一列に並べ、間隔や位置を調整できます。

display: flex;

カードを行と列に並べる

親要素をGridにすると、行と列を使う配置の土台を作れます。列数はgrid-template-columnsで指定します。

display: grid;

不要な要素を隠す

noneは要素と子孫をレイアウトから外します。読み上げからも外れる点に注意します。

display: none;

ポイント

noneは、見た目だけでなく空間も消す。

display: noneを指定した要素と子孫は、画面上の配置とアクセシビリティツリーから外れます。空間を残して非表示にするvisibility: hiddenとはレイアウト上の動作が異なります。visibility: hiddenも通常は要素と子孫がアクセシビリティツリーから外れます。displayの仕様上の初期値はinlineですが、divなどはブラウザーの既定スタイルでblockになります。通常は子要素へ継承されません。