コンテンツ区分

sectionタグの使い方 [HTMLリファレンス]

HTMLのタグは、文書内の関連するコンテンツをグループ化するために使用されます。

このタグは、記事、ブログ投稿、ニュース項目など、独立したテーマを持つコンテンツのセクションを示すのに適しています。

通常、タグ内にはh1からh6までの見出しタグが含まれ、セクションの内容を説明します。

また、タグは、articleタグやasideタグと組み合わせて使用されることが多く、文書の構造を明確にします。

目次から探す

sectionタグとは
sectionタグの基本的な使い方
sectionタグの実用例
sectionタグのアクセシビリティ
sectionタグのスタイリング
sectionタグの応用例
まとめ

sectionタグとは

sectionタグの基本的な役割

sectionタグは、HTML文書内で関連するコンテンツをグループ化するために使用されます。

主に、文書のセクションを明確にし、構造を持たせるために利用されます。

例えば、ブログ記事の各章やニュース記事の各セクションを分ける際に役立ちます。

sectionタグを使用することで、コンテンツの意味を明確にし、読み手や検索エンジンにとって理解しやすい構造を提供します。

他のHTMLタグとの違い

sectionタグは、他のセマンティックタグと異なる特性を持っています。

以下の表で、代表的なタグとの違いを示します。

タグ名	用途の違い
section	関連するコンテンツをグループ化し、文書のセクションを明確にするために使用
article	独立したコンテンツを表し、他の場所でも再利用可能な内容に適用される
div	スタイリングやスクリプトのために使用されるが、セマンティックな意味は持たない

HTML5におけるsectionタグの位置づけ

HTML5では、sectionタグはセマンティックな意味を持つタグとして位置づけられています。

これは、文書の構造をより明確にし、アクセシビリティを向上させるための重要な要素です。

sectionタグは、見出しタグ(h1〜h6)と組み合わせて使用されることが推奨されており、これにより、文書内の各セクションの内容を明確に示すことができます。

HTML5の導入により、sectionタグはより多くの開発者に利用されるようになり、ウェブコンテンツの構造化に貢献しています。

sectionタグの基本的な使い方

sectionタグの基本構文

sectionタグの基本構文は非常にシンプルです。

以下のように、開始タグ <section> と終了タグ </section> で囲むことで、セクションを定義します。

<section>
  <!-- ここにセクションの内容を記述 -->
</section>

この構文を使用することで、関連するコンテンツを一つのまとまりとして扱うことができます。

sectionタグのネスト

sectionタグは、他のsectionタグの中にネストして使用することが可能です。

これにより、より複雑な文書構造を作成することができます。

例えば、以下のように、セクション内にさらに小さなセクションを作成することができます。

<section>
  <h2>メインセクション</h2>
  <section>
    <h3>サブセクション1</h3>
    <p>サブセクション1の内容</p>
  </section>
  <section>
    <h3>サブセクション2</h3>
    <p>サブセクション2の内容</p>
  </section>
</section>

このようにネストすることで、文書の階層構造を明確に表現できます。

sectionタグと見出しタグの関係

sectionタグは、見出しタグ(h1〜h6)と組み合わせて使用することが推奨されています。

見出しタグを使用することで、各セクションの内容を明確に示し、文書の構造をより理解しやすくします。

以下の例では、sectionタグと見出しタグを組み合わせて、セクションのタイトルを設定しています。

<section>
  <h2>セクションタイトル</h2>
  <p>このセクションの内容</p>
</section>

見出しタグを使用することで、セクションの内容が何であるかを明確にし、読み手や検索エンジンにとって理解しやすい文書を作成することができます。

sectionタグの実用例

ブログ記事でのsectionタグの使用

ブログ記事では、sectionタグを使用して記事の各セクションを明確に分けることができます。

例えば、イントロダクション、本文、結論といった構造を持つ記事の場合、それぞれをsectionタグで囲むことで、文書の構造を明確にします。

<article>
  <section>
    <h2>イントロダクション</h2>
    <p>この記事の概要を説明します。</p>
  </section>
  <section>
    <h2>本文</h2>
    <p>ここに記事のメインコンテンツを記述します。</p>
  </section>
  <section>
    <h2>結論</h2>
    <p>記事のまとめを記述します。</p>
  </section>
</article>

このようにすることで、読者は記事の構造を直感的に理解しやすくなります。

ニュースサイトでのsectionタグの活用

ニュースサイトでは、sectionタグを使って各ニュース記事をセクションとして分けることができます。

これにより、各ニュース記事が独立したセクションとして扱われ、サイト全体の構造が整理されます。

<main>
  <section>
    <h2>政治ニュース</h2>
    <article>
      <h3>ニュースタイトル1</h3>
      <p>ニュースの内容を記述します。</p>
    </article>
    <article>
      <h3>ニュースタイトル2</h3>
      <p>ニュースの内容を記述します。</p>
    </article>
  </section>
  <section>
    <h2>経済ニュース</h2>
    <article>
      <h3>ニュースタイトル3</h3>
      <p>ニュースの内容を記述します。</p>
    </article>
  </section>
</main>

このように、ニュースのカテゴリごとにsectionタグを使用することで、情報が整理され、ユーザーが必要な情報を見つけやすくなります。

商品ページでのsectionタグの応用

商品ページでは、sectionタグを使って商品の詳細情報を整理することができます。

例えば、商品説明、仕様、レビューといった情報をそれぞれのセクションに分けることで、ユーザーが情報を簡単に見つけられるようになります。

<article>
  <section>
    <h2>商品説明</h2>
    <p>商品の概要を説明します。</p>
  </section>
  <section>
    <h2>仕様</h2>
    <ul>
      <li>サイズ: M</li>
      <li>カラー: ブラック</li>
      <li>素材: コットン</li>
    </ul>
  </section>
  <section>
    <h2>レビュー</h2>
    <p>ユーザーのレビューを記述します。</p>
  </section>
</article>

このようにsectionタグを活用することで、商品ページの情報が整理され、ユーザーエクスペリエンスが向上します。

sectionタグのアクセシビリティ

スクリーンリーダーへの影響

sectionタグは、スクリーンリーダーに対して文書の構造を明確に伝える役割を果たします。

スクリーンリーダーは、sectionタグを認識し、ユーザーにセクションの開始を知らせることができます。

これにより、視覚障害のあるユーザーが文書の内容をより理解しやすくなります。

特に、見出しタグと組み合わせることで、セクションの内容をより明確に伝えることが可能です。

SEOへの影響

sectionタグは、SEO(検索エンジン最適化)においても重要な役割を果たします。

検索エンジンは、sectionタグを使用して文書の構造を理解し、コンテンツの関連性を評価します。

適切にsectionタグを使用することで、検索エンジンがページの内容をより正確に把握し、検索結果での評価が向上する可能性があります。

特に、見出しタグと組み合わせることで、キーワードの関連性を強調することができます。

sectionタグとARIAロールの関係

sectionタグは、ARIA(Accessible Rich Internet Applications)ロールと組み合わせて使用することができます。

ARIAロールを使用することで、sectionタグの意味をさらに明確にし、アクセシビリティを向上させることが可能です。

例えば、role="region" を使用することで、特定のセクションが重要な領域であることを示すことができます。

<section role="region" aria-labelledby="section-title">
  <h2 id="section-title">重要なセクション</h2>
  <p>このセクションの内容を記述します。</p>
</section>

このように、ARIAロールを適切に使用することで、スクリーンリーダーがセクションの重要性を理解しやすくなり、アクセシビリティが向上します。

sectionタグのスタイリング

CSSでのsectionタグの基本スタイリング

sectionタグは、CSSを使用してスタイリングすることができます。

基本的なスタイリングとして、背景色や余白、ボーダーなどを設定することが一般的です。

以下は、sectionタグに対する基本的なスタイリングの例です。

section {
  background-color: #f9f9f9; /* 背景色を設定 */
  padding: 20px; /* 内側の余白を設定 */
  border: 1px solid #ddd; /* ボーダーを設定 */
  margin-bottom: 20px; /* 下部の余白を設定 */
}

このスタイリングにより、sectionタグで囲まれたコンテンツが視覚的に区切られ、読みやすくなります。

sectionタグにおけるレスポンシブデザイン

レスポンシブデザインを実現するために、sectionタグにメディアクエリを使用することができます。

これにより、デバイスの画面サイズに応じてスタイルを調整することが可能です。

以下は、sectionタグに対するレスポンシブデザインの例です。

section {
  padding: 20px;
}
@media (max-width: 768px) {
  section {
    padding: 10px; /* 小さい画面では余白を減らす */
  }
}

この例では、画面幅が768px以下の場合に、sectionタグの内側の余白を小さくすることで、モバイルデバイスでの表示を最適化しています。

sectionタグとFlexboxの組み合わせ

Flexboxを使用することで、sectionタグ内のコンテンツを柔軟に配置することができます。

Flexboxは、コンテナ内のアイテムを整列させるための強力なツールです。

以下は、sectionタグにFlexboxを適用した例です。

section {
  display: flex; /* Flexboxを有効にする */
  justify-content: space-between; /* アイテム間のスペースを均等に配置 */
  align-items: center; /* アイテムを中央に揃える */
}
section > div {
  flex: 1; /* 各アイテムが均等にスペースを取る */
}

このスタイリングにより、sectionタグ内のコンテンツが整然と配置され、レイアウトがより洗練されます。

Flexboxを使用することで、複雑なレイアウトも簡単に実現できます。

sectionタグの応用例

sectionタグとJavaScriptの連携

sectionタグは、JavaScriptと連携して動的なコンテンツを作成する際に非常に便利です。

JavaScriptを使用して、sectionタグ内のコンテンツを動的に変更したり、ユーザーの操作に応じて表示・非表示を切り替えることができます。

以下は、JavaScriptを使用してsectionタグの内容を変更する例です。

<section id="dynamicSection">
  <h2>動的なセクション</h2>
  <p>ここに動的なコンテンツが表示されます。</p>
</section>
<script>
  // ボタンをクリックしたときにセクションの内容を変更する関数
  function updateSectionContent() {
    const section = document.getElementById('dynamicSection');
    section.innerHTML = '<h2>更新されたセクション</h2><p>新しいコンテンツが表示されました。</p>';
  }
</script>
<button onclick="updateSectionContent()">セクションを更新</button>

この例では、ボタンをクリックすると、JavaScriptによってsectionタグ内のコンテンツが更新されます。

sectionタグを用いたSPAの構築

シングルページアプリケーション(SPA)では、sectionタグを使用して異なるビューを管理することができます。

SPAでは、ページ全体を再読み込みせずに、sectionタグを切り替えることで異なるコンテンツを表示します。

以下は、sectionタグを用いたSPAの基本的な構造の例です。

<section id="home" style="display: block;">
  <h2>ホーム</h2>
  <p>ホームページのコンテンツです。</p>
</section>
<section id="about" style="display: none;">
  <h2>アバウト</h2>
  <p>アバウトページのコンテンツです。</p>
</section>
<script>
  // ページを切り替える関数
  function showSection(sectionId) {
    document.querySelectorAll('section').forEach(section => {
      section.style.display = 'none';
    });
    document.getElementById(sectionId).style.display = 'block';
  }
</script>
<button onclick="showSection('home')">ホーム</button>
<button onclick="showSection('about')">アバウト</button>

この例では、ボタンをクリックすることで、表示するsectionタグを切り替えています。

sectionタグと他のセマンティックタグの組み合わせ

sectionタグは、他のセマンティックタグと組み合わせて使用することで、文書の構造をより明確にすることができます。

例えば、articleタグやasideタグと組み合わせることで、コンテンツの意味をより具体的に表現できます。

<article>
  <section>
    <h2>記事のセクション1</h2>
    <p>セクション1の内容です。</p>
  </section>
  <section>
    <h2>記事のセクション2</h2>
    <p>セクション2の内容です。</p>
  </section>
</article>
<aside>
  <section>
    <h2>関連情報</h2>
    <p>関連情報の内容です。</p>
  </section>
</aside>

このように、sectionタグを他のセマンティックタグと組み合わせることで、文書全体の構造がより明確になり、ユーザーや検索エンジンにとって理解しやすいコンテンツを提供できます。