新人エンジニアのための div 要素完全ガイド

<!-- 基本的なdivの使用例 -->
<div>
  ここにコンテンツが入ります
</div>

<!-- 関連するコンテンツをグループ化する -->
<div class="product-card">
  <h2>商品名</h2>
  <p>商品の説明文がここに入ります。</p>
  <img src="product.jpg" alt="商品画像">
  <button>カートに追加</button>
</div>

<div class="container">
  <p>この段落は特別なスタイルが適用されます。</p>
</div>

/* divに対してスタイルを適用 */
.container {
  /* 幅を設定 */
  width: 80%;
  /* 中央揃え */
  margin: 0 auto;
  /* 背景色 */
  background-color: #f5f5f5 ;
  /* 内部の余白 */
  padding: 20px;
  /* 境界線 */
  border: 1px solid #ddd ;
  /* 角を丸く */
  border-radius: 5px;
}

<div class="page-layout">
  <div class="header">ヘッダー</div>
  <div class="main-content">メインコンテンツ</div>
  <div class="sidebar">サイドバー</div>
  <div class="footer">フッター</div>
</div>

/* レイアウト構築のためのCSS */
.page-layout {
  /* グリッドレイアウトを適用 */
  display: grid;
  /* グリッドテンプレートを定義 */
  grid-template-areas:
    "header header"
    "main sidebar"
    "footer footer";
  /* 列の幅を設定 */
  grid-template-columns: 3fr 1fr;
  /* 行の高さを設定 */
  grid-template-rows: auto 1fr auto;
  /* グリッド間の間隔 */
  gap: 20px;
  /* 最小の高さ（画面いっぱい） */
  min-height: 100vh;
}

/* 各セクションのグリッドエリアを指定 */
.header { grid-area: header; }
.main-content { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

<!-- クラス名の良い例 -->
<div class="product-card">...</div>
<div class="user-profile">...</div>
<div class="navigation-menu">...</div>

<!-- クラス名の悪い例 -->
<div class="div1">...</div>
<div class="red-box">...</div>
<div class="stuff">...</div>

<!-- 非セマンティックな使用（避けるべき） -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="footer">...</div>

<!-- セマンティックな使用（推奨） -->
<header>...</header>
<nav>...</nav>
<footer>...</footer>

<!-- 避けるべき深いネスト -->
<div class="container">
  <div class="wrapper">
    <div class="box">
      <div class="content">
        <p>テキスト</p>
      </div>
    </div>
  </div>
</div>

<!-- 改善されたバージョン -->
<div class="container">
  <div class="content-box">
    <p>テキスト</p>
  </div>
</div>

<div class="flex-container">
  <div class="flex-item">アイテム1</div>
  <div class="flex-item">アイテム2</div>
  <div class="flex-item">アイテム3</div>
</div>

.flex-container {
  /* フレックスボックスレイアウトを適用 */
  display: flex;
  /* 横方向に並べる */
  flex-direction: row;
  /* 折り返し許可 */
  flex-wrap: wrap;
  /* 子要素の間隔 */
  gap: 10px;
}

.flex-item {
  /* フレックス成長係数 */
  flex-grow: 1;
  /* 最小幅を設定 */
  min-width: 200px;
  /* 内部の余白 */
  padding: 20px;
  /* 背景色 */
  background-color: #e0f7fa ;
}

<div class="grid-container">
  <div class="grid-item">アイテム1</div>
  <div class="grid-item">アイテム2</div>
  <div class="grid-item">アイテム3</div>
  <div class="grid-item">アイテム4</div>
</div>

.grid-container {
  /* グリッドレイアウトを適用 */
  display: grid;
  /* 列の設定：最小200px、自動調整 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 行間の間隔 */
  grid-gap: 20px;
}

.grid-item {
  /* 内部の余白 */
  padding: 20px;
  /* 背景色 */
  background-color: #e8f5e9 ;
}

.container {
  /* 基本スタイル */
  width: 100%;
  padding: 15px;
}

/* デスクトップ向けスタイル */
@media (min-width: 768px) {
  .container {
    /* デスクトップでの幅 */
    width: 80%;
    /* 中央揃え */
    margin: 0 auto;
    /* より大きな余白 */
    padding: 30px;
  }
}

<!-- 避けるべき例 -->
<div class="container">
  <div class="title-wrapper">
    <div class="title">
      <h1>見出し</h1>
    </div>
  </div>
</div>

<!-- 改善された例 -->
<div class="container">
  <h1 class="title">見出し</h1>
</div>

<!-- 避けるべき例 -->
<div class="button" onclick="submit()">送信</div>

<!-- 改善された例 -->
<button onclick="submit()">送信</button>

/* 避けるべき例 */
div {
  background-color: blue;
}
.container div {
  background-color: red;
} #special -div {
  background-color: green;
}

