【HTML】sectionタグの使い方：divやarticleとの違いとテンプレート

2026年4月10日2026年5月6日

Webページの論理的な構造を示すHTMLの<section>タグは、SEOやアクセシビリティを向上させる重要な要素です。

本記事では、混同しがちなdivやarticleとの使い分け、実務で使えるレイアウトテンプレートを解説します。

また、HTMLに関するカテゴリーページから学びたい内容を決めたい人は、以下のHTMLページをご確認ください。

HTML | Code Stock

sectionタグとは：意味と役割

HTML5で導入されたセマンティックタグの一つである「sectionタグ」は、Webページの構造を論理的に整理し、検索エンジンに正しく内容を伝える要素です。

ここでは、sectionタグの意味と見出しとの必須関係、SEOにもたらす具体的なメリットについて解説します。

sectionタグとは：意味と役割

sectionタグの定義と見出し（h1〜h6）の必須性
SEOやアクセシビリティへの影響とメリット

sectionタグの定義と見出し（h1〜h6）の必須性

<section>タグは、レイアウトのための箱ではありません。

文章やコンテンツの「意味的なまとまり（テーマごとの区画）」を示すタグです。

本の「第1章」「第2章」や、会社の「事業内容」「会社概要」といった区切りに該当します。

<section>の中には、見出しタグ（h2 〜 h6）を含めます。

※ページ全体の主題を表すh1は通常<main>や<header>で使い、各<section>の見出しはh2以降を使うのが一般的です。

見出しが付けられないような、単なるレイアウト目的のまとまりには、意味を持たない<div>を使用します。

📚 sectionタグと見出しの必須関係

❌ 悪い例（見出しがない・デザイン目的の箱）

ただ背景をグレーにするためにsectionタグを使っています。テーマ（見出し）がないため不適切です。

⭕️ 正しい使い方（見出しを持つテーマのまとまり）

企業理念（見出し）

私たちはWeb技術を通じて社会に貢献します。この区画は「企業理念」という明確なテーマを持っています。

<!– ❌ divで書くべき間違ったsection –>
<section class=”gray-bg”>
  <!– 見出し(hタグ)が存在しない –>
  <p>背景をグレーにするための箱です。</p>
</section>

<!– ⭕️ 検索エンジンが正しく理解できるsection –>
<section>
  <h2>企業理念</h2> <!– ★必ずテーマとなる見出しを入れる –>
  <p>私たちは…</p>
</section>

HTMLコード表示

<div class="hsec-def1-wrapper">
  
  <div class="hsec-def1-demo-area">
    <div class="hsec-def1-box">
      <div class="hsec-def1-label">📚 sectionタグと見出しの必須関係</div>
      
      <div class="hsec-def1-visual">
        <p style="font-size:12px; color:#dc3545; font-weight:bold; margin:0 0 5px 0;">❌ 悪い例（見出しがない・デザイン目的の箱）</p>
        <div class="hsec-def1-bad-block">
          <p style="margin: 0; font-size: 13px; color: #666;">
            ただ背景をグレーにするためにsectionタグを使っています。テーマ（見出し）がないため不適切です。
          </p>
        </div>

        <p style="font-size:12px; color:#198754; font-weight:bold; margin:20px 0 5px 0;">⭕️ 正しい使い方（見出しを持つテーマのまとまり）</p>
        <div class="hsec-def1-good-block">
          <div class="hsec-def1-good-heading">企業理念（見出し）</div>
          <p style="margin: 0; font-size: 13px; color: #333;">
            私たちはWeb技術を通じて社会に貢献します。この区画は「企業理念」という明確なテーマを持っています。
          </p>
        </div>
      </div>

      <div class="hsec-def1-code">
        <!-- ❌ divで書くべき間違ったsection --><br>
        <span class="hsec-def1-hl-red"><section class="gray-bg"></span><br>
          <!-- 見出し(hタグ)が存在しない --><br>
          <p>背景をグレーにするための箱です。</p><br>
        <span class="hsec-def1-hl-red"></section></span><br><br>
        <!-- ⭕️ 検索エンジンが正しく理解できるsection --><br>
        <span class="hsec-def1-hl-green"><section></span><br>
          <span class="hsec-def1-hl-blue"><h2></span>企業理念<span class="hsec-def1-hl-blue"></h2></span> <!-- ★必ずテーマとなる見出しを入れる --><br>
          <p>私たちは...</p><br>
        <span class="hsec-def1-hl-green"></section></span>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.hsec-def1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hsec-def1-demo-area {
  display: flex;
  justify-content: center;
}

.hsec-def1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hsec-def1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hsec-def1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 悪い例のスタイル */
.hsec-def1-bad-block {
  background-color: #e9ecef;
  padding: 15px;
  border: 1px dashed #dc3545;
  border-radius: 4px;
  position: relative;
}

