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>

このような構造化されたマークアップにより、以下に示すメリットが得られる。

• コードの可読性が向上する。
• 保守性が高まる。
• レスポンシブデザインの実装が容易になる。
• 将来的な拡張性が確保される。

使用例

以下の例では、一般的なWebサイトのレイアウトを示している。

各divには明確な役割があり、それぞれにクラス名が付けられている。
また、コメントによって各セクションの目的が明確になっており、CSSでは基本的なレイアウトとスタイリングを定義している。

 <!-- サイト全体を包むコンテナ -->
 <div class="site-wrapper">
   <!-- ヘッダーセクション: ロゴとナビゲーションを含む -->
   <div class="header">
     <!-- ロゴを配置するエリア -->
     <div class="logo">
       <img src="logo.png" alt="サイトロゴ">
     </div>
 
     <!-- ナビゲーションメニュー -->
     <div class="nav-menu">
       <a href="#home">ホーム</a>
       <a href="#about">概要</a>
       <a href="#contact">お問い合わせ</a>
     </div>
   </div>
 
   <!-- メインコンテンツエリア: 2カラムレイアウト -->
   <div class="main-content">
     <!-- 左カラム: 記事一覧 -->
     <div class="content-left">
       <!-- 記事カード -->
       <div class="article-card">
         <h2>記事タイトル</h2>
         <p>記事の概要テキストがここに入ります。</p>
       </div>
     </div>
 
     <!-- 右カラム: サイドバー -->
     <div class="content-right">
       <!-- プロフィールウィジェット -->
       <div class="profile-widget">
         <img src="profile.jpg" alt="プロフィール画像">
         <p>プロフィール説明文</p>
       </div>
     </div>
   </div>
 
   <!-- フッタセクション -->
   <div class="footer">
     <!-- コピーライト情報 -->
     <div class="copyright">
       <p>&copy; 2024 サンプルサイト</p>
     </div>
   </div>
 </div>
 
 <!-- スタイル定義 -->
 <style>
   /* サイト全体のコンテナスタイル */
   .site-wrapper {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 15px;
   }
 
   /* ヘッダセクションのスタイル */
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 0;
     border-bottom: 1px solid #eee;
   }
 
   /* メインコンテンツエリアの2カラムレイアウト */
   .main-content {
     display: flex;
     gap: 30px;
     margin: 40px 0;
   }
 
   /* 左カラムのスタイル (記事一覧) */
   .content-left {
     flex: 2;  /* 右カラムより広いスペースを確保 */
   }
 
   /* 右カラムのスタイル (サイドバー) */
   .content-right {
     flex: 1;
   }
 
   /* フッタセクションのスタイル */
   .footer {
     text-align: center;
     padding: 20px 0;
     background-color: #f5f5f5;
   }
 </style>