ywork2020.com

Title

汎用的なブロック領域を表す

目次 (INDEX)

divとは

ここで説明する div とは次の語句からなるHTMLの要素です。
division
読み: ディビジョン
意味: 部門、分割、分離

目次に戻る

div要素の概要

この要素は、各コンテンツをひとまとめする(グループ化する)際に使う汎用的なコンテナー要素です。

div要素にはマークアップとして特別な意味はなく、純粋にコンテンツをまとめるための領域を定義するために 使用することができます。また CSS のデザインにも柔軟に対応しており、 id 属性class 属性を 使用して、整備されたデザインのなかにコンテンツ含めることに優れています。 また、 lang 属性を使って異国語のコンテンツをまとめておく用途に 使用することにも適しています。

この要素は無意味なコンテナーですが、 title 属性 を使うことでフローコンテンツの意味を補足する用途にも使用できます。

※フローコンテンツとは、文書の本体に現れる一般的なコンテンツのことです。

この要素は開始タグと終了タグが必要です。
<div> </div>

目次に戻る

サンプルコードと実行結果

div 要素は開始タグと終了タグの中にフローコンテンツを配置してまとめておくことができます。

サンプルコード: HTML
<body>
	<div>
		ここはコンテンツ領域です。<br>
		この中に画像やテキストなどの<br>
		コンテンツを配置します。 
	</div>
</body>

サンプルとして、以下に3つの div 要素を配置しています。 div 要素自体にはマークアップとしての特別な意味はありませんので、CSSのコードをサンプルとして載せておきます。

サンプルコード: CSS
div{
	padding: 20px;
	border: thin solid ##black;
	width: fit-content;	
}
実行結果:
ここはコンテンツ領域です。
この中に画像やテキストなどの
コンテンツを配置します。

サンプルコード: CSS
div{
	padding: 20px;
	background-color: ##khaki;
	width: fit-content;
}
実行結果:
ここはコンテンツ領域です。
この中に画像やテキストなどの
コンテンツを配置します。

サンプルコード: CSS
div{
	padding: 20px;
	border: thin solid ##black;
	box-shadow: 8px 8px 5px ##gray;
	background-image: linear-gradient(180deg, ##white, ##lightgray 40%, ##lightslategray);
	width: fit-content;
}
実行結果:
ここはコンテンツ領域です。
この中に画像やテキストなどの
コンテンツを配置します。

目次に戻る

使用できる属性

目次に戻る