.hsec-def1-bad-block::before {
  content: "<section>";
  position: absolute;
  top: -10px;
  right: 10px;
  background-color: #dc3545;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}

/* 良い例のスタイル */
.hsec-def1-good-block {
  background-color: #fff;
  padding: 15px;
  border: 2px solid #198754;
  border-radius: 4px;
  position: relative;
}

.hsec-def1-good-block::before {
  content: "<section>";
  position: absolute;
  top: -10px;
  right: 10px;
  background-color: #198754;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}

.hsec-def1-good-heading {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #0d6efd;
  border-bottom: 1px solid #cfe2ff;
  padding-bottom: 5px;
}

.hsec-def1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hsec-def1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hsec-def1-hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hsec-def1-hl-blue {
  color: #61afef;
  font-weight: bold;
}

見出しタグの使い方も詳しく知りたい人は「【html】見出しタグの使い方：h1~h6の使い分けとデザイン例」を一読ください。

【html】見出しタグの使い方：h1~h6の使い分けとデザイン例

SEOやアクセシビリティへの影響とメリット

<section>タグを正しく使う理由は、Googleの検索エンジンや視覚障害者が使う音声読み上げソフトに対して、ページの構造を正確に理解させることです。

<section>はマトリョーシカのように入れ子にして使うことができます。

大きな<section>（h2）の中に、小さな<section>（h3）を作ることで、検索エンジンは「大テーマの中に小テーマがある」と完璧に理解します。

高度なアクセシビリティ対応として、セクションが何の役割を持っているかを機械に伝えるため、aria-labelledby属性を使って<section>自身と内部の<h2>を紐付ける技術が使われます。

🔍 SEOに強い入れ子とアクセシビリティ

階層構造（マトリョーシカ）の視覚化

サービス概要（h2）

当社の主要な3つのサービスをご紹介します。

Web制作（h3）

コーポレートサイトの構築

SEO対策（h3）

検索順位の向上支援

<!– 💡 完璧なアウトライン（入れ子構造） –>
<section>
  <h2>サービス概要</h2>

  <!– h2の中にh3のsectionを作る（正しい階層） –>
  <section>
    <h3>Web制作</h3>
  </section>
</section>

<!– 💡 さらにアクセシビリティを高めるプロの技 –>
<!– sectionと見出しをidとaria-labelledbyで強力に紐付ける –>
<section aria-labelledby=”sec-title”>
  <h2 id=”sec-title”>会社案内</h2>
</section>

HTMLコード表示

<div class="hsec-seo1-wrapper">
  
  <div class="hsec-seo1-demo-area">
    <div class="hsec-seo1-box">
      <div class="hsec-seo1-label">🔍 SEOに強い入れ子とアクセシビリティ</div>
      
      <div class="hsec-seo1-visual">
        <p style="font-size:12px; color:#333; font-weight:bold; margin:0 0 10px 0;">階層構造（マトリョーシカ）の視覚化</p>
        
        <section class="hsec-seo1-outer-section">
          <div class="hsec-seo1-outer-heading">サービス概要（h2）</div>
          <p style="font-size:12px; margin:0 0 10px 0;">当社の主要な3つのサービスをご紹介します。</p>
          
          <div style="display:flex; gap:10px;">
            <section class="hsec-seo1-inner-section">
              <div class="hsec-seo1-inner-heading">Web制作（h3）</div>
              <p style="font-size:11px; margin:0; color:#666;">コーポレートサイトの構築</p>
            </section>
            
            <section class="hsec-seo1-inner-section">
              <div class="hsec-seo1-inner-heading">SEO対策（h3）</div>
              <p style="font-size:11px; margin:0; color:#666;">検索順位の向上支援</p>
            </section>
          </div>
        </section>
      </div>

      <div class="hsec-seo1-code">
        <!-- 💡 完璧なアウトライン（入れ子構造） --><br>
        <span class="hsec-seo1-hl-green"><section></span><br>
          <h2>サービス概要</h2><br><br>
          <!-- h2の中にh3のsectionを作る（正しい階層） --><br>
          <span class="hsec-seo1-hl-green"><section></span><br>
            <h3>Web制作</h3><br>
          <span class="hsec-seo1-hl-green"></section></span><br>
        <span class="hsec-seo1-hl-green"></section></span><br><br>
        <!-- 💡 さらにアクセシビリティを高めるプロの技 --><br>
        <!-- sectionと見出しをidとaria-labelledbyで強力に紐付ける --><br>
        <section <span class="hsec-seo1-hl-blue">aria-labelledby="sec-title"</span>><br>
          <h2 <span class="hsec-seo1-hl-blue">id="sec-title"</span>>会社案内</h2><br>
        </section>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.hsec-seo1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hsec-seo1-demo-area {
  display: flex;
  justify-content: center;
}

.hsec-seo1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}

.hsec-seo1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hsec-seo1-visual {
  background-color: #e9ecef;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 大セクションのスタイル */
.hsec-seo1-outer-section {
  background-color: #fff;
  border: 2px solid #0d6efd;
  padding: 15px;
  border-radius: 4px;
  position: relative;
}

.hsec-seo1-outer-section::before {
  content: "親 <section>";
  position: absolute;
  top: -12px;
  left: 10px;
  background-color: #0d6efd;
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: bold;
}

.hsec-seo1-outer-heading {
  margin: 5px 0 10px 0;
  font-size: 16px;
  color: #084298;
}

/* 小セクションのスタイル */
.hsec-seo1-inner-section {
  flex: 1;
  background-color: #f8f9fa;
  border: 1px dashed #198754;
  padding: 10px;
  border-radius: 4px;
  position: relative;
}

.hsec-seo1-inner-section::after {
  content: "子 <section>";
  position: absolute;
  bottom: -10px;
  right: 5px;
  background-color: #198754;
  color: #fff;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
}

.hsec-seo1-inner-heading {
  margin: 0 0 5px 0;
  font-size: 14px;
  color: #0f5132;
}

.hsec-seo1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hsec-seo1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hsec-seo1-hl-blue {
  color: #61afef;
  font-weight: bold;
}

HTMLにおける見出しタグの使い方を詳しく知りたい人は「【html】見出しタグの使い方：h1~h6の使い分けとデザイン例」を一読ください。

【html】見出しタグの使い方：h1~h6の使い分けとデザイン例

sectionタグとdivタグ・articleタグの違い

学習を進める中で、一度は考えるのが「意味を持ったレイアウトタグ（セマンティックタグ）の使い分け」です。

特に、画面上の見た目はどれも「四角い箱」になるため、「結局どこをどれで囲めばいいの？」と混乱します。

ここでは、sectionタグとdivタグの違いやsectionタグとarticleタグの違い、「mainタグ・asideタグ」の組み合わせ方を解説します。

sectionタグとdivタグ・articleタグの違い

sectionタグとdivタグの違い
sectionタグとarticleタグの違い
mainタグ・asideタグとの正しい組み合わせと入れ子

sectionタグとdivタグの違い

sectionタグとdivタグの使い分けは、コーディングにおいて基本でありながらミスが起きやすいポイントです。

<section>：見出し（hタグ）を伴う、意味やテーマを持ったコンテンツのまとまり。
<div>：CSSでデザイン（横並び、余白、背景色など）を当てるだけの意味を持たない透明な箱。

📦 div（装飾の箱）とsection（意味の箱）

横並びレイアウトの正しい構造

<div> (Flexbox用)

Webデザイン

UI/UXを考慮した設計を行います。

システム開発

堅牢なバックエンドを構築します。

<!– 💡 divはレイアウト、sectionは意味 –>
<div class=”flex-container”> <!– 横並びにするためだけの箱 –>

  <section>
    <h3>Webデザイン</h3> <!– ★見出しがあるからsection –>
    <p>…</p>
  </section>

  <section>
    <h3>システム開発</h3>
    <p>…</p>
  </section>

</div>

HTMLコード表示

<div class="hsec-diff1-wrapper">
  
  <div class="hsec-diff1-demo-area">
    <div class="hsec-diff1-box">
      <div class="hsec-diff1-label">📦 div（装飾の箱）とsection（意味の箱）</div>
      
      <div class="hsec-diff1-visual">
        <p style="font-size:12px; color:#333; font-weight:bold; margin:0 0 10px 0;">横並びレイアウトの正しい構造</p>
        
        <div class="hsec-diff1-layout-div">
          <span class="hsec-diff1-tag-badge" style="background:#6c757d;"><div> (Flexbox用)</span>
          
          <section class="hsec-diff1-meaning-section">
            <span class="hsec-diff1-tag-badge" style="background:#198754;"><section></span>
            <div class="hsec-diff1-heading">Webデザイン</div>
            <p class="hsec-diff1-text">UI/UXを考慮した設計を行います。</p>
          </section>

          <section class="hsec-diff1-meaning-section">
            <span class="hsec-diff1-tag-badge" style="background:#198754;"><section></span>
            <div class="hsec-diff1-heading">システム開発</div>
            <p class="hsec-diff1-text">堅牢なバックエンドを構築します。</p>
          </section>
        </div>
      </div>

      <div class="hsec-diff1-code">
        <!-- 💡 divはレイアウト、sectionは意味 --><br>
        <span class="hsec-diff1-hl-blue"><div class="flex-container"></span> <!-- 横並びにするためだけの箱 --><br><br>
          <span class="hsec-diff1-hl-green"><section></span><br>
            <h3>Webデザイン</h3> <!-- ★見出しがあるからsection --><br>
            <p>...</p><br>
          <span class="hsec-diff1-hl-green"></section></span><br><br>
          <span class="hsec-diff1-hl-green"><section></span><br>
            <h3>システム開発</h3><br>
            <p>...</p><br>
          <span class="hsec-diff1-hl-green"></section></span><br><br>
        <span class="hsec-diff1-hl-blue"></div></span>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.hsec-diff1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hsec-diff1-demo-area {
  display: flex;
  justify-content: center;
}

.hsec-diff1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}

.hsec-diff1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hsec-diff1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* divモック（レイアウト用） */
.hsec-diff1-layout-div {
  display: flex;
  gap: 15px;
  background-color: #e9ecef;
  border: 2px dashed #6c757d;
  padding: 30px 15px 15px 15px;
  border-radius: 4px;
  position: relative;
}

.hsec-diff1-tag-badge {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-bottom-right-radius: 4px;
}

/* sectionモック（意味の箱） */
.hsec-diff1-meaning-section {
  flex: 1;
  background-color: #fff;
  border: 2px solid #198754;
  padding: 25px 10px 10px 10px;
  border-radius: 4px;
  position: relative;
}

.hsec-diff1-heading {
  margin: 0 0 5px 0;
  font-size: 14px;
  color: #0f5132;
}

.hsec-diff1-text {
  margin: 0;
  font-size: 11px;
  color: #495057;
}

.hsec-diff1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hsec-diff1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hsec-diff1-hl-blue {
  color: #61afef;
  font-weight: bold;
}

divタグの使い方を詳しく知りたい人は「【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾」を一読ください。

【HTML】divタグの使い方：横並びや中央寄せ・CSS装飾

sectionタグとarticleタグの違い

sectionタグとarticleタグの使い分けも議論になりやすいテーマです。

どちらも見出しを伴う「意味のあるまとまり」ですが、「独立性」に違いがあります。

<article>
ブログの1記事、ニュースの1件など、「その部分だけを切り取って他サイトに掲載しても意味が通じるもの」。
<section>
会社の事業内容、ブログ記事の中の第1章など、「親となるテーマの中の一つの区画（パーツ）」にすぎないもの。
切り取ると文脈が失われるもの。

📝 article（独立）とsection（章）の使い分け

ブログ記事ページの理想的な構造

<article> (独立した記事)

HTML完全ガイド（h2）

HTMLの基礎から応用までを解説します。

<section> (記事内の章)

第1章：タグの基礎（h3）

開始タグと終了タグについて…

<section> (記事内の章)

第2章：属性の使い方（h3）

classやidの役割とは…

<!– 💡 記事全体は自己完結しているので article –>
<article>
  <h1>HTML完全ガイド</h1>

  <!– 💡 記事の中の「章」は単独では成立しないので section –>
  <section>
    <h2>第1章：タグの基礎</h2>
    <p>…</p>
  </section>

  <section>
    <h2>第2章：属性の使い方</h2>
    <p>…</p>
  </section>
</article>

HTMLコード表示

<div class="hsec-diff2-wrapper">
  
  <div class="hsec-diff2-demo-area">
    <div class="hsec-diff2-box">
      <div class="hsec-diff2-label">📝 article（独立）とsection（章）の使い分け</div>
      
      <div class="hsec-diff2-visual">
        <p style="font-size:12px; color:#333; font-weight:bold; margin:0 0 10px 0;">ブログ記事ページの理想的な構造</p>
        
        <article class="hsec-diff2-article">
          <span class="hsec-diff2-tag-badge" style="background:#0d6efd;"><article> (独立した記事)</span>
          <div class="hsec-diff2-article-title">HTML完全ガイド（h2）</div>
          <p style="font-size:12px; margin:0 0 15px 0;">HTMLの基礎から応用までを解説します。</p>
          
          <section class="hsec-diff2-section">
            <span class="hsec-diff2-tag-badge" style="background:#198754;"><section> (記事内の章)</span>
            <div class="hsec-diff2-section-title">第1章：タグの基礎（h3）</div>
            <p style="font-size:11px; margin:0; color:#495057;">開始タグと終了タグについて...</p>
          </section>

          <section class="hsec-diff2-section">
            <span class="hsec-diff2-tag-badge" style="background:#198754;"><section> (記事内の章)</span>
            <div class="hsec-diff2-section-title">第2章：属性の使い方（h3）</div>
            <p style="font-size:11px; margin:0; color:#495057;">classやidの役割とは...</p>
          </section>
        </article>
      </div>

      <div class="hsec-diff2-code">
        <!-- 💡 記事全体は自己完結しているので article --><br>
        <span class="hsec-diff2-hl-blue"><article></span><br>
          <h1>HTML完全ガイド</h1><br><br>
          <!-- 💡 記事の中の「章」は単独では成立しないので section --><br>
          <span class="hsec-diff2-hl-green"><section></span><br>
            <h2>第1章：タグの基礎</h2><br>
            <p>...</p><br>
          <span class="hsec-diff2-hl-green"></section></span><br><br>
          <span class="hsec-diff2-hl-green"><section></span><br>
            <h2>第2章：属性の使い方</h2><br>
            <p>...</p><br>
          <span class="hsec-diff2-hl-green"></section></span><br>
        <span class="hsec-diff2-hl-blue"></article></span>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.hsec-diff2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hsec-diff2-demo-area {
  display: flex;
  justify-content: center;
}

.hsec-diff2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hsec-diff2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hsec-diff2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* articleモック */
.hsec-diff2-article {
  background-color: #cfe2ff;
  border: 2px solid #0d6efd;
  padding: 25px 15px 15px 15px;
  border-radius: 4px;
  position: relative;
}

.hsec-diff2-tag-badge {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-bottom-right-radius: 4px;
}

.hsec-diff2-article-title {
  margin: 0 0 5px 0;
  font-size: 16px;
  color: #084298;
}

/* sectionモック */
.hsec-diff2-section {
  background-color: #fff;
  border: 2px dashed #198754;
  padding: 20px 10px 10px 10px;
  border-radius: 4px;
  margin-top: 10px;
  position: relative;
}

.hsec-diff2-section-title {
  margin: 0 0 5px 0;
  font-size: 13px;
  color: #0f5132;
}

.hsec-diff2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hsec-diff2-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hsec-diff2-hl-green {
  color: #98c379;
  font-weight: bold;
}

articleタグの使い方を詳しく知りたい人は「【HTML】articleタグの使い方：sectionとの違いやmain・div・asideとの使い分け」を一読ください。

【HTML】articleタグの使い方：sectionとの違いやmain・div・asideとの使い分け

mainタグ・asideタグとの正しい組み合わせと入れ子

1つのページ全体を構築する際、<section>を<main>の中にどう配置するのか、サイドバーである<aside>とどう組み合わせるのか、といった全体構造の設計が求められます。

<main>
そのページの主役となるコンテンツ全体を囲みます。
1ページに1回しか使えません。
通常、<main>の中に複数の<section>や<article>を配置します。
入れ子（ネスト）は自由
大テーマ（親section）の中に、中テーマ（子section）、小テーマ（孫section）を作って階層を深くすることは、SEO上推奨される正しいアプローチです。
各sectionにheader/footerを持てる
独立した各<section>や<article>は、独自の<header>（その章のタイトル等）や<footer>（その章のまとめや次へのリンク等）を持てます。

🏗️ main・section・asideの完璧なページ構造

<main> (ページに1つだけ)

親<section>

Webサービス一覧

子<section>

① デザイン事業

ロゴやWebサイトを制作。

<!– 💡 ページ全体の主役 –>
<main>

  <!– 💡 メインテーマ –>
  <section>
    <header><h2>サービス一覧</h2></header>

    <!– 💡 小テーマ（sectionの入れ子） –>
    <section>
      <h3>デザイン事業</h3>
    </section>
  </section>

  <!– 💡 サイドバー（補足情報） –>
  <aside>
    <h3>関連リンク</h3>
    <nav>…</nav>
  </aside>

</main>

HTMLコード表示

<div class="hsec-diff3-wrapper">
  
  <div class="hsec-diff3-demo-area">
    <div class="hsec-diff3-box">
      <div class="hsec-diff3-label">🏗️ main・section・asideの完璧なページ構造</div>
      
      <div class="hsec-diff3-visual">
        <main class="hsec-diff3-main">
          <span class="hsec-diff3-tag-badge" style="background:#e06c75;"><main> (ページに1つだけ)</span>
          
          <div style="display:flex; gap:10px; margin-top:20px;">
            <section class="hsec-diff3-outer-section">
              <span class="hsec-diff3-tag-badge" style="background:#198754;">親<section></span>
              
              <header class="hsec-diff3-header">
                <span class="hsec-diff3-tag-badge" style="background:#6c757d; font-size:8px;"><header></span>
                <div style="margin:5px 0 0 0; font-size:14px;">Webサービス一覧</div>
              </header>

              <section class="hsec-diff3-inner-section">
                <span class="hsec-diff3-tag-badge" style="background:#198754;">子<section></span>
                <div style="margin:5px 0 0 0; font-size:12px;">① デザイン事業</div>
                <p style="font-size:10px; margin:5px 0 0 0;">ロゴやWebサイトを制作。</p>
              </section>

            </section>

            <aside class="hsec-diff3-aside">
              <span class="hsec-diff3-tag-badge" style="background:#d19a66;"><aside></span>
              <div style="margin:15px 0 5px 0; font-size:11px;">関連リンク</div>
              <ul style="margin:0; padding-left:15px; font-size:10px;">
                <li>お問い合わせ</li>
                <li>資料請求</li>
              </ul>
            </aside>
          </div>
        </main>
      </div>

      <div class="hsec-diff3-code">
        <!-- 💡 ページ全体の主役 --><br>
        <span class="hsec-diff3-hl-red"><main></span><br><br>
          <!-- 💡 メインテーマ --><br>
          <span class="hsec-diff3-hl-green"><section></span><br>
            <span class="hsec-diff3-hl-gray"><header></span><h2>サービス一覧</h2><span class="hsec-diff3-hl-gray"></header></span><br><br>
            <!-- 💡 小テーマ（sectionの入れ子） --><br>
            <span class="hsec-diff3-hl-green"><section></span><br>
              <h3>デザイン事業</h3><br>
            <span class="hsec-diff3-hl-green"></section></span><br>
          <span class="hsec-diff3-hl-green"></section></span><br><br>
          <!-- 💡 サイドバー（補足情報） --><br>
          <span class="hsec-diff3-hl-orange"><aside></span><br>
            <h3>関連リンク</h3><br>
            <nav>...</nav><br>
          <span class="hsec-diff3-hl-orange"></aside></span><br><br>
        <span class="hsec-diff3-hl-red"></main></span>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.hsec-diff3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hsec-diff3-demo-area {
  display: flex;
  justify-content: center;
}

.hsec-diff3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}

.hsec-diff3-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hsec-diff3-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.hsec-diff3-tag-badge {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-bottom-right-radius: 4px;
  z-index: 2;
}

/* mainモック */
.hsec-diff3-main {
  background-color: #fff;
  border: 2px solid #e06c75;
  padding: 15px;
  border-radius: 4px;
  position: relative;
}

/* 親sectionモック */
.hsec-diff3-outer-section {
  flex: 2;
  background-color: #e7f1ff;
  border: 2px solid #198754;
  padding: 25px 10px 10px 10px;
  border-radius: 4px;
  position: relative;
}

/* headerモック */
.hsec-diff3-header {
  background-color: #fff;
  border: 1px dashed #6c757d;
  padding: 15px 5px 5px 5px;
  margin-bottom: 10px;
  border-radius: 2px;
  position: relative;
}

/* 子sectionモック */
.hsec-diff3-inner-section {
  background-color: #fff;
  border: 1px dashed #198754;
  padding: 15px 5px 5px 5px;
  border-radius: 2px;
  position: relative;
}

/* asideモック */
.hsec-diff3-aside {
  flex: 1;
  background-color: #fcf8e3;
  border: 2px solid #d19a66;
  padding: 15px 10px 10px 10px;
  border-radius: 4px;
  position: relative;
}

.hsec-diff3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #e06c75;
}

.hsec-diff3-hl-red {
  color: #e06c75;
  font-weight: bold;
}

.hsec-diff3-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hsec-diff3-hl-orange {
  color: #d19a66;
  font-weight: bold;
}

.hsec-diff3-hl-gray {
  color: #7f848e;
  font-weight: bold;
}

asideタグの使い方を詳しく知りたい人は「【HTML】asideタグの使い方：サイドバー実装やsectionとの違い」を一読ください。

【HTML】asideタグの使い方：サイドバー実装やsectionとの違い

id属性を使ったページ内リンクの実装方法

Webページが縦に長くなるにつれて、「目次から特定の章へ移動したい」「トップへ戻るボタンを作りたい」といった要望が出てきます。

これを実現するのがid属性を使ったページ内リンク（アンカーリンク）です。

ページ内の特定の場所にジャンプする仕組みは、Web制作において欠かせない重要な技術です。

id属性を使ったページ内リンクの実装方法

特定のセクションへスクロールさせるリンクの書き方

特定のセクションへスクロールさせるリンクの書き方

ページ内ジャンプの仕組みはシンプルです。

出発点となる<a>タグのリンク先（href）に#（ハッシュ）と任意の名前を指定し、到着点となる目的のセクションに、同じ名前のid属性を付与するだけです。

また、文法的なミスとして、出発点のhrefに#を書き忘れたり、逆に到着点のid属性にも#をつけてしまったりするミスも多く見られます。

id属性はページ内に1つだけしか存在してはいけません。重複は厳禁です。
固定ヘッダー被りの回避
到着点となる<section>などの要素にscroll-margin-topを指定します。
これにより、ヘッダーの高さ分だけ手前でスクロールを止めることができ、見出しが隠れるのを防げます。
スムーズスクロール
パッと切り替わるのではなく、アニメーションで滑らかに移動させるために、CSSの全体設定にscroll-behavior: smooth;を指定するのが実務の標準です。

🚀 ページ内リンク（スムーズスクロールとヘッダー被り対策）

上のメニューをクリックすると、該当の章へ滑らかに移動します。
↓ 下へスクロール

第1章：HTMLの基礎

このセクションは id="section1" を持っています。

固定ヘッダーに隠れないようにCSSで調整されています。

第2章：CSSの魔法

このセクションは id="section2" を持っています。

↑ 一番上に戻る

<!– 💡 リンク元（出発点）には「#」をつける –>
<a href=“#about”>会社概要へ</a>

<!– 💡 リンク先（到着点）のidには「#」をつけない –>
<section id=“about”>
  <h2>会社概要</h2>
</section>

/* 💡 実務必須：固定ヘッダー被りを防ぐCSS */
section {
  scroll-margin-top: 60px; /* ★ヘッダーの高さ分だけ手前で止まる */
}

/* 💡 滑らかに移動させる（html全体にかける） */
html {
  scroll-behavior: smooth;
}

上記ではSWELLのテーマ干渉があるため、疑似ウィンドウ内のid属性に対してJavaScriptコードを組んでいます。

HTMLコード表示

<div class="hsec-jump1-wrapper">
  
  <div class="hsec-jump1-demo-area">
    <div class="hsec-jump1-box">
      <div class="hsec-jump1-label">🚀 ページ内リンク（スムーズスクロールとヘッダー被り対策）</div>
      
      <div class="hsec-jump1-mock-window">
        
        <header class="hsec-jump1-fixed-header">
          <span style="font-weight:bold;">サイトロゴ</span>
          <nav class="hsec-jump1-nav">
            <a href="javascript:void(0);" class="hsec-jump1-nav-link" onclick="this.closest('.hsec-jump1-mock-window').scrollTo({top: this.closest('.hsec-jump1-mock-window').querySelector('#section1').offsetTop - 60, behavior: 'smooth'});">第1章</a>
            <a href="javascript:void(0);" class="hsec-jump1-nav-link" onclick="this.closest('.hsec-jump1-mock-window').scrollTo({top: this.closest('.hsec-jump1-mock-window').querySelector('#section2').offsetTop - 60, behavior: 'smooth'});">第2章</a>
          </nav>
        </header>

        <div class="hsec-jump1-content">
          <p style="text-align:center; padding: 30px; color:#666;">
            上のメニューをクリックすると、該当の章へ滑らかに移動します。<br>
            ↓ 下へスクロール
          </p>
          
          <div style="height: 300px;"></div> <section id="section1" class="hsec-jump1-section">
            <div class="hsec-jump1-heading">第1章：HTMLの基礎</div>
            <p>このセクションは <code>id="section1"</code> を持っています。</p>
            <p>固定ヘッダーに隠れないようにCSSで調整されています。</p>
          </section>

          <div style="height: 300px;"></div> <section id="section2" class="hsec-jump1-section">
            <div class="hsec-jump1-heading">第2章：CSSの魔法</div>
            <p>このセクションは <code>id="section2"</code> を持っています。</p>
            <a href="javascript:void(0);" class="hsec-jump1-back-top" onclick="this.closest('.hsec-jump1-mock-window').scrollTo({top:0, behavior:'smooth'});">
              ↑ 一番上に戻る
            </a>
          </section>

          <div style="height: 300px;"></div> </div>
      </div>

      <div class="hsec-jump1-code">
        <!-- 💡 リンク元（出発点）には「#」をつける --><br>
        <a href=<span class="hsec-jump1-hl-blue">"#about"</span>>会社概要へ</a><br><br>
        <!-- 💡 リンク先（到着点）のidには「#」をつけない --><br>
        <section id=<span class="hsec-jump1-hl-green">"about"</span>><br>
          <h2>会社概要</h2><br>
        </section><br><br>
        /* 💡 実務必須：固定ヘッダー被りを防ぐCSS */<br>
        <span class="hsec-jump1-hl-green">section</span> {<br>
          <span class="hsec-jump1-hl-blue">scroll-margin-top: 60px;</span> /* ★ヘッダーの高さ分だけ手前で止まる */<br>
        }<br><br>
        /* 💡 滑らかに移動させる（html全体にかける） */<br>
        <span class="hsec-jump1-hl-green">html</span> {<br>
          <span class="hsec-jump1-hl-blue">scroll-behavior: smooth;</span><br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.hsec-jump1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hsec-jump1-demo-area {
  display: flex;
  justify-content: center;
}

.hsec-jump1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}

.hsec-jump1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

/* 疑似ブラウザウィンドウ */
.hsec-jump1-mock-window {
  position: relative;
  height: 350px;
  overflow-y: scroll;
  border: 2px solid #343a40;
  border-radius: 8px 8px 0 0;
  background-color: #f1f3f5;
  margin-bottom: 20px;
  scroll-behavior: smooth;
}

/* 固定ヘッダーモック */
.hsec-jump1-fixed-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #212529;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.hsec-jump1-nav {
  display: flex;
  gap: 15px;
}

.hsec-jump1-nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  padding: 5px 10px;
  border: 1px solid #495057;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.hsec-jump1-nav-link:hover {
  background-color: #495057;
}

/* 到着点のセクション */
.hsec-jump1-section {
  background-color: #fff;
  padding: 20px;
  margin: 0 15px;
  border: 2px solid #0d6efd;
  border-radius: 4px;
  scroll-margin-top: 60px;
}

.hsec-jump1-heading {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #084298;
  border-bottom: 1px dashed #cfe2ff;
  padding-bottom: 5px;
}

.hsec-jump1-back-top {
  display: inline-block;
  margin-top: 15px;
  font-size: 12px;
  color: #0d6efd;
  text-decoration: underline;
  cursor: pointer;
}

.hsec-jump1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hsec-jump1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hsec-jump1-hl-blue {
  color: #61afef;
  font-weight: bold;
}

ジャンプページを設定する<a>タグの使い方を詳しく知りたい人は「【html&css】aタグ（リンク）の使い方とWebデザインによる装飾」を一読ください。

【html&css】aタグ（リンク）の使い方とWebデザインによる装飾

CSSでsectionタグをデザイン・レイアウトする

HTMLの<section>タグは、記述しただけでは透明な箱に過ぎず、視覚的な変化は何も起こりません。

ユーザーにとって読みやすく整ったページを作るには、CSSを用いた装飾が不可欠です。

ここでは、sectionタグに対するCSSの基本、クラスを用いたデザイン・レイアウトを解説します。

CSSでsectionタグをデザイン・レイアウトする

背景色・背景画像・枠線の設定
幅・高さの調整と中央寄せ

背景色・背景画像・枠線の設定

セクションごとに背景色や背景画像を交互に切り替えたり、境界に枠線を引いたりすることは、読者に「ここから新しいテーマが始まる」と直感的に伝える区切りとして有効です。

背景画像の最適化
画像を背景にする場合は、background-size: cover;（比率を保ちながら要素全体を覆う）とbackground-position: center;（中央を基準にする）をセットで指定します。
暗転オーバーレイ
背景画像の上にテキストを乗せる場合は、文字の視認性を担保するため、半透明の黒いレイヤー（背景色）をCSSで重ねて画像を少し暗くするのがよいです。

🎨 背景色と背景画像（オーバーレイ）のデザイン

1. 背景色と枠線のセクション

薄い背景色と下部の枠線（border）を組み合わせることで、明確なセクションの区切り（separator）を作り出します。

2. 背景画像セクション

画像の上に半透明の黒を重ねることで、白いテキストがくっきりと読みやすくなります。

/* 💡 1. 背景色と境界線の設定 */
.color-section {
  background-color: #f8f9fa;
  border-bottom: 4px solid #0d6efd; /* 下線のセパレーター */
  padding: 40px 20px;
}

/* 💡 2. 背景画像とカバーの設定 */
.image-section {
  background-image: url(‘bg.jpg’);
  background-size: cover; /* ★はみ出さずに覆う必須設定 */
  background-position: center; /* ★中央に合わせる */
}
/* 画像を暗くして文字を読ませる技 */
.overlay {
  background-color: rgba(0, 0, 0, 0.6); /* 黒の半透明(60%) */
}

HTMLコード表示

<div class="hsec-style1-wrapper">
  
  <div class="hsec-style1-demo-area">
    <div class="hsec-style1-box">
      <div class="hsec-style1-label">🎨 背景色と背景画像（オーバーレイ）のデザイン</div>
      
      <div class="hsec-style1-visual">
        
        <section class="hsec-style1-color-section">
          <div class="hsec-style1-heading">1. 背景色と枠線のセクション</div>
          <p class="hsec-style1-text">
            薄い背景色と下部の枠線（border）を組み合わせることで、明確なセクションの区切り（separator）を作り出します。
          </p>
        </section>

        <section class="hsec-style1-image-section">
          <div class="hsec-style1-overlay">
            <div class="hsec-style1-heading-white">2. 背景画像セクション</div>
            <p class="hsec-style1-text-white">
              画像の上に半透明の黒を重ねることで、白いテキストがくっきりと読みやすくなります。
            </p>
          </div>
        </section>

      </div>

      <div class="hsec-style1-code">
        /* 💡 1. 背景色と境界線の設定 */<br>
        <span class="hsec-style1-hl-green">.color-section</span> {<br>
          <span class="hsec-style1-hl-blue">background-color: #f8f9fa;</span><br>
          <span class="hsec-style1-hl-blue">border-bottom: 4px solid #0d6efd;</span> /* 下線のセパレーター */<br>
          padding: 40px 20px;<br>
        }<br><br>
        /* 💡 2. 背景画像とカバーの設定 */<br>
        <span class="hsec-style1-hl-green">.image-section</span> {<br>
          <span class="hsec-style1-hl-blue">background-image: url('bg.jpg');</span><br>
          <span class="hsec-style1-hl-blue">background-size: cover;</span>            /* ★はみ出さずに覆う必須設定 */<br>
          <span class="hsec-style1-hl-blue">background-position: center;</span>       /* ★中央に合わせる */<br>
        }<br>
        /* 画像を暗くして文字を読ませる技 */<br>
        <span class="hsec-style1-hl-green">.overlay</span> {<br>
          <span class="hsec-style1-hl-blue">background-color: rgba(0, 0, 0, 0.6);</span> /* 黒の半透明(60%) */<br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.hsec-style1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hsec-style1-demo-area {
  display: flex;
  justify-content: center;
}

.hsec-style1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}

.hsec-style1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hsec-style1-visual {
  border: 1px solid #ced4da;
  border-radius: 8px;
  overflow: hidden; /* 角丸を適用するため */
  margin-bottom: 20px;
}

/* 1. 背景色のセクション */
.hsec-style1-color-section {
  background-color: #f1f3f5;
  border-bottom: 4px solid #0d6efd;
  padding: 30px 20px;
}

.hsec-style1-heading {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #084298;
}

.hsec-style1-text {
  margin: 0;
  font-size: 13px;
  color: #495057;
  line-height: 1.5;
}

/* 2. 背景画像のセクション */
.hsec-style1-image-section {
  /* 疑似的に背景画像を設定（グラデーションで代用） */
  background-image: linear-gradient(45deg, #198754, #20c997);
  background-size: cover;
  background-position: center;
}

.hsec-style1-overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 50%の黒で暗転 */
  padding: 30px 20px;
}

.hsec-style1-heading-white {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #ffffff;
}

.hsec-style1-text-white {
  margin: 0;
  font-size: 13px;
  color: #f8f9fa;
  line-height: 1.5;
}

.hsec-style1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.hsec-style1-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hsec-style1-hl-blue {
  color: #61afef;
  font-weight: bold;
}

背景画像・枠線の設定を詳しく知りたい人は以下から一読ください。

幅・高さの調整と中央寄せ

Webページ全体のレイアウトを決定づけるのが、各セクションのサイズ感です。

幅や高さを制御し、コンテンツを中央寄せにする技術はレスポンシブデザインの基礎です。

また、高さを画面いっぱいにしたい時にheight: 100vh;（画面の高さ100%）を指定するのも危険です。

中の文章量が多くなって画面の高さを超えた途端、文字が枠から溢れ出します。

コンテナ（インナー）設計
背景色は画面幅いっぱい（100%）に広げたいが、中の文章は中央の決まった幅に収めたい場合は、<section>を画面いっぱいにし、その中にレイアウト専用の箱である<div>を作ります。
中央寄せ
コンテナ（<div>）に対して、max-width: 1000px;（最大幅）とmargin: 0 auto;（左右の余白を自動調整して中央寄せ）を指定するのがよいです。
高さの安全対策
高さを画面いっぱいにしたい場合は、heightではなくmin-height: 100vh;（最小の高さを画面100%にする）を指定します。
これなら、中身が増えても自動的に下に伸びます。

📐 幅の制御（コンテナ）と中央寄せの王道パターン

⭕️ 背景は全幅、中身は中央に寄せる（コンテナレイアウト）

<section> (背景用・全幅)

<div class=”container”> (中身の制限)

サービスの特徴

セクション自体の背景は画面いっぱいに広がりつつ、この文章（コンテナの中身）は最大幅が制限され、常に画面の中央に配置されます。これが最も安全なレスポンシブ設計です。

<!– HTMLの王道構造 –>
<section class=”service-section”>
  <!– ★レイアウト用の箱（コンテナ）を挟む –>
  <div class=”container”>
    <h2>サービスの特徴</h2>
    <p>コンテンツ…</p>
  </div>
</section>

/* CSSの必須テクニック */
.container {
  max-width: 1000px; /* ★固定widthではなくmax-widthを使う */
  width: 100%; /* スマホ向けに100%も指定 */
  margin: 0 auto; /* ★これで左右の余白が均等になり中央に寄る */
  padding: 0 20px; /* スマホで文字が壁にひっつかないための余白 */
}

HTMLコード表示

<div class="hsec-style2-wrapper">
  
  <div class="hsec-style2-demo-area">
    <div class="hsec-style2-box">
      <div class="hsec-style2-label">📐 幅の制御（コンテナ）と中央寄せの王道パターン</div>
      
      <div class="hsec-style2-visual">
        <p style="font-size:12px; color:#198754; font-weight:bold; margin:0 0 10px 0;">⭕️ 背景は全幅、中身は中央に寄せる（コンテナレイアウト）</p>
        
        <div class="hsec-style2-mock-browser">
          
          <section class="hsec-style2-fluid-section">
            <span class="hsec-style2-tag-badge" style="background:#0d6efd;"><section> (背景用・全幅)</span>
            
            <div class="hsec-style2-container">
              <span class="hsec-style2-tag-badge" style="background:#198754;"><div class="container"> (中身の制限)</span>
              <div class="hsec-style2-heading">サービスの特徴</div>
              <p class="hsec-style2-text">
                セクション自体の背景は画面いっぱいに広がりつつ、この文章（コンテナの中身）は最大幅が制限され、常に画面の中央に配置されます。これが最も安全なレスポンシブ設計です。
              </p>
            </div>
          </section>

        </div>
      </div>

      <div class="hsec-style2-code">
        <!-- HTMLの王道構造 --><br>
        <span class="hsec-style2-hl-green"><section class="service-section"></span><br>
          <!-- ★レイアウト用の箱（コンテナ）を挟む --><br>
          <span class="hsec-style2-hl-blue"><div class="container"></span><br>
            <h2>サービスの特徴</h2><br>
            <p>コンテンツ...</p><br>
          <span class="hsec-style2-hl-blue"></div></span><br>
        <span class="hsec-style2-hl-green"></section></span><br><br>
        /* CSSの必須テクニック */<br>
        <span class="hsec-style2-hl-blue">.container</span> {<br>
          <span class="hsec-style2-hl-red">max-width: 1000px;</span> /* ★固定widthではなくmax-widthを使う */<br>
          width: 100%;       /* スマホ向けに100%も指定 */<br>
          <span class="hsec-style2-hl-red">margin: 0 auto;</span>    /* ★これで左右の余白が均等になり中央に寄る */<br>
          padding: 0 20px;   /* スマホで文字が壁にひっつかないための余白 */<br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.hsec-style2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hsec-style2-demo-area {
  display: flex;
  justify-content: center;
}

.hsec-style2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}

.hsec-style2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.hsec-style2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

/* 疑似ブラウザ（幅の広さを表現） */
.hsec-style2-mock-browser {
  width: 100%;
  background-color: #e9ecef;
  border: 2px solid #ced4da;
  border-radius: 4px;
  padding: 20px 0;
  overflow: hidden;
}

/* section全体（幅100%） */
.hsec-style2-fluid-section {
  width: 100%;
  background-color: #cfe2ff; /* 全幅に広がる背景色 */
  padding: 30px 0;
  position: relative;
}

/* 共通タグバッジ */
.hsec-style2-tag-badge {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-bottom-right-radius: 4px;
}

/* インナーコンテナ（幅を制限して中央寄せ） */
.hsec-style2-container {
  max-width: 280px; /* デモ用に狭く設定 */
  width: 100%;
  margin: 0 auto; /* ★これが中央寄せ */
  background-color: #fff;
  border: 2px dashed #198754;
  padding: 25px 15px 15px 15px;
  position: relative;
  box-sizing: border-box;
}

.hsec-style2-heading {
  margin: 0 0 10px 0;
  font-size: 15px;
  color: #0f5132;
  text-align: center;
}

.hsec-style2-text {
  margin: 0;
  font-size: 12px;
  color: #495057;
  line-height: 1.5;
}

.hsec-style2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hsec-style2-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hsec-style2-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.hsec-style2-hl-red {
  color: #e06c75;
  font-weight: bold;
}

幅や高さの指定方法を詳しく知りたい人は「【html&css】width（横幅）とheight（高さ）の指定とボックスモデル」を一読ください。

また、最小幅や最大幅の指定方法も詳しく知りたい人は「【html&css】min-widthとmax-widthの使い方【レスポンシブ対応】」を一読ください。

【html&css】width（横幅）とheight（高さ）の指定とボックスモデル

【html&css】min-widthとmax-widthの使い方【レスポンシブ対応】

コピペで使える：用途別sectionテンプレート集

Web制作の実務において、文法などの基礎を学んだ後に最も役立つのは、現場で使えるコードのひな形をストックしておくことです。

案件ごとにゼロからコードを書くのではなく、実績のあるテンプレートを活用することで、開発スピードと品質は向上します。

ここでは、ページに新しいセクションを追加する際にコピペで使えるテンプレートを紹介します。

用途別sectionテンプレート集

ヒーローセクションやバナー
FAQ・ギャラリー・レビュー・フッターの構成例
アコーディオン（折りたたみ）セクションの実装

ヒーローセクションやバナー

サイトを訪れたユーザーが最初に目にする画面上部の大きなエリアを「ヒーローセクション」、あるいはプロモーション用のエリアを「バナーセクション」と呼びます。

このエリアの出来栄えが、ユーザーが続きを読むか離脱するかを左右します。

スマホ対応するため、高さはmin-height（最小の高さ）とpaddingの組み合わせで指定します。

背景画像を使う場合は、上に「半透明の黒いレイヤー」を重ねてテキストの可読性を確保します。

最高のWeb体験を、あなたに。

16枚の画像を4行に分け、交互に流れるアニメーション。
カクつきゼロの完全シームレスなループを実現しています。

詳しく見る

/* 💡 行ごとに方向を変え、カクつきを無くすCSS */
.hsec-hero-row {
  display: flex;
  width: 200%; /* ★2セット分(8枚)を並べるための幅 */
  height: 25%; /* ★4行なので1行あたり25%の高さ */
  will-change: transform;
}

<!– ★1行目と3行目（左から右へ） –>
.hsec-row-ltr {
  animation: scroll-ltr 20s linear infinite;
}
@keyframes scroll-ltr {
  0% { transform: translate3d(-50%, 0, 0); } /* 右半分のセットを表示 */
  100% { transform: translate3d(0, 0, 0); } /* 左半分のセットへ移動 */
}

<!– ★2行目と4行目（右から左へ） –>
.hsec-row-rtl {
  animation: scroll-rtl 20s linear infinite;
}
@keyframes scroll-rtl {
  0% { transform: translate3d(0, 0, 0); } /* 左半分のセットを表示 */
  100% { transform: translate3d(-50%, 0, 0); } /* 右半分のセットへ移動 */
}

HTMLコード表示

<div class="hsec-hero-wrapper">
  
  <div class="hsec-hero-demo-area">
    <section class="hsec-hero-section">
      
      <div class="hsec-hero-bg-rows">
        
        <div class="hsec-hero-row hsec-row-ltr">
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/d63384/ffffff?text=Image1');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/d63384/ffffff?text=Image2');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/d63384/ffffff?text=Image3');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/d63384/ffffff?text=Image4');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/d63384/ffffff?text=Image1');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/d63384/ffffff?text=Image2');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/d63384/ffffff?text=Image3');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/d63384/ffffff?text=Image4');"></div>
        </div>

        <div class="hsec-hero-row hsec-row-rtl">
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/6c757d/ffffff?text=Image5');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/0dcaf0/ffffff?text=Image6');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/198754/ffffff?text=Image7');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/fd7e14/ffffff?text=Image8');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/6c757d/ffffff?text=Image5');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/0dcaf0/ffffff?text=Image6');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/198754/ffffff?text=Image7');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/fd7e14/ffffff?text=Image8');"></div>
        </div>

        <div class="hsec-hero-row hsec-row-ltr">
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/d63384/ffffff?text=Image9');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/6f42c1/ffffff?text=Image10');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/084298/ffffff?text=Image11');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/055160/ffffff?text=Image12');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/d63384/ffffff?text=Image9');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/6f42c1/ffffff?text=Image10');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/084298/ffffff?text=Image11');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/055160/ffffff?text=Image12');"></div>
        </div>

        <div class="hsec-hero-row hsec-row-rtl">
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/333333/ffffff?text=Image13');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/f8f9fa/333333?text=Image14');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/e9ecef/333333?text=Image15');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/ced4da/333333?text=Image16');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/333333/ffffff?text=Image13');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/f8f9fa/333333?text=Image14');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/e9ecef/333333?text=Image15');"></div>
          <div class="hsec-hero-item" style="background-image: url('https://placehold.co/400x400/ced4da/333333?text=Image16');"></div>
        </div>

      </div>

      <div class="hsec-hero-overlay">
        <div class="hsec-hero-content">
          <h2 class="hsec-hero-title">最高のWeb体験を、あなたに。</h2>
          <p class="hsec-hero-text">
            16枚の画像を4行に分け、交互に流れるアニメーション。<br>
            カクつきゼロの完全シームレスなループを実現しています。
          </p>
          <a href="#" class="hsec-hero-btn">詳しく見る</a>
        </div>
      </div>
    </section>
  </div>

  <div class="hsec-hero-code">
    /* 💡 行ごとに方向を変え、カクつきを無くすCSS */<br>
    <span class="hsec-hero-hl-green">.hsec-hero-row</span> {<br>
      display: flex;<br>
      width: 200%; /* ★2セット分(8枚)を並べるための幅 */<br>
      height: 25%; /* ★4行なので1行あたり25%の高さ */<br>
      will-change: transform;<br>
    }<br><br>
    <!-- ★1行目と3行目（左から右へ） --><br>
    <span class="hsec-hero-hl-green">.hsec-row-ltr</span> {<br>
      <span class="hsec-hero-hl-blue">animation: scroll-ltr 20s linear infinite;</span><br>
    }<br>
    <span class="hsec-hero-hl-green">@keyframes scroll-ltr</span> {<br>
      0% { transform: translate3d(-50%, 0, 0); } /* 右半分のセットを表示 */<br>
      100% { transform: translate3d(0, 0, 0); } /* 左半分のセットへ移動 */<br>
    }<br><br>
    <!-- ★2行目と4行目（右から左へ） --><br>
    <span class="hsec-hero-hl-green">.hsec-row-rtl</span> {<br>
      <span class="hsec-hero-hl-blue">animation: scroll-rtl 20s linear infinite;</span><br>
    }<br>
    <span class="hsec-hero-hl-green">@keyframes scroll-rtl</span> {<br>
      0% { transform: translate3d(0, 0, 0); } /* 左半分のセットを表示 */<br>
      100% { transform: translate3d(-50%, 0, 0); } /* 右半分のセットへ移動 */<br>
    }
  </div>

</div>

CSSコード表示

.hsec-hero-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hsec-hero-demo-area {
  margin-bottom: 20px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  overflow: hidden;
  padding: 15px;
  background-color: #ffffff;
}

/* ヒーローセクション本体（外枠） */
.hsec-hero-section {
  position: relative;
  overflow: hidden; /* ★枠外にはみ出した画像を隠す */
  width: 100%;
  border-radius: 6px;
  background-color: #212529; /* 読み込み前のベース色 */
}

/* ★行を縦に積むためのコンテナ */
.hsec-hero-bg-rows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* 4つの行を縦に並べる */
  z-index: 1;
}

/* ★1つ1つの行（Row）。幅を200%にして、画像を8枚（4枚×2セット）並べる */
.hsec-hero-row {
  display: flex;
  width: 200%;
  height: 25%; /* 全体100% ÷ 4行 = 25% */
  will-change: transform; /* GPUアクセラレーション */
}

/* 各画像が入るアイテム。1行(200%の幅)の中に8枚入るので、1枚あたり12.5%の幅。
   ※画面幅(100%)に対してはちょうど25%（4分の1）の幅になります。 */
.hsec-hero-item {
  width: 12.5%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box; /* ★ボーダーを入れても幅が狂わないようにする絶対必須の指定 */
  border: 1px solid #212529;
}

/* =========================================
   アニメーション：左から右へ（→）
========================================= */
.hsec-row-ltr {
  animation: hsec-scroll-ltr 25s linear infinite;
}

@keyframes hsec-scroll-ltr {
  /* スタート：左に-50%引っ張り、右側のセット(画像1〜4)を見せておく */
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  /* ゴール：0に戻り、左側のセット(画像1〜4)を見せる。
     絵柄が全く同じなので、一瞬で-50%に戻ってもカクつきません。 */
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* =========================================
   アニメーション：右から左へ（←）
========================================= */
.hsec-row-rtl {
  animation: hsec-scroll-rtl 25s linear infinite;
}

@keyframes hsec-scroll-rtl {
  /* スタート：左側のセット(画像5〜8)を見せておく */
  0% {
    transform: translate3d(0, 0, 0);
  }
  /* ゴール：左に-50%引っ張り、右側のセット(画像5〜8)を見せる。 */
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ★必須：暗転オーバーレイと中央配置 */
.hsec-hero-overlay {
  position: relative;
  z-index: 2; /* 背景スライダーより手前に出す */
  background-color: rgba(0, 0, 0, 0.6); /* 60%の黒で暗転 */
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  pointer-events: none;
}

/* コンテンツの制限幅 */
.hsec-hero-content {
  max-width: 600px;
  width: 100%;
  text-align: center;
  color: #ffffff;
  pointer-events: auto; /* 中のボタン等はクリックできるように戻す */
}

.hsec-hero-title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 15px 0;
  line-height: 1.4;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.hsec-hero-text {
  font-size: 14px;
  margin: 0 0 25px 0;
  line-height: 1.6;
  color: #f8f9fa;
}

/* アクションを促すボタン（CTA） */
.hsec-hero-btn {
  display: inline-block;
  background-color: #ffc107;
  color: #212529;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  padding: 12px 30px;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.hsec-hero-btn:hover {
  background-color: #ffca2c;
  transform: translateY(-2px);
}

.hsec-hero-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hsec-hero-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hsec-hero-hl-blue {
  color: #61afef;
  font-weight: bold;
}

FAQ・ギャラリー・レビュー・フッターの構成例

ランディングページ（LP）やコーポレートサイトでは、よくある質問や実績を見せるギャラリー、お客様の声やコメント欄といったセクションが並びます。

ページ全体のフッターは、<section>ではなく<footer>タグを使います。

ここでは、汎用性の高い「カード型レイアウト」を用いた「レビュー（お客様の声）」セクションの実装例を紹介します。

お客様の声

多くの企業様にご満足いただいています

★★★★★

「導入から公開まで非常にスムーズでした。デザインのクオリティも高く大満足です。」

★★★★★

「テンプレートの使い勝手が良く、社内でのカスタマイズも簡単に行えました。」

HTMLコード表示

<div class="hsec-review-wrapper">
  
  <div class="hsec-review-demo-area">
    <section class="hsec-review-section">
      <div class="hsec-review-container">
        
        <header class="hsec-review-header">
          <div class="hsec-review-title">お客様の声</div>
          <p class="hsec-review-subtitle">多くの企業様にご満足いただいています</p>
        </header>

        <div class="hsec-review-grid">
          
          <article class="hsec-review-card">
            <div class="hsec-review-stars">★★★★★</div>
            <p class="hsec-review-text">「導入から公開まで非常にスムーズでした。デザインのクオリティも高く大満足です。」</p>
            <footer class="hsec-review-user">
              <div class="hsec-review-avatar">👨‍💼</div>
              <div class="hsec-review-info">
                <strong>株式会社A様</strong><br>
                <span>ITベンチャー</span>
              </div>
            </footer>
          </article>

          <article class="hsec-review-card">
            <div class="hsec-review-stars">★★★★★</div>
            <p class="hsec-review-text">「テンプレートの使い勝手が良く、社内でのカスタマイズも簡単に行えました。」</p>
            <footer class="hsec-review-user">
              <div class="hsec-review-avatar">👩‍💻</div>
              <div class="hsec-review-info">
                <strong>B株式会社様</strong><br>
                <span>デザイン制作会社</span>
              </div>
            </footer>
          </article>

        </div>
      </div>
    </section>
  </div>

</div>

CSSコード表示

.hsec-review-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hsec-review-demo-area {
  border: 1px solid #ced4da;
  border-radius: 8px;
  background-color: #f1f3f5;
}

/* レビューセクション全体 */
.hsec-review-section {
  padding: 40px 20px;
}

.hsec-review-container {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}

/* セクションのヘッダー */
.hsec-review-header {
  text-align: center;
  margin-bottom: 30px;
}

.hsec-review-title {
  font-size: 22px;
  color: #212529;
  margin: 0 0 5px 0;
}

.hsec-review-subtitle {
  font-size: 13px;
  color: #6c757d;
  margin: 0;
}

/* Flexboxによるグリッド（横並び） */
.hsec-review-grid {
  display: flex;
  flex-wrap: wrap; /* スマホで折り返すための必須プロパティ */
  gap: 20px;
}

/* 個別のカード（articleで囲むのがセマンティック） */
.hsec-review-card {
  flex: 1; /* 均等に幅を取る */
  min-width: 250px; /* スマホ時に極端に細くならないようにする */
  background-color: #ffffff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column; /* 内部も縦並びのFlexにする */
}

.hsec-review-stars {
  color: #ffc107;
  font-size: 16px;
  margin-bottom: 10px;
}

.hsec-review-text {
  font-size: 13px;
  color: #495057;
  line-height: 1.6;
  margin: 0 0 20px 0;
  flex-grow: 1; /* テキストの長さが違っても下部のユーザー情報を揃える */
}

/* コメントのフッター部分（ユーザー情報） */
.hsec-review-user {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #e9ecef;
  padding-top: 15px;
}

.hsec-review-avatar {
  background-color: #e9ecef;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* 丸くする */
  font-size: 20px;
}

.hsec-review-info {
  font-size: 12px;
  color: #333;
}

.hsec-review-info span {
  color: #6c757d;
  font-size: 10px;
}

FAQやフッターデザイン集からコピペしたい人は以下から一読してください。

アコーディオン（折りたたみ）セクションの実装

スマートフォンからのアクセスが主流となった現在、画面スペースを節約しつつ多くの情報を載せるために、タップすると内容が開くアコーディオン形式のセクションは欠かせない機能です。

前述の「FAQ（よくある質問）」などでも多用されます。

Web制作において、シンプルなアコーディオンを作るのにJavaScriptは一切不要です。

HTML5の標準機能である<details>タグと<summary>タグを使うのがよいです。

これだけで、ブラウザが自動的に開閉機能とアクセシビリティ（エンターキーでの開閉など）を提供します。

よくあるご質問（FAQ）

Q. JavaScriptを使わずに折りたたみは作れますか？

A. はい、作れます！HTML5の <details> と <summary> タグを使うことで、ブラウザ標準の機能として非常に軽量かつ安全なアコーディオンを実装できます。

Q. レスポンシブ対応のコツは何ですか？

A. 要素の幅を固定のpxで指定するのではなく、max-width と % を組み合わせて指定することです。また、Flexboxの flex-wrap: wrap; を活用することも重要です。

<!– 💡 JS完全不要！最新のアコーディオン実装 –>
<details>
  <!– クリックする見出し部分 –>
  <summary>質問のタイトル</summary>
  <!– 開いた時に表示される中身 –>
  <div class=”content”>
    <p>回答のテキスト…</p>
  </div>
</details>

HTMLコード表示

<div class="hsec-acc-wrapper">
  
  <div class="hsec-acc-demo-area">
    <section class="hsec-acc-section">
      <div class="hsec-acc-container">
        
        <div class="hsec-acc-title">よくあるご質問（FAQ）</div>

        <details class="hsec-acc-details">
          <summary class="hsec-acc-summary">
            Q. JavaScriptを使わずに折りたたみは作れますか？
            <span class="hsec-acc-icon"></span>
          </summary>
          <div class="hsec-acc-content">
            <p>A. はい、作れます！HTML5の <code><details></code> と <code><summary></code> タグを使うことで、ブラウザ標準の機能として非常に軽量かつ安全なアコーディオンを実装できます。</p>
          </div>
        </details>

        <details class="hsec-acc-details">
          <summary class="hsec-acc-summary">
            Q. レスポンシブ対応のコツは何ですか？
            <span class="hsec-acc-icon"></span>
          </summary>
          <div class="hsec-acc-content">
            <p>A. 要素の幅を固定のpxで指定するのではなく、<code>max-width</code> と <code>%</code> を組み合わせて指定することです。また、Flexboxの <code>flex-wrap: wrap;</code> を活用することも重要です。</p>
          </div>
        </details>

      </div>
    </section>
  </div>

  <div class="hsec-acc-code">
    <!-- 💡 JS完全不要！最新のアコーディオン実装 --><br>
    <span class="hsec-acc-hl-green"><details></span><br>
      <!-- クリックする見出し部分 --><br>
      <span class="hsec-acc-hl-blue"><summary></span>質問のタイトル<span class="hsec-acc-hl-blue"></summary></span><br>
      <!-- 開いた時に表示される中身 --><br>
      <div class="content"><br>
        <p>回答のテキスト...</p><br>
      </div><br>
    <span class="hsec-acc-hl-green"></details></span>
  </div>

</div>

CSSコード表示

.hsec-acc-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.hsec-acc-demo-area {
  border: 1px solid #ced4da;
  border-radius: 8px;
  background-color: #ffffff;
  margin-bottom: 20px;
}

.hsec-acc-section {
  padding: 30px 20px;
}

.hsec-acc-container {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.hsec-acc-title {
  text-align: center;
  font-size: 20px;
  color: #212529;
  margin: 0 0 25px 0;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 10px;
}

/* アコーディオン全体（details） */
.hsec-acc-details {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  margin-bottom: 15px;
  overflow: hidden;
}

/* アコーディオンの見出し（summary） */
.hsec-acc-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 14px;
  color: #0d6efd;
  cursor: pointer; /* マウスカーソルを指マークに */
  list-style: none; /* デフォルトの▶︎マークを消す（モダンブラウザ用） */
  transition: background-color 0.2s;
}

/* Safari向けにデフォルトの▶︎マークを消す */
.hsec-acc-summary::-webkit-details-marker {
  display: none;
}

.hsec-acc-summary:hover {
  background-color: #e9ecef;
}

/* オリジナルの開閉アイコン設定 */
.hsec-acc-icon {
  position: relative;
  width: 14px;
  height: 14px;
}

.hsec-acc-icon::before,
.hsec-acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #0d6efd;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

/* 横線 */
.hsec-acc-icon::before {
  width: 14px;
  height: 2px;
}

/* 縦線（＋を作る） */
.hsec-acc-icon::after {
  width: 2px;
  height: 14px;
}

/* detailsが開いた(open)時のアイコン変化（＋から－へ） */
.hsec-acc-details[open] .hsec-acc-icon::after {
  transform: translate(-50%, -50%) rotate(90deg); /* 縦線を横にして隠す */
}

/* アコーディオンの中身 */
.hsec-acc-content {
  padding: 15px 20px;
  border-top: 1px dashed #dee2e6;
  font-size: 13px;
  color: #495057;
  line-height: 1.6;
  background-color: #ffffff;
}

.hsec-acc-content p {
  margin: 0;
}

.hsec-acc-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #198754;
}

.hsec-acc-hl-green {
  color: #98c379;
  font-weight: bold;
}

.hsec-acc-hl-blue {
  color: #61afef;
  font-weight: bold;
}

アコーディオンデザインをコピペしたい・作り方を知りたい人は以下から一読ください。

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ

基本定義
意味やテーマを持ったコンテンツのまとまり（区画）を示す。
必須要件
原則として、内部にそのテーマを示す見出しタグ（h1〜h6）を含める必要がある。
SEO・アクセシビリティ
ページの階層構造（アウトライン）を検索エンジンや音声読み上げソフトに正しく伝達する役割を持つ。
divタグとの違い
sectionは意味付けで使用し、divはレイアウトや装飾など「箱」として使用する。
articleタグとの違い
articleは単独で切り取っても成立する独立したコンテンツ（ブログの1記事など）。
sectionは大きなテーマの中の一部（章や節）として使い分ける。
ページ構造のルール
ページ全体の主役である<main>の中に配置し、セクション自体を入れ子にして階層を深くすることも可能。
内部要素の自由度
各<section>の中に、その区画専用の<header>や<footer>を配置することができる。