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

displayプロパティの概要
値
1. 型

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

<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

<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

<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

<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

<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

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

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