HTML

要素

詳細を開く 詳細を閉じる

HTMLコード

ブロック要素 <div>
インライン要素 <span>

概要

  • HTMLの要素はブロック要素とインライン要素に分けられます。
    • ブロック要素には改行は含まれます。また、デフォルトでは幅widthは親要素の内部全体(100%)で表示されます。
    • インライン要素には改行は含まれません。また、表示に必要な幅のみ使われます。
  • <div>要素と<span>要素はセマンティック的な意味は無く、CSSを適用するためのコンテナとして使われます。
    • <div>要素はブロック要素です。
    • <span>要素はインライン要素です。

別ウィンドウで表示

<style>
	.aaa {
		margin:			5px;
		padding:		5px;
		color:			white;
		font-weight:	bold;
		border:			1px solid darkgray;
	}
	.red {		background: red;}
	.green {	background: green;}
	.blue {		background: blue;}
</style>

<h3>&lt;div&gt;</h3>

<div class="aaa red">div</div>
<div class="aaa green">div</div>
<div class="aaa blue">div</div>

<h3>&lt;span&gt;</h3>

<span class="aaa red">span</span>
<span class="aaa green">span</span>
<span class="aaa blue">span</span>

ブロック要素 : <div>


別ウィンドウで表示

<style>
	#wrapper {
		border:         2px solid darkgray;
		background:		white;
	}
</style>

<div id="wrapper">

	<div class="aaa sample1">sample1</div>
	<div class="aaa sample2">sample2</div>
	<div class="aaa sample3">sample3</div>

</div>

CSSを適用した例


別ウィンドウで表示
/* CSSファイル */
.aaa {
	margin:         5px;
	padding:        5px;
	border:         2px solid red;
}

別ウィンドウで表示
/* CSSファイル */
.sample1 {
	background:	linear-gradient(red, white, red);
}

.sample2 {
	background:	linear-gradient(green, white, green);
}

.sample3 {
	background:	linear-gradient(blue, white, blue);
}	

.aaa {
	margin:         20px;
	padding:        7px;
	font-size:		large;
	font-weight:	bold;
	text-align:		center;
    color:          #222;
	text-shadow:	1px 1px 3px white;
	border:         1px solid gray;
	border-radius:	5px;
	box-shadow:		2px 2px 6px gray;
}

インライン要素 : <span>


別ウィンドウで表示

<style>
	#wrapper {
		border:         2px solid darkgray;
		background:		white;
	}
</style>

<div id="wrapper">

	<span class="aaa sample1">sample1</span>
	<span class="aaa sample2">sample2</span>
	<span class="aaa sample3">sample3</span>

</div>

CSSを適用した例


別ウィンドウで表示
/* CSSファイル */
.aaa {
	margin:         5px;
	padding:        5px;
	border:         2px solid red;
}

別ウィンドウで表示
/* CSSファイル */
.sample1 {
	background:	linear-gradient(red, white, red);
}

.sample2 {
	background:	linear-gradient(green, white, green);
}

.sample3 {
	background:	linear-gradient(blue, white, blue);
}	

.aaa {
	margin:         3px;
	padding:        7px;
	font-size:		large;
	font-weight:	bold;
	text-align:		center;
    color:          #222;
	text-shadow:	1px 1px 3px white;
	border:         1px solid gray;
	border-radius:	5px;
	box-shadow:		2px 2px 6px gray;
}

CSSコード

CSSなし


別ウィンドウで表示

<style>
	.wrapper {
		border:         2px solid darkgray;
		background:		white;
	}
</style>

<h3>&lt;div&gt;</h3>
<div class="wrapper">

	<div class="aaa sample1">sample1</div>
	<div class="aaa sample2">sample2</div>
	<div class="aaa sample3">sample3</div>

</div>

<h3>&lt;span&gt;</h3>
<div class="wrapper">
	
	<span class="aaa sample1">sample1</span>
	<span class="aaa sample2">sample2</span>
	<span class="aaa sample3">sample3</span>
	
</div>

線 : border


別ウィンドウで表示
/* CSSファイル */
.sample1 {
	border:			1px solid red;
}

.sample2 {
	border:			10px ridge green;
}

.sample3 {
	border:			10px outset blue;
}

余白 : margin/padding


別ウィンドウで表示
/* CSSファイル */
.sample1 {
	margin:			20px;
}

.sample2 {
	margin:			20px;
	padding:		20px;
}

.sample3 {
	padding:		20px;
}	

.aaa {
	border:			2px solid red;
}

色 : color/background


別ウィンドウで表示
/* CSSファイル */
.sample1 {
	color:			orangered;
}

.sample2 {
	background:		moccasin;
}

.sample3 {
	color:			white;
	background:		saddlebrown;
}	

.aaa {
	border:			1px solid dimgray;
	margin:			10px;
	padding:		5px;
}

大きさ: height/width


別ウィンドウで表示
/* CSSファイル */
.sample1 {
	height:			50%;
}

.sample2 {
	width:			50%;
}

.sample3 {
	height:			50px;
	width:			100px;
}	

.aaa {
	margin:			10px;
	padding:		5px;
	border:			2px solid red;
}

display

インライン : display:inline


別ウィンドウで表示
/* CSSファイル */
.aaa {
	display:		inline;

	margin:         10px;
	padding:        5px;
	border:         2px solid red;
}

別ウィンドウで表示
/* CSSファイル */
.sample2 {
	width:			50%;
}

.sample3 {
	height:			50px;
	width:			100px;
}

.aaa {
	display:		inline;

	margin:         10px;
	padding:        5px;
	border:         2px solid blue;
}

インラインブロック : display:inline-block


別ウィンドウで表示
/* CSSファイル */
.aaa {
	display:		inline-block;

	margin:         10px;
	padding:        5px;
	border:         2px solid red;
}

別ウィンドウで表示
/* CSSファイル */
.sample2 {
	width:			50%;
}

.sample3 {
	height:			50px;
	width:			100px;
}

.aaa {
	display:		inline-block;

	margin:         10px;
	padding:        5px;
	border:         2px solid blue;
}

ブロック : display:block


別ウィンドウで表示
/* CSSファイル */
.aaa {
	display:		block;

	margin:         10px;
	padding:        5px;
	border:         2px solid red;
}

別ウィンドウで表示
/* CSSファイル */
.sample2 {
	width:			50%;
}

.sample3 {
	height:			50px;
	width:			100px;
}

.aaa {
	display:		block;

	margin:         10px;
	padding:        5px;
	border:         2px solid blue;
}

改行<br>を使って、縦に並べた例


別ウィンドウで表示

<style>
	.aaa {
		border:         2px solid red;
	}
	.block {
		display:		block;
	}
	.wrapper {
		border:         2px solid darkgray;
		background:		white;
	}
</style>

<h3>改行「&lt;br&gt;」で縦表示</h3>
<div class="wrapper">

	<span class="aaa">sample1</span>
	<br>
	<span class="aaa">sample2</span>
	<br>
	<span class="aaa">sample3</span>
	<br>
	<span class="aaa">sample4</span>

</div>

<h3>CSS「display:block;」で縦表示</h3>
<div class="wrapper">

	<span class="aaa block">sample1</span>
	<span class="aaa block">sample2</span>
	<span class="aaa block">sample3</span>
	<span class="aaa block">sample4</span>

</div>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