Menu
Coddy logo textTech

Divisions

CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 25/60。

ウェブページをブロックに分割してコンテンツを整理したいとしましょう。HTMLでは、divを使用して要素をグループ化できます。 

div タグは、レイアウトの作成やセクションの分割に最適です。

基本的な構文は以下の通りです:

<div>
	<!-- ここにコンテンツが入ります -->
</div>

divの中には、段落、見出し、画像、さらには他のdiv要素など、他のHTML要素を追加することができます。 

divタグを使用して、ヘッダー、メインコンテンツエリア、およびフッターを含むシンプルなレイアウトを作成する方法の例を以下に示します。

<div>
	<h1>Header</h1>
</div>
<div>
	<p>Main content goes here.</p>
</div>
<div>
	<p>Footer</p>
</div>
challenge icon

チャレンジ

簡単

HTMLドキュメント内に、3つのdiv要素を順に作成してください。 

divの中に、好きな映画の名前を含むpタグを追加してください。

チートシート

div タグを使用して要素をグループ化し、コンテンツをブロックに整理します:

<div>
	<!-- ここにコンテンツが入ります -->
</div>

div の中には、段落、見出し、画像、その他の div 要素など、他の HTML 要素を入れ子にすることができます:

<div>
	<h1>Header</h1>
</div>
<div>
	<p>Main content goes here.</p>
</div>
<div>
	<p>Footer</p>
</div>

自分で試してみよう

<!DOCTYPE html>
<html>
    <body>
        <!-- ここにコードを書いてください -->
    </body>
</html>
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

Fundamentalsのすべてのレッスン