/* 改善された例 */
.blue-bg {
  background-color: blue;
}
.red-bg {
  background-color: red;
}
.green-bg {
  background-color: green;
}

<div class="card">
  <div class="card-header">
    <h3>カードタイトル</h3>
  </div>
  <div class="card-body">
    <p>カードのコンテンツがここに入ります。</p>
  </div>
  <div class="card-footer">
    <button>詳細を見る</button>
  </div>
</div>

.card {
  /* 幅を設定 */
  width: 300px;
  /* 背景色 */
  background-color: white;
  /* 影を追加 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  /* 角を丸く */
  border-radius: 8px;
  /* オーバーフローを隠す */
  overflow: hidden;
  /* マージン */
  margin: 15px;
}

.card-header {
  /* 内部の余白 */
  padding: 15px;
  /* 背景色 */
  background-color: #f8f9fa ;
  /* 下部の境界線 */
  border-bottom: 1px solid #eee ;
}

.card-body {
  /* 内部の余白 */
  padding: 15px;
}

.card-footer {
  /* 内部の余白 */
  padding: 15px;
  /* 背景色 */
  background-color: #f8f9fa ;
  /* 上部の境界線 */
  border-top: 1px solid #eee ;
  /* フッター内の要素を右揃え */
  text-align: right;
}

<div class="navbar">
  <div class="logo">
    <img src="logo.png" alt="会社ロゴ">
  </div>
  <div class="nav-links">
    <a href="/">ホーム</a>
    <a href="/products">製品</a>
    <a href="/services">サービス</a>
    <a href="/about">会社概要</a>
    <a href="/contact">お問い合わせ</a>
  </div>
  <div class="nav-buttons">
    <button class="login-btn">ログイン</button>
    <button class="signup-btn">新規登録</button>
  </div>
</div>

.navbar {
  /* フレックスボックスレイアウトを適用 */
  display: flex;
  /* 子要素を横方向に配置 */
  flex-direction: row;
  /* 両端揃え */
  justify-content: space-between;
  /* 中央揃え */
  align-items: center;
  /* 内部の余白 */
  padding: 0 20px;
  /* 高さを設定 */
  height: 60px;
  /* 背景色 */
  background-color: white;
  /* 影を追加 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.logo img {
  /* 高さを設定 */
  height: 40px;
}

.nav-links {
  /* フレックスボックスレイアウトを適用 */
  display: flex;
  /* 子要素の間隔 */
  gap: 20px;
}

.nav-links a {
  /* テキストの装飾を削除 */
  text-decoration: none;
  /* テキストの色 */
  color: #333 ;
}

.nav-buttons {
  /* 子要素の間隔 */
  display: flex;
  gap: 10px;
}

/* モバイル向けスタイル */
@media (max-width: 768px) {
  .navbar {
    /* 縦方向に配置 */
    flex-direction: column;
    /* 高さを自動調整 */
    height: auto;
    /* 内部の余白 */
    padding: 10px;
  }
  
  .nav-links, .nav-buttons {
    /* 幅いっぱいに広げる */
    width: 100%;
    /* 中央揃え */
    justify-content: center;
    /* 余白を追加 */
    margin: 10px 0;
  }
}

<!-- HTML構造：同じclass構造だが異なるテーマカラーを持つ2つのコンテナ -->
<div class="theme-container" style="--theme-color: #3498db ;">
  <!-- インラインスタイルでテーマカラー変数を上書き（青系） -->
  <div class="themed-card">
    <!-- このカードは青系の背景色を持つ -->
    <h3>テーマカード1</h3>
    <p>テーマカラーを変数で制御</p>
  </div>
</div>

<div class="theme-container" style="--theme-color: #e74c3c ;">
  <!-- インラインスタイルでテーマカラー変数を上書き（赤系） -->
  <div class="themed-card">
    <!-- このカードは赤系の背景色を持つ -->
    <h3>テーマカード2</h3>
    <p>違うテーマカラーを適用</p>
  </div>
</div>

.theme-container {
  /* CSS変数の定義：--で始まる名前がカスタムプロパティ（変数）を表す */
  --theme-color: #2ecc71 ;  /* デフォルト値として緑系の色を設定 */
  
  /* コンテナ自体の内部余白を設定 */
  padding: 20px;
  
  /* このコンテナ内のすべての要素は、明示的に上書きされない限り
     この変数を継承する（CSS変数のスコープはDOM階層に従う） */
}

.themed-card {
  /* var()関数でCSS変数の値を参照する */
  /* 最も近い親要素またはそれ自身で定義された--theme-colorの値を使用 */
  background-color: var(--theme-color);
  
  /* カスタムプロパティを使用すると、ダークモードやテーマ切替などにも
     簡単に対応できる。一箇所の変更で複数の要素に影響を与えられる */
  color: white;  /* テキストは常に白にして視認性を確保 */
  
  /* カードの見た目を整える */
  padding: 15px;  /* 内部の余白 */
  border-radius: 8px;  /* 角を丸くする */
  
  /* 変数は他のスタイルと組み合わせ可能 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  /* 軽い影をつける */
  
  /* CSS変数はメディアクエリ内でも再定義できる（レスポンシブ対応） */
  margin-bottom: 15px;  /* カード間の余白 */
  
  /* CSS変数は計算にも使用できる */
  /* 例: border: 2px solid var(--theme-color); なども可能 */
}

/* メディアクエリ内でもCSS変数を再定義できる（レスポンシブ対応） */
@media (max-width: 768px) {
  .theme-container {
    /* モバイル向けに変数の値を変更（例：より暗い色） */
    --theme-color: color-mix(in srgb, var(--theme-color), black 20%);
    
    /* モバイル向けに余白を調整 */
    padding: 10px;
  }
}

/* グローバルなCSS変数を:rootに定義 */
:root {
  /* ベースカラー変数 */
  --primary-color: #3498db ;
  --secondary-color: #2ecc71 ;
  --accent-color: #e74c3c ;
  
  /* 派生色変数：別の変数を使って定義 */
  --primary-dark: color-mix(in srgb, var(--primary-color), black 20%);
  --primary-light: color-mix(in srgb, var(--primary-color), white 20%);
  
  /* サイズに関する変数 */
  --spacing-unit: 8px;
  --border-radius: 4px;
  
  /* フォントに関する変数 */
  --font-main: 'Helvetica', sans-serif;
  --font-size-normal: 16px;
}

/* 高度な例：テーマ変数を使った複雑なスタイリング */
.complex-card {
  /* 基本的なスタイル */
  background-color: white;
  /* 変数を計算の中で使用 */
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius);
  
  /* 複合的なスタイリング */
  border-left: 4px solid var(--primary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* フォントにも変数を適用 */
  font-family: var(--font-main);
  font-size: var(--font-size-normal);
}

