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

スポンサーリンク
LINEで送る
Pocket

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と同じようではあるが、子要素は表示される。

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

 

LINEで送る
Pocket

タイトルとURLをコピーしました