display
: ブロック要素/インライン要素の切り替え CSSプロパティ
このページで解説するコードの実行結果。(タイトルの文字列をクリックすると、コードに移動)
display
の概要
ブロック要素/インライン要素などの切り替えを設定する。
設定値 | 要素 | 並び |
---|---|---|
block | ブロック要素 | 縦(↓) |
inline-block | ブロック要素 | 横(→) |
inline | インライン要素 | 横(→) |
list-item | ブロック要素(リスト形式) | 縦(↓) |
none | 非表示(要素を削除) |
ブロック要素/インライン要素
このページでは、以下のコードをデフォルトとして使用している。
<div class="parent"> <div class="children child-1"> child-1 </div> <div class="children child-2"> child-2 </div> <div class="children child-3"> child-3 </div> </div> <div class="parent"> <span class="children child-1"> child-1 </span> <span class="children child-2"> child-2 </span> <span class="children child-3"> child-3 </span> </div>
実行結果に2つのオレンジのボックスが見える。
異なる点は以下。
- 上のボックスの中には
<div>
要素が入っている - 下のボックスの中には
<span>
要素が入っている
<div>
要素は(デフォルトでは)ブロック要素なので縦並びになっており、<span>
要素は(デフォルトでは)インライン要素なので横並びになっている。
<div> 要素 | ブロック要素 | 縦並び(=改行がある) |
<span> 要素 | インライン要素 | 横並び(=改行がない) |
block
: 縦並びのブロック要素
子要素にdisplay: block;
を指定すると、全ての要素はブロック要素(縦並び)になる。
<span>
要素はインライン要素であるが、(<div>
要素のような)ブロック要素として扱われるようになる。
.children { display: block; }
inline
: 横並びのインライン要素
子要素にdisplay: inline;
を指定すると、全ての要素はインライン要素(横並び)になる。
<div>
要素はブロック要素であるが、(<span>
要素のような)インライン要素として扱われるようになる。
インライン要素は「高さが無い要素」として扱われるので、親要素の子要素の間のスペースが無いことに注意。
.children { display: inline; }
inline-block
: 横並びのブロック要素
子要素にdisplay: inline-block;
を指定すると、全ての要素はインライン・ブロック要素になる。
インライン・ブロック要素はインライン要素のように横並びになるが、ブロック要素のように高さは維持される。
一般的に、縦並びのブロック要素を横並びにしたい場合、inline-block
にするとよい。
.children { display: inline-block; }
list-item
: リスト
子要素にdisplay: list-item;
を指定すると、全ての要素はリスト形式になる。
.children { display: list-item; }
なお、list-item
を設定すると、リスト(<ul>
、<ol>
、<li>
)と同じ扱いになる。よって、以下のCSSプロパティも設定可能になる。
CSSプロパティ | 設定内容 |
---|---|
list-style-type | マーカーの種類 |
list-style-image | マーカーに画像ファイルを設定する |
list-style-position | マーカーの位置 |
list-style-type
.parent { list-style-type: circle; } .children { display: list-item; }
list-style-image
.parent { list-style-image: url( '/img/list-style-image1.png' ); } .children { display: list-item; }
list-style-position
.parent { list-style-position: inside; } .children { display: list-item; }
none
: 非表示
display: none;
を指定すると、全ての要素は削除され、非表示になる。
.children { display: none; }
visibility: hidden
との違い
visibility
も要素を非表示にする。その違いな何か?
.children { visibility: hidden; }
その違いは上記結果から明らかであるが、 visibility: hidden;
の場合、要素あったエリアは保存される。
一方、display: none;
にするとエリアは詰められて無くなる。
CSS | 空いたエリア |
---|---|
display: none; | 詰められる |
visibility: hidden; | 空けたまま |
Emmet : d
記述 | Visual Studio Code |
---|---|
d | display: block; |
di | display: inline; |
dib | display: inline-block; |
dl | display: list-item; |
dn | display: none; |