/* ホバー時の効果も変数を使って定義 */
.complex-card:hover {
  /* ホバー時に背景色を変更 */
  background-color: var(--primary-light);
  /* ホバー時に影を強調 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

<!-- データ属性を持つ商品グリッド -->
<div class="product-grid">
  <!-- 商品1：電子機器カテゴリー、価格データを持つ -->
  <div class="product" data-category="electronics" data-price="499">
    <!-- data-categoryとdata-priceは見た目に影響しないが、
         CSSとJavaScriptから参照可能な追加データ -->
    <h3>スマートフォン</h3>
    <p>¥49,800</p>
  </div>
  
  <!-- 商品2：書籍カテゴリー -->
  <div class="product" data-category="books" data-price="15">
    <!-- data-priceは表示価格とは別の内部データ（ソート用など）
         実際の表示はp要素で行う（SEOやアクセシビリティの観点） -->
    <h3>プログラミング入門書</h3>
    <p>¥1,500</p>
  </div>
  
  <!-- 商品3：衣類カテゴリー -->
  <div class="product" data-category="clothing" data-price="30">
    <!-- 同一構造だが異なるデータを持つことで、
         フィルタリングやソート機能の実装が容易になる -->
    <h3>デザインTシャツ</h3>
    <p>¥3,000</p>
  </div>
</div>

/* データ属性セレクタを使ったスタイリング */
/* 属性セレクタは[]で囲み、要素を選択できる */

/* 基本的な商品スタイル（すべての商品に適用） */
.product {
  /* レイアウト設定 */
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  /* トランジション効果（アニメーション） */
  transition: transform 0.3s, box-shadow 0.3s;
}

/* ホバー効果（マウスが上に来た時） */
.product:hover {
  /* 少し浮き上がる効果 */
  transform: translateY(-5px);
  /* 影を強調 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* データ属性に基づくスタイル：電子機器カテゴリー */
.product[data-category="electronics"] {
  /* 属性値によって異なる背景色を適用
     ユーザーは直感的にカテゴリーを区別できる */
  background-color: #e8f5e9 ;
  
  /* カテゴリー特有のアクセント色を設定 */
  border-left: 4px solid #4CAF50 ;
}

/* データ属性に基づくスタイル：書籍カテゴリー */
.product[data-category="books"] {
  /* 別のカテゴリーには別の色調を適用 */
  background-color: #e3f2fd ;
  
  /* カテゴリーごとの視覚的一貫性を持たせる */
  border-left: 4px solid #2196F3 ;
}

/* データ属性に基づくスタイル：衣類カテゴリー */
.product[data-category="clothing"] {
  /* 温かみのある色調を衣類カテゴリーに適用 */
  background-color: #fff8e1 ;
  
  /* 視覚的な差別化と統一感の両立 */
  border-left: 4px solid #FFC107 ;
}

/* 複合セレクタ：高価格商品のスタイル（価格データで条件分岐） */
.product[data-price="499"], 
.product[data-price^="4"], 
.product[data-price$="99"] {
  /* 特定の価格帯の商品にプレミアム感を出す */
  border-top: 2px solid gold;
}

/* 属性セレクタには様々な演算子が使える：
   - [data-category="books"] 完全一致
   - [data-price^="4"]      前方一致（4で始まる）
   - [data-price$="99"]     後方一致（99で終わる）
   - [data-price*="9"]      部分一致（9を含む）
   - [data-price~="sale"]   空白区切りの単語一致
   - [data-price|="en"]     ハイフン区切りの単語前方一致
*/

// データ属性を使ったフィルタリング
const filterByCategory = (category) => {
  // すべての商品要素を取得
  const products = document.querySelectorAll('.product');
  
  // 各商品に対して処理
  products.forEach(product => {
    // dataset（データ属性のコレクション）からカテゴリーを取得
    // product.dataset.category は data-category の値を返す
    // JavaScript ではケバブケース(data-category)はキャメルケース(dataset.category)に変換される
    
    if (product.dataset.category === category || category === 'all') {
      // 条件に合致する商品を表示
      // カテゴリーが一致するか、または「すべて」が選択された場合
      product.style.display = 'block';
    } else {
      // 条件に合致しない商品を非表示
      product.style.display = 'none';
      
      // transitionと組み合わせることで、アニメーション効果も可能
      // product.style.opacity = '0';
      // setTimeout(() => {product.style.display = 'none'}, 300);
    }
  });
};

// データ属性を使った並び替え機能（価格順）
const sortByPrice = (ascending = true) => {
  // 親コンテナを取得
  const productGrid = document.querySelector('.product-grid');
  
  // すべての商品要素を配列に変換
  const products = Array.from(document.querySelectorAll('.product'));
  
  // データ属性の価格に基づいて並べ替え
  products.sort((a, b) => {
    // dataset.priceは文字列なので数値に変換する必要がある
    const priceA = parseFloat(a.dataset.price);
    const priceB = parseFloat(b.dataset.price);
    
    // 昇順または降順で並べ替え
    return ascending ? priceA - priceB : priceB - priceA;
  });
  
  // DOMから一時的に削除して再配置（パフォーマンス向上）
  products.forEach(product => productGrid.appendChild(product));
};

// データ属性を使った動的スタイリング
const applyPromotionStyles = () => {
  // セール対象の商品にスタイルを適用
  document.querySelectorAll('.product[data-on-sale="true"]').forEach(product => {
    // 動的にCSSクラスを追加
    product.classList.add('sale-item');
    
    // または直接スタイルを適用
    product.style.position = 'relative';
    
    // セールバッジを動的に追加
    const saleBadge = document.createElement('div');
    saleBadge.className = 'sale-badge';
    saleBadge.textContent = 'SALE';
    product.appendChild(saleBadge);
  });
};