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

2026年4月8日

Webサイトのサイドバーや補足情報を示すHTMLの<aside>タグは、正しい構造とSEOを意識したWeb制作において欠かせない要素です。

本記事では、asideの意味、sectionとの使い分け、CSSによる左右の配置方法を解説します。

asideタグとは：意味と役割

Webサイトの構造を検索エンジンやブラウザに正しく伝えるセマンティックHTMLにおいて、「aside」の理解は欠かせません。

本記事では、asideタグの意味、実務でのレイアウト設計などをサンプルコード付きで解説します。

asideタグとは：意味と役割

asideタグが持つ意味（補足情報・サイドバー）
レイアウトタグ（main・header・nav等）との関係
asideとsectionの違いと使い分け

asideタグが持つ意味（補足情報・サイドバー）

<aside>タグは、メインコンテンツから「外れた情報（補足情報）」をマークアップするタグです。

具体的には、用語解説、広告、筆者プロフィール、記事の横に配置されるサイドバーなどに使用されます。

「メインの文章の流れから取り除いても、本文の意味が成立する情報」であるかが、asideを使う基準になります。

HTMLやCSSを学び始めた初心者の勘違いとして、「<aside>タグを使えば、自動的に右や左のサイドバーとして配置される」という勘違いです。

HTMLのタグはあくまで「意味」を持たせるものであり、レイアウト機能は持ちません。

<aside>タグを使っても、display: flex;などを指定しなければ要素は縦に並ぶだけです。

HTMLでは「ここは補足情報（サイドバー）である」という意味付けを<aside>で行い、横並びなどのレイアウトはCSSで行うのがルールです。

💡 asideタグを使ったサイドバーの実装例

メインコンテンツ（article）

ここにはWebサイトの主要な記事や情報が入ります。asideタグの中身がなくても、ここの文章だけで意味が通じる状態が理想です。

<!– HTML：意味付けを行う –>
<div class=”container”>
  <article>メインの記事</article>
  <aside>補足情報・サイドバー</aside>
</div>

/* CSS：Flexboxで横に並べる */
.container {
  display: flex; /* ここで初めて横並びになる */
  gap: 20px;
}

HTMLコード表示

<div class="haside-sec1-wrapper">
  
  <div class="haside-sec1-demo-area">
    <div class="haside-sec1-box">
      <div class="haside-sec1-label">💡 asideタグを使ったサイドバーの実装例</div>
      
      <div class="haside-sec1-visual">
        <div class="haside-sec1-container">
          <article class="haside-sec1-article">
            <div>メインコンテンツ（article）</div>
            <p>ここにはWebサイトの主要な記事や情報が入ります。asideタグの中身がなくても、ここの文章だけで意味が通じる状態が理想です。</p>
          </article>
          
          <aside class="haside-sec1-sidebar">
            <div>サイドバー（aside）</div>
            <p>・おすすめ記事<br>・バナー広告<br>・筆者プロフィール</p>
            <p style="font-size: 11px; color: #dc3545; font-weight: bold; margin-top: 10px;">※CSSで横並びにしています</p>
          </aside>
        </div>
      </div>

      <div class="haside-sec1-code">
        <!-- HTML：意味付けを行う --><br>
        <div class="container"><br>
          <article>メインの記事</article><br>
          <span class="haside-sec1-hl-green"><aside></span>補足情報・サイドバー<span class="haside-sec1-hl-green"></aside></span><br>
        </div><br><br>
        /* CSS：Flexboxで横に並べる */<br>
        <span class="haside-sec1-hl-blue">.container</span> {<br>
          <span class="haside-sec1-hl-red">display: flex;</span> /* ここで初めて横並びになる */<br>
          gap: 20px;<br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.haside-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.haside-sec1-demo-area {
  display: flex;
  justify-content: center;
}
.haside-sec1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}
.haside-sec1-label { font-size: 15px; font-weight: bold; margin-bottom: 15px; color: #333; }

.haside-sec1-visual {
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Flexboxによる横並びレイアウトの再現 */
.haside-sec1-container {
  display: flex;
  gap: 15px;
}

.haside-sec1-article {
  flex: 2; /* 割合2 */
  background-color: #fff;
  border: 2px solid #0d6efd;
  padding: 15px;
  border-radius: 4px;
}
.haside-sec1-article h4 { margin: 0 0 10px 0; color: #0d6efd; font-size: 14px; }
.haside-sec1-article p { margin: 0; font-size: 12px; color: #333; line-height: 1.5; }

.haside-sec1-sidebar {
  flex: 1; /* 割合1 */
  background-color: #fff;
  border: 2px dashed #198754;
  padding: 15px;
  border-radius: 4px;
}
.haside-sec1-sidebar h4 { margin: 0 0 10px 0; color: #198754; font-size: 14px; }
.haside-sec1-sidebar p { margin: 0; font-size: 12px; color: #666; line-height: 1.5; }

.haside-sec1-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;
}
.haside-sec1-hl-green { color: #98c379; font-weight: bold; }
.haside-sec1-hl-blue { color: #61afef; font-weight: bold; }
.haside-sec1-hl-red { color: #e06c75; font-weight: bold; }

レイアウトタグ（main・header・nav等）との関係

HTML5では、ページ全体の構造を明確にするセマンティックタグ群が用意されています。

これら全体の設計の中で、asideがどこに属するのかを理解するのが重要です。

「サイドバーの中にはナビゲーションメニューもあるから、<nav>なのか<aside>なのか分からない」「ページ全体のサイドバーと記事の中にある補足情報はどちらも<aside>でいいのか？」といった疑問から、タグの入れ子ルールを間違えてしまうケースが多発します。

ページ全体に対するサイドバー（グローバルな補足）であれば<main>の外側に<aside>を配置します。
特定の記事（<article>）に対する用語解説や広告であれば<article>の内側に<aside>を配置します。
<aside>の中に、サイトの主要なリンク集である<nav>を含めることは全く問題ありません。

🏗️ HTML5セマンティックレイアウトの全体像

<header> ヘッダー（ロゴや主要なナビ）

<main> メインコンテンツ
※ページの主役となる内容

<!– サイト全体の標準的な構造 –>
<body>
  <header>…</header>

  <div class=”content-wrapper”>
    <main>…</main>
    <aside>
      <nav>リンク集</nav>
    </aside>
  </div>

  <footer>…</footer>
</body>

HTMLコード表示

<div class="haside-sec2-wrapper">
  
  <div class="haside-sec2-demo-area">
    <div class="haside-sec2-box">
      <div class="haside-sec2-label">🏗️ HTML5セマンティックレイアウトの全体像</div>
      
      <div class="haside-sec2-visual">
        <header class="haside-sec2-header">
          <header> ヘッダー（ロゴや主要なナビ）
        </header>
        
        <div class="haside-sec2-middle">
          <main class="haside-sec2-main">
            <main> メインコンテンツ<br>
            <span style="font-size: 11px; color: #666;">※ページの主役となる内容</span>
          </main>
          
          <aside class="haside-sec2-aside">
            <aside> サイトのサイドバー<br>
            <nav style="background:#fff; border:1px solid #ccc; padding:5px; margin-top:10px; font-size:10px;">
              <nav> カテゴリ一覧
            </nav>
          </aside>
        </div>

        <footer class="haside-sec2-footer">
          <footer> フッター（コピーライト等）
        </footer>
      </div>

      <div class="haside-sec2-code">
        <!-- サイト全体の標準的な構造 --><br>
        <body><br>
          <header>...</header><br><br>
          <div class="content-wrapper"><br>
            <main>...</main><br>
            <span class="haside-sec2-hl-green"><aside></span><br>
              <nav>リンク集</nav><br>
            <span class="haside-sec2-hl-green"></aside></span><br>
          </div><br><br>
          <footer>...</footer><br>
        </body>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.haside-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.haside-sec2-demo-area {
  display: flex;
  justify-content: center;
}
.haside-sec2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.haside-sec2-label { font-size: 15px; font-weight: bold; margin-bottom: 15px; color: #333; }

/* レイアウトの視覚化 */
.haside-sec2-visual {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
  color: #333;
}
.haside-sec2-header {
  background-color: #e2e3e5;
  padding: 15px;
  border: 2px solid #adb5bd;
  border-radius: 4px;
}
.haside-sec2-middle {
  display: flex;
  gap: 10px;
}
.haside-sec2-main {
  flex: 2;
  background-color: #cfe2ff;
  border: 2px solid #0d6efd;
  padding: 30px 15px;
  border-radius: 4px;
}
.haside-sec2-aside {
  flex: 1;
  background-color: #d1e7dd;
  border: 2px solid #198754;
  padding: 15px;
  border-radius: 4px;
  font-size: 12px;
}
.haside-sec2-footer {
  background-color: #e2e3e5;
  padding: 15px;
  border: 2px solid #adb5bd;
  border-radius: 4px;
}

.haside-sec2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.haside-sec2-hl-green { color: #98c379; font-weight: bold; }

asideタグを使ったサイドバーの作り方と配置方法

Webサイトで見かけるレイアウトの一つが「メインのコンテンツ」と「サイドバー」が並んでいる2カラム（2列）構成です。

このサイドバー部分をマークアップするために、<aside>タグはよく使われます。

asideタグを用いたレイアウト構築はWebコーディングの世界共通の基礎スキルです。

ここでは、具体的なコードを用いた作り方と配置を変える手法を解説します。

asideタグを使ったサイドバーの作り方と配置方法

asideタグの基本的な書き方とサンプルコード
CSSを使ってasideを右や左に配置する
Bootstrapやテンプレートを利用したレスポンシブな実装

asideタグの基本的な書き方とサンプルコード

<aside>タグは、<div>や<p>などと同じように、開始タグと終了タグでコンテンツを囲むだけで使用できます。

<aside>タグを使う際は、<aside class="sidebar-primary">のように独自のクラスを付与し、そのクラス名に対してCSSを記述してデザインを管理します。

📝 クラスを用いたasideの基本スタイル

<!– HTML：必ず専用のクラス(class)を付与する –>
<aside class=”sidebar-widget”>
  <h3>人気の記事</h3>
  <ul>…</ul>
</aside>

/* CSS：クラス名に対してスタイルを当てる */
.sidebar-widget {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 20px;
  border-radius: 8px;
}

HTMLコード表示

<div class="haside-make1-wrapper">
  
  <div class="haside-make1-demo-area">
    <div class="haside-make1-box">
      <div class="haside-make1-label">📝 クラスを用いたasideの基本スタイル</div>
      
      <div class="haside-make1-visual">
        <aside class="haside-make1-sidebar-widget">
          <div class="haside-make1-widget-title">人気の記事</div>
          <ul class="haside-make1-widget-list">
            <li><a href="#">HTMLの基本構造について</a></li>
            <li><a href="#">CSS Flexboxの使い方</a></li>
            <li><a href="#">JavaScriptのイベント処理</a></li>
          </ul>
        </aside>
      </div>

      <div class="haside-make1-code">
        <!-- HTML：必ず専用のクラス(class)を付与する --><br>
        <span class="haside-make1-hl-green"><aside class="sidebar-widget"></span><br>
          <h3>人気の記事</h3><br>
          <ul>...</ul><br>
        <span class="haside-make1-hl-green"></aside></span><br><br>
        /* CSS：クラス名に対してスタイルを当てる */<br>
        <span class="haside-make1-hl-blue">.sidebar-widget</span> {<br>
          background-color: #f8f9fa;<br>
          border: 1px solid #dee2e6;<br>
          padding: 20px;<br>
          border-radius: 8px;<br>
        }
      </div>
    </div>
  </div>
</div>

CSSコード表示

.haside-make1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.haside-make1-demo-area {
  display: flex;
  justify-content: center;
}
.haside-make1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 500px;
  border-radius: 4px;
}
.haside-make1-label { font-size: 15px; font-weight: bold; margin-bottom: 15px; color: #333; }

.haside-make1-visual {
  padding: 15px;
  background-color: #e9ecef;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* クラス名によるasideのスタイリング */
.haside-make1-sidebar-widget {
  background-color: #fff;
  border: 1px solid #ced4da;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.haside-make1-widget-title {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #212529;
  border-bottom: 2px solid #0d6efd;
  padding-bottom: 5px;
}
.haside-make1-widget-list {
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 14px;
}
.haside-make1-widget-list li { margin-bottom: 8px; }
.haside-make1-widget-list a { color: #0d6efd; text-decoration: none; }
.haside-make1-widget-list a:hover { text-decoration: underline; }

.haside-make1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.haside-make1-hl-green { color: #98c379; font-weight: bold; }
.haside-make1-hl-blue { color: #61afef; font-weight: bold; }

CSSを使ってasideを右や左に配置する

Webサイトのデザインに応じて、サイドバーを右側に置くか、左側に置くかをCSSでコントロールします。

サイドバーを左右に配置する場合は、親要素にdisplay: flex;（Flexbox）を使用するのが現代のスタンダードです。

右に置くか左に置くかは、単純にHTML内での記述順（<main>が先か、<aside>が先か）で決めるのが最も自然で管理しやすい方法です。

↔️ Flexboxによる右配置と左配置のコントロール

👇 1. asideを右（right）に配置（mainが先）

<main> メイン記事

👇 2. asideを左（left）に配置（asideが先）

<main> メイン記事

/* ★親要素にFlexboxを指定するだけ！ */
.container {
display: flex;
gap: 20px; /* 隙間の指定も簡単 */
}

/* 割合の指定 */
main { flex: 3; } /* メインは広め(3) */
aside { flex: 1; } /* サイドは狭め(1) */

※HTMLの記述順を変えるだけで、右（right）と左（left）を簡単に切り替えることができます。floatはもう不要です。

HTMLコード表示

<div class="haside-make2-wrapper">
  
  <div class="haside-make2-demo-area">
    
    <div class="haside-make2-box">
      <div class="haside-make2-label">↔️ Flexboxによる右配置と左配置のコントロール</div>
      
      <p style="font-size:12px; font-weight:bold; color:#0d6efd; margin:0 0 5px 0;">👇 1. asideを右（right）に配置（mainが先）</p>
      <div class="haside-make2-flex-container" style="margin-bottom: 20px;">
        <main class="haside-make2-main-content">
          <main> メイン記事
        </main>
        <aside class="haside-make2-sidebar-content">
          <aside> 右サイドバー
        </aside>
      </div>

      <p style="font-size:12px; font-weight:bold; color:#198754; margin:0 0 5px 0;">👇 2. asideを左（left）に配置（asideが先）</p>
      <div class="haside-make2-flex-container">
        <aside class="haside-make2-sidebar-content">
          <aside> 左サイドバー
        </aside>
        <main class="haside-make2-main-content">
          <main> メイン記事
        </main>
      </div>

      <div class="haside-make2-code">
        /* ★親要素にFlexboxを指定するだけ！ */<br>
        <span class="haside-make2-hl-blue">.container</span> {<br>
          <span class="haside-make2-hl-green">display: flex;</span><br>
          gap: 20px; /* 隙間の指定も簡単 */<br>
        }<br><br>
        /* 割合の指定 */<br>
        <span class="haside-make2-hl-blue">main</span> { flex: 3; }  /* メインは広め(3) */<br>
        <span class="haside-make2-hl-blue">aside</span> { flex: 1; } /* サイドは狭め(1) */
      </div>
      <p class="haside-make2-note">※HTMLの記述順を変えるだけで、右（right）と左（left）を簡単に切り替えることができます。floatはもう不要です。</p>
    </div>

  </div>
</div>

CSSコード表示

.haside-make2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.haside-make2-demo-area {
  display: flex;
  justify-content: center;
}
.haside-make2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}
.haside-make2-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

/* Flexboxコンテナ */
.haside-make2-flex-container {
  display: flex;
  gap: 15px;
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 8px;
}

/* メインコンテンツ（広め） */
.haside-make2-main-content {
  flex: 3; /* 割合3 */
  background-color: #cfe2ff;
  border: 2px solid #0d6efd;
  padding: 20px 10px;
  text-align: center;
  font-weight: bold;
  color: #084298;
  border-radius: 4px;
}

/* サイドバー（狭め） */
.haside-make2-sidebar-content {
  flex: 1; /* 割合1 */
  background-color: #d1e7dd;
  border: 2px solid #198754;
  padding: 20px 10px;
  text-align: center;
  font-weight: bold;
  color: #0f5132;
  border-radius: 4px;
}

.haside-make2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  margin-top: 20px;
  border-left: 4px solid #6c757d;
}
.haside-make2-hl-green { color: #98c379; font-weight: bold; }
.haside-make2-hl-blue { color: #61afef; font-weight: bold; }
.haside-make2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

Bootstrapやテンプレートを利用したレスポンシブな実装

PCでは横に並んでいるサイドバーも、画面が狭いスマートフォンで見た時には、メインコンテンツの下に縦並びに移動する（レスポンシブデザイン）のが必須要件です。

これを手動でCSS（メディアクエリ）を書いて実装もできますが、実務ではBootstrapのようなCSSフレームワークやレスポンシブ対応済みのテンプレートのグリッドシステムを利用して瞬時に実装することがよくあります。

初心者がレイアウトを組む際、PC表示のことしか考えずにdisplay: flex;を指定したまま放置することがあります。

そうすると、スマホの狭い画面でも「メイン」と「サイドバー」が無理やり横に並ぼうとし、メイン記事の文字が1行に数文字しか入らないほど極細になるレイアウト崩壊を起こします。

Bootstrapのクラス（例：col-md-8, col-md-4）を使えば、「パソコン（mdサイズ以上）では 8：4 の割合で横に並べ、スマホでは 12：12（つまり縦に100%の幅で並ぶ）にする」という複雑な挙動を、HTMLにクラス名を書くだけで実現できます。

↔️ 下のスライダーを動かして「画面幅」をスマホサイズまで狭めてみてください

📱 レスポンシブなサイドバーの挙動（Bootstrap風）

<main>
(Bootstrapでのクラス例：col-12 col-md-8)

<!– Bootstrapフレームワークを使った実装イメージ –>
<div class=”row“>
  <!– md(タブレット以上)では8/12の幅、それ未満は全幅 –>
  <main class=”col-12 col-md-8“>メイン</main>

  <!– mdでは4/12の幅、それ未満は全幅(下に落ちる) –>
  <aside class=”col-12 col-md-4“>サイドバー</aside>
</div>

HTMLコード表示

<div class="haside-make3-wrapper">
  
  <div class="haside-make3-demo-area">
    
    <div class="haside-make3-control">
      <label for="haside-make3-slider" style="font-size: 13px; font-weight:bold; color:#0d6efd;">
        ↔️ 下のスライダーを動かして「画面幅」をスマホサイズまで狭めてみてください
      </label><br>
      <input type="range" id="haside-make3-slider" min="300" max="600" value="600" style="width: 100%; max-width: 300px; margin-top: 10px; cursor: pointer;">
    </div>

    <div class="haside-make3-box">
      <div class="haside-make3-label">📱 レスポンシブなサイドバーの挙動（Bootstrap風）</div>
      
      <div id="haside-make3-viewport" class="haside-make3-viewport">
        <div class="haside-make3-row">
          
          <main class="haside-make3-col-main">
            <main><br>
            <span style="font-size: 11px; font-weight: normal;">(Bootstrapでのクラス例：col-12 col-md-8)</span>
          </main>
          
          <aside class="haside-make3-col-sidebar">
            <aside><br>
            <span style="font-size: 11px; font-weight: normal;">(Bootstrapでのクラス例：col-12 col-md-4)</span>
          </aside>
          
        </div>
      </div>

      <div class="haside-make3-code">
        <!-- Bootstrapフレームワークを使った実装イメージ --><br>
        <div class="<span class="haside-make3-hl-blue">row</span>"><br>
          <!-- md(タブレット以上)では8/12の幅、それ未満は全幅 --><br>
          <main class="<span class="haside-make3-hl-green">col-12 col-md-8</span>">メイン</main><br><br>
          <!-- mdでは4/12の幅、それ未満は全幅(下に落ちる) --><br>
          <aside class="<span class="haside-make3-hl-green">col-12 col-md-4</span>">サイドバー</aside><br>
        </div>
      </div>
    </div>

  </div>
</div>

CSSコード表示

.haside-make3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.haside-make3-demo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* スライダーコントロール */
.haside-make3-control {
  background-color: #e7f1ff;
  border: 2px solid #b6d4fe;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}

.haside-make3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 650px;
  border-radius: 4px;
}
.haside-make3-label { font-size: 15px; font-weight: bold; margin-bottom: 15px; color: #333; }

/* コンテナクエリの基準（疑似的な画面幅） */
.haside-make3-viewport {
  width: 100%;
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 2px solid #adb5bd;
  box-sizing: border-box;
  container-type: inline-size; /* ★コンテナクエリを有効化 */
  margin-left: auto;
  margin-right: auto;
  transition: width 0.1s ease;
}

/* Bootstrapの row を模倣 */
.haside-make3-row {
  display: flex;
  flex-wrap: wrap; /* 子要素がはみ出たら下に落とす */
  gap: 15px;
}

/* Bootstrapのグリッドをコンテナクエリで模倣 */
/* デフォルト（スマホ状態）は100%幅 */
.haside-make3-col-main,
.haside-make3-col-sidebar {
  width: 100%;
  padding: 20px;
  font-weight: bold;
  text-align: center;
  border-radius: 4px;
  box-sizing: border-box;
}

.haside-make3-col-main {
  background-color: #cfe2ff;
  border: 2px solid #0d6efd;
  color: #084298;
}

.haside-make3-col-sidebar {
  background-color: #d1e7dd;
  border: 2px solid #198754;
  color: #0f5132;
}

/* 疑似画面幅が 500px 以上の時だけ横並び（PC状態）にする */
@container (min-width: 500px) {
  .haside-make3-col-main {
    /* gap分の計算を簡易化して約70%（col-8相当） */
    width: calc(66.6% - 10px); 
  }
  .haside-make3-col-sidebar {
    /* 約30%（col-4相当） */
    width: calc(33.3% - 5px); 
  }
}

.haside-make3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.haside-make3-hl-green { color: #98c379; font-weight: bold; }
.haside-make3-hl-blue { color: #61afef; font-weight: bold; }

JavaScriptコード表示

// スライダーと疑似画面幅（コンテナ）を連動させるJS
document.addEventListener('DOMContentLoaded', function() {
  const slider = document.getElementById('haside-make3-slider');
  const viewport = document.getElementById('haside-make3-viewport');

  if(slider && viewport) {
    slider.addEventListener('input', function() {
      // 最大幅の中でパーセンテージか固定pxで可変させる
      viewport.style.width = this.value + 'px';
    });
  }
});

asideタグに含めるべき内容とSEOへの影響

「<aside>タグを使うとSEO（検索順位）に有利になるのか？」というのは、多くのWeb担当者やコーダーが抱く疑問です。

結論から言うと、<aside>タグを使ったからといって直接的に検索順位が上がる保証はありません。

しかし、検索エンジンに対して「ここはメインのテーマではないので、重要視しなくていい」と伝える効果があります。

これにより、ページ本来のキーワードが薄まるのを防ぎ、結果として間接的なSEO効果をもたらします。

ここでは、具体的にどのような内容を含めるべきか、実務でよくある構造のミスについて解説します。

asideタグに含めるべき内容とSEOへの影響

バナー広告・プロフィール・関連記事などの配置
メインコンテンツと関連性が低い場合の扱い方

バナー広告・プロフィール・関連記事などの配置

<aside>タグの中に配置するコンテンツの代表例は、「バナー広告」「筆者プロフィール」「最新記事・関連記事リスト」などです。

これらは「本文ではないが、ユーザーの役に立つ補足情報」の典型です。

バナー広告やプロフィールは<aside>で囲むのがよいです。

これにより、Googleのクローラーは「この記事は『HTMLの書き方』について書かれているが、横にある『筆者の飼い犬のプロフィール』は本文とは無関係」と除外してページを評価します。

🧩 asideに含める典型的なコンテンツ例

<!– 💡 検索エンジンに「ここは補足(ノイズ)だよ」と伝える –>
<aside class=”sidebar”>
  <!– プロフィール –>
  <section class=”widget”>…</section>

  <!– 広告（SEO評価から除外されやすい） –>
  <div class=”ad-banner”>…</div>

  <!– 関連記事 –>
  <div class=”related-posts”>…</div>
</aside>

HTMLコード表示

<div class="haside-seo1-wrapper">
  
  <div class="haside-seo1-demo-area">
    <div class="haside-seo1-box">
      <div class="haside-seo1-label">🧩 asideに含める典型的なコンテンツ例</div>
      
      <div class="haside-seo1-visual">
        <aside class="haside-seo1-sidebar">
          
          <div class="haside-seo1-widget">
            <div class="haside-seo1-widget-title">この記事を書いた人</div>
            <div class="haside-seo1-profile">
              <div class="haside-seo1-avatar">👨‍💻</div>
              <div class="haside-seo1-prof-text">
                <strong>Sugi</strong><br>
                Webフロントエンドエンジニア。HTML/CSSの基礎から実務の設計まで分かりやすく解説します。
              </div>
            </div>
          </div>

          <div class="haside-seo1-widget">
            <div class="haside-seo1-widget-title">スポンサーリンク</div>
            <div class="haside-seo1-ad-banner">
              [広告] 未経験からプロになる<br>Webデザインスクール
            </div>
          </div>

          <div class="haside-seo1-widget">
            <div class="haside-seo1-widget-title">よく読まれている記事</div>
            <ul class="haside-seo1-post-list">
              <li><a href="#">divとsectionの正しい使い分け</a></li>
              <li><a href="#">CSS Flexboxの完全ガイド</a></li>
            </ul>
          </div>

        </aside>
      </div>

      <div class="haside-seo1-code">
        <!-- 💡 検索エンジンに「ここは補足(ノイズ)だよ」と伝える --><br>
        <span class="haside-seo1-hl-green"><aside class="sidebar"></span><br>
          <!-- プロフィール --><br>
          <section class="widget">...</section><br><br>
          <!-- 広告（SEO評価から除外されやすい） --><br>
          <div class="ad-banner">...</div><br><br>
          <!-- 関連記事 --><br>
          <div class="related-posts">...</div><br>
        <span class="haside-seo1-hl-green"></aside></span>
      </div>
    </div>
  </div>
</div>

CSSコード表示

.haside-seo1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.haside-seo1-demo-area {
  display: flex;
  justify-content: center;
}
.haside-seo1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
}
.haside-seo1-label { font-size: 15px; font-weight: bold; margin-bottom: 15px; color: #333; }

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

.haside-seo1-sidebar {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ced4da;
}

/* ウィジェット共通スタイル */
.haside-seo1-widget { margin-bottom: 20px; }
.haside-seo1-widget:last-child { margin-bottom: 0; }
.haside-seo1-widget-title {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #495057;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 5px;
}

/* プロフィール */
.haside-seo1-profile { display: flex; gap: 10px; align-items: center; }
.haside-seo1-avatar { font-size: 30px; background: #e7f1ff; border-radius: 50%; padding: 5px; }
.haside-seo1-prof-text { font-size: 11px; color: #666; line-height: 1.4; }

/* 広告バナー */
.haside-seo1-ad-banner {
  background-color: #fff3cd;
  color: #856404;
  text-align: center;
  padding: 15px;
  font-size: 12px;
  border: 1px dashed #ffeeba;
  font-weight: bold;
}

/* 記事リスト */
.haside-seo1-post-list { margin: 0; padding-left: 20px; font-size: 12px; }
.haside-seo1-post-list li { margin-bottom: 5px; }
.haside-seo1-post-list a { color: #0d6efd; text-decoration: none; }

.haside-seo1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.haside-seo1-hl-green { color: #98c379; font-weight: bold; }

メインコンテンツと関連性が低い場合の扱い方

<aside>タグに含める情報が「メインコンテンツとどれくらい関連しているか」によって、実はHTML上での正しい配置場所が変わります。

ここを正確に使い分けることがマークアップの理解につながります。

記事と「関連性が強い」場合
例えば記事内で出てきた専門用語の解説コラムなどは、記事に属する情報なので<article>の内側に<aside>を配置します。
記事と「関連性が低い（共通情報）」場合
サイト共通の広告バナーやカテゴリ一覧などは、記事に属さない独立した情報なので<article>の外側（<main>や<body>直下）に<aside>を配置します。

🔍 関連性によるasideの配置場所（SEO対策）

<article> メイン記事

今日はHTMLのasideについて解説します。専門用語が多くて難しいですね。

<!– SEOで評価を下げない正しい構造 –>
<main>
  <article>
    <h1>メイン記事タイトル</h1>
    <p>本文…</p>
    <!– ① 記事に関連する補足 –>
    <aside>用語解説</aside>
  </article>
</main>

<!– ② 記事とは直接関係ない共通サイドバー –>
<!– ★必ずarticleタグの外に配置する！ –>
<aside class=”sidebar”>
  広告や最新記事リスト
</aside>

※「このasideは、この記事の一部か？それともサイトの一部か？」を考えることが、SEOに強いHTML設計のコツです。

HTMLコード表示

<div class="haside-seo2-wrapper">
  
  <div class="haside-seo2-demo-area">
    <div class="haside-seo2-box">
      <div class="haside-seo2-label">🔍 関連性によるasideの配置場所（SEO対策）</div>
      
      <div class="haside-seo2-visual">
        <div class="haside-seo2-body-mock">
          
          <div class="haside-seo2-main-col">
            <article class="haside-seo2-article-mock">
              <div style="margin:0 0 10px 0; color:#0d6efd;"><article> メイン記事</div>
              <p style="font-size:12px; color:#333; margin:0 0 10px 0;">今日はHTMLのasideについて解説します。専門用語が多くて難しいですね。</p>
              
              <aside class="haside-seo2-inner-aside">
                <span class="haside-seo2-badge">① 記事に関連</span>
                <aside><br>
                用語解説：セマンティックとは？<br>
                <span style="font-size:10px; font-weight:normal;">※記事を読む助けになる情報なのでarticleの中</span>
              </aside>
            </article>
          </div>

          <aside class="haside-seo2-outer-aside">
            <span class="haside-seo2-badge haside-seo2-badge-red">② 記事に関連しない</span>
            <aside><br>
            サイト共通サイドバー<br>
            ・バナー広告<br>
            ・最新記事一覧<br>
            <span style="font-size:10px; font-weight:normal;">※記事固有の情報ではないのでarticleの外</span>
          </aside>

        </div>
      </div>

      <div class="haside-seo2-code">
        <!-- SEOで評価を下げない正しい構造 --><br>
        <main><br>
          <article><br>
            <h1>メイン記事タイトル</h1><br>
            <p>本文...</p><br>
            <!-- ① 記事に関連する補足 --><br>
            <span class="haside-seo2-hl-green"><aside></span>用語解説<span class="haside-seo2-hl-green"></aside></span><br>
          </article><br>
        </main><br><br>
        <!-- ② 記事とは直接関係ない共通サイドバー --><br>
        <!-- ★必ずarticleタグの外に配置する！ --><br>
        <span class="haside-seo2-hl-red"><aside class="sidebar"></span><br>
          広告や最新記事リスト<br>
        <span class="haside-seo2-hl-red"></aside></span>
      </div>
      <p class="haside-seo2-note">※「このasideは、この記事の一部か？それともサイトの一部か？」を考えることが、SEOに強いHTML設計のコツです。</p>
    </div>
  </div>
</div>

CSSコード表示

.haside-seo2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.haside-seo2-demo-area {
  display: flex;
  justify-content: center;
}
.haside-seo2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 550px;
  border-radius: 4px;
}
.haside-seo2-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

.haside-seo2-visual {
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 疑似レイアウト */
.haside-seo2-body-mock {
  display: flex;
  gap: 15px;
}

.haside-seo2-main-col {
  flex: 2;
}

/* articleモック */
.haside-seo2-article-mock {
  background-color: #cfe2ff;
  border: 2px solid #0d6efd;
  padding: 15px;
  border-radius: 4px;
}

/* 記事内のaside（緑） */
.haside-seo2-inner-aside {
  background-color: #d1e7dd;
  border: 2px dashed #198754;
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #0f5132;
  font-weight: bold;
  position: relative;
  margin-top: 10px;
}

/* 記事外のaside（赤） */
.haside-seo2-outer-aside {
  flex: 1;
  background-color: #f8d7da;
  border: 2px dashed #dc3545;
  padding: 15px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: #842029;
  font-weight: bold;
  position: relative;
}

.haside-seo2-badge {
  display: inline-block;
  background: #198754;
  color: #fff;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 2px;
  margin-bottom: 5px;
}
.haside-seo2-badge-red {
  background: #dc3545;
}

.haside-seo2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.haside-seo2-hl-green { color: #98c379; font-weight: bold; }
.haside-seo2-hl-red { color: #e06c75; font-weight: bold; }
.haside-seo2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }