display ボックスの表示方法 コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

displayプロパティの概要

ボックスの表示型CSS
display
目的 ボックスの表示型を指定。横並びにしたいときなどに用いる
使用 全て
関連 position
初期 display : inline
display: block
display: block
display: block
<div style="display: block; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: block</div>
<div style="display: block; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: block</div>
<div style="display: block; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: block</div>

パソコンの場合、ウィンドウの幅を収縮してどのように動くか確認してみてください

display : 表示型

未指定の場合、初期値であるinlineが選択される。noneを指定すると無いものとして扱われて何も表示されない。

block
display: block
display: block
display: block
<div style="display: block; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: block</div>
<div style="display: block; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: block</div> 
<div style="display: block; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: block</div>
inline
display: inline
display: inline
display: inline
<div style="display: inline; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: inline</div> 
<div style="display: inline; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: inline</div>
<div style="display: inline; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: inline</div>
inline-block
display: inline-block
display: inline-block
display: inline-block
<div style="display: inline-block; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: inline-block</div>
<div style="display: inline-block; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: inline-block</div>
<div style="display: inline-block; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: inline-block</div>
flex
display: flex
display: flex
display: flex
<div style="display: flex; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: flex</div>
<div style="display: flex; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: flex</div>
<div style="display: flexk; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: flex</div>
none
display: none
display: none
display: none
<div style="display: none; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: none</div>
<div style="display: none; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: none</div>
<div style="display: none; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: none</div>

noneは子要素も含めすべてが存在しない扱いになります。

contents
display: contents
display: contents
display: contents
<div style="display: contents; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: contents</div>
<div style="display: contents; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: contents</div>
<div style="display: contents; background-color: #00aaff; width: 200px; height: 100px; margin: 10px;">display: contents</div>

contentsはnoneと同じようではあるが、子要素は表示される。

他にも、数多くの表示型が用意されているが、ひとまずは上記のもので事足ります。