CSS ・ レイアウト
display
表示形式
要素をブロック・インライン・Flexbox・Gridなど、どの形式で表示するかを決めます。レイアウトの基本となるプロパティです。
01
サンプルコード
HTML
1<div class="row">
2 <span class="item">A</span>
3 <span class="item">B</span>
4 <span class="item">C</span>
5</div>
CSS
1.row {
2 display: flex;
3 gap: 12px;
4}
5.item {
6 display: block;
7 padding: 16px 24px;
8 border: 1px solid #b68235;
9}
02
実行結果
ブラウザでの表示
03
解説
HTMLの要素は、div のように縦に積まれる「ブロック」と、span のように文中に並ぶ「インライン」に分かれます。display はこの性質を変更します。
親要素に display: flex を指定すると、子要素が横一列に並びます。display: grid なら行と列による格子状のレイアウトになります。
display: none を指定すると、要素は表示されず、場所も占めなくなります。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
block | 幅いっぱいに広がり、縦に積まれる |
inline | 文中に並ぶ。width・heightは効かない |
inline-block | 文中に並びつつ、幅・高さを指定できる |
flex | 子要素を一方向に並べるFlexコンテナにする |
grid | 子要素を格子状に配置するGridコンテナにする |
none | 要素を非表示にする |
要素を非表示にする
JavaScriptでクラスを付け外しして、表示・非表示を切り替える定番の書き方です。
CSS
1.is-hidden {
2 display: none;
3}
注意点
- 01display: none の要素はスクリーンリーダーでも読み上げられません。
- 02inline 要素には width・height や上下の margin が効きません。