HTML - divタグ

概要

divタグは、HTMLにおける基本的なブロックレベル要素の1つである。
コンテンツをグループ化して、論理的なセクションを作成するために使用する。

セマンティクスの観点から、header、nav、main、article、section等の意味的要素の使用することを推奨する。

divタグは、これらの意味的要素で表現できない場合のフォールバックとして使用するのが最適である。

 <!-- 基本的な使用方法 -->
 <div>
    <p>コンテンツ</p>
    <span>他の要素</span>
 </div>

divタグの特徴を以下に示す。

• ブロックレベル要素として、デフォルトで前後に改行が入る。
• CSSと組み合わせて、レイアウトやスタイリングの基礎として機能する。
• class属性やid属性を使用して、特定のスタイルやJavaScriptとの連携が可能である。

 <!-- スタイリングの例 -->
 <div class="container">
    <div class="header">ヘッダー</div>
    <div class="content">メインコンテンツ</div>
 </div>
 
 <style>
 .container {
    width: 80%;
    margin: 0 auto;
 }
 
 .header {
    background-color: #f0f0f0;
    padding: 20px;
 }
 </style>