CSS 要素のボックスの種類を指定するサンプル(display)

CSSの要素のボックスの種類を指定するサンプルです。
displayプロパティを使用します。

display

display : 値
説明
none 要素を非表示にします。要素が存在しないような見え方になります。
inline インライン要素ボックスを生成します。(初期値)
横に並びます。
widthプロパティとheightプロパティで幅と高さを指定できません。
block ブロック要素ボックスを生成します。
縦に並びます。
widthプロパティとheightプロパティで幅と高さを指定できます。
inline-block ブロック要素ボックスを生成します。
inlineのように横に並びます。
widthプロパティとheightプロパティで幅と高さを指定できます。
list-item ブロック要素ボックスとリスト項目のマーカー用のボックスを生成します。
値を継承しない

コード

サンプルのコードです。
displayプロパティの値にnone、inline、block、inline-block、list-itemを指定しています。

<style>
#box1{
	display:none;
}
#box2 ul li{
	display:inline;
}
#box3 ul li{
	display:block;
}
#box4 ul li{
	display:inline-block;
}
#box5 ul li{
	display:list-item;
}
#d1 div ul li{border:1px solid #000;width:200px;height:40px;}
</style>
<body >
<div id="d1">
<div id="box1">none</div>
<div id="box2">
	<ul>
		<li>inline1</li>
		<li>inline2</li>
		<li>inline3</li>
	</ul>
</div>
<div id="box3">
	<ul>
		<li>block</li>
		<li>block</li>
		<li>block</li>
	</ul>
</div>
<div id="box4">
	<ul>
		<li>inline-block</li>
		<li>inline-block</li>
		<li>inline-block</li>
	</ul>
</div>
<div id="box5">
	<ul>
		<li>list-item</li>
		<li>list-item</li>
		<li>list-item</li>
	</ul>
</div>
</div>
</body>

サンプル

上記コードのサンプルです。
noneは、コード上に記述していますが画面には表示されていません。
inlineは、横に並んでいます。またwidthとheightを指定していますが効いていません。
blockは、縦に並んでいます。widthとheightの指定が効いています。
inline-blockは、inlineのように横に並んで表示され、かつwidthとheightの指定が効いています。
list-itemは、マーカー用のボックスが表示されています。

none
  • inline1
  • inline2
  • inline3
  • block
  • block
  • block
  • inline-block
  • inline-block
  • inline-block
  • list-item
  • list-item
  • list-item

関連の記事

CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS 幅と高さを指定するサンプル(widthとheight)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS 回り込みと解除のサンプル(floatとclear)
CSS ボックスの配置のサンプル(positionのrelative)
CSS ボックスの配置のサンプル(positionのabsolute)
CSS ボックスの配置のサンプル(positionのfixed)
CSS 要素の重なる順番を指定するサンプル(z-index)
CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)
CSS ボーダーの表示方法を指定するサンプル(border)

△上に戻る