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>チャレンジ
簡単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>このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。