HTML のセクションタグの利用方法

はじめに

HTML では、文書を明確に区切り、区別するために <section> タグが使用されます。これは、文書内の独立したセクションやネストされたセクションに使用できる意味論的要素です。この実験では、HTML ファイルで <section> タグを使用する簡単な手順を案内します。

注: index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

Skills Graph

基本的なセクションを追加する

まず、好きなコードエディタで index.html ファイルを作成します。このファイルには、作業する HTML コードが含まれます。

<section> タグを使用して基本的なセクションを追加しましょう。以下のように行うことができます。

<section>
  <h1>セクションのタイトル</h1>
  <p>セクションのコンテンツはここに入ります。</p>
</section>

上記のコードでは、h1 と p はそれぞれ見出しと段落の HTML タグです。h1 タグはセクションのトップレベルの見出しを定義し、p タグはセクションにテキストコンテンツを追加するために使用されます。

サブセクションを追加する

<section> タグのネストを使って、セクション内にサブセクションを作成することもできます。たとえば：

<section>
  <h1>セクションのタイトル</h1>
  <p>セクションのコンテンツはここに入ります。</p>

  <section>
    <h2>サブセクションのタイトル</h2>
    <p>サブセクションのコンテンツはここに入ります。</p>
  </section>
</section>

上記のコードでは、セクション内に別のネストされたセクションが含まれており、それがサブセクションとして機能します。ネストされたセクション内の h2 タグはサブセクションの見出しを定義し、p タグはサブセクションにテキストコンテンツを追加します。

CSS を使ったスタイリング

既定では、<section> タグは HTML のブロックレベル要素です。他の HTML 要素と同じように、CSS を使って <section> 要素にスタイルを適用することができます。以下は例です。

<style>
  section {
    border: 2px solid black;
    padding: 10px;
    margin-bottom: 20px;
  }
</style>

上記のコードでは、style タグを使って <section> タグ用の CSS を含めています。CSS コードは <section> 要素に境界線、余白、マージンを追加します。これらのプロパティは好みに応じて調整することができます。

さらにセクションを追加する

最後に、必要に応じて HTML ファイルにさらにセクションを追加することができます。セクションタグのオープンとクローズの構造に従うことを忘れないでください。

<section>
  <h1>セクション 1</h1>
  <p>コンテンツはここに入ります。</p>
</section>

<section>
  <h1>セクション 2</h1>
  <p>コンテンツはここに入ります。</p>
</section>

<section>
  <h1>セクション 3</h1>
  <p>コンテンツはここに入ります。</p>
</section>

まとめ

HTML の <section> タグは、文書を明確に区切り、区別するために文書をいくつかのセクションに分割するために使用される意味論的要素です。文書内に独立したセクションとネストされたサブセクションを作成することができます。この実験で提供された手順により、HTML ファイルに <section> タグを追加し、CSS でカスタマイズし、文書の構成と読みやすさを向上させることができます。