CSS display 要素(ボックス)の表示方法を指定する

CSSのdisplayプロパティで、要素(ボックス)の表示方法を指定するサンプルです。

確認環境
・Google Chrome

目次

仕様 displayプロパティの仕様
サンプル displayプロパティのサンプル

displayプロパティの仕様

display : 値

displayプロパティは、要素(ボックス)の表示方法を指定します。

説明
none 要素(ボックス)を非表示にします。存在しないような見え方になります。
inline インライン要素ボックスを生成します。
前後に改行は入らないので横に並びます。(初期値)
注意点としては、widthプロパティとheightプロパティで幅と高さを指定できません。
block ブロック要素ボックスを生成します。
前後に改行が入るのでボックスは、縦に並びます。
widthプロパティとheightプロパティで幅と高さを指定できます。
inline-block 上記のinlineとblockがひとつになっています。
ブロック要素ボックスを生成しますが、前後に改行しないのでinlineと同じように横に並びます。
またinlineと違って、widthプロパティとheightプロパティで幅と高さを指定できます。
list-item リストの見た目になります。
値を継承しない

displayプロパティのサンプル

displayプロパティのサンプルです。

<style>
	#box1{
		display:none;
	}
	#box2 div{
		display:inline;
		height: 50px;
		background-color: #F5DEB3;
	}
	#box3 div{
		display:block;
		background-color: #ADD8E6;
	}
	#box4 div{
		display:inline-block;
		height: 50px;
		background-color: #F5DEB3;
	}
	#box5 p span {
      display:list-item;
      margin-left:15px;
    }
	#d1 div {width:200px;margin-bottom:10px;}
</style>
<div id="d1">
	<div id="box1">none</div>
	<div id="box2">
			<div>inline1</div>
			<div>inline2</div>
			<div>inline3</div>
	</div>
	<div id="box3">
		<div>block1</div>
		<div>block2</div>
		<div>block3</div>
	</div>
	<div id="box4">
		<div>inline-block1</div>
		<div>inline-block2</div>
		<div>inline-block3</div>
	</div>
	<div id="box5">
		<p>リスト化
			<span>abc</span>
			<span>abc</span>
			<span>abc</span>
		</p>
	  </div>
</div>

3行目は、noneです。コード上に記述していますが画面には表示されません。
6行目のinlineは、要素が横に並びます。heightを指定していますが効きません。
11行目のblockは、要素が縦に並びます。
15行目のinline-blockは、inlineのように横に並んで表示され、かつwidthとheightの指定が効きます。
20行目のlist-itemは、マーカー用のボックスが表示されます。margin-leftで表示を調整します。

以下は、実行結果です。

関連の記事

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

△上に戻る