HTML の詳細と要約をマスターする

はじめに

HTML では、<summary> タグを使用して、Web ページに表示されているコンテンツ用の展開可能かつ折りたたみ可能な要約要素を作成します。

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/LayoutandSectioningGroup -.-> html/access_cons("Accessibility Considerations") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") html/AdvancedElementsGroup -.-> html/adv_access("Accessibility for Advanced Elements") subgraph Lab Skills html/basic_elems -.-> lab-70849{{"HTML の詳細と要約"}} html/lists_desc -.-> lab-70849{{"HTML の詳細と要約"}} html/layout -.-> lab-70849{{"HTML の詳細と要約"}} html/doc_flow -.-> lab-70849{{"HTML の詳細と要約"}} html/access_cons -.-> lab-70849{{"HTML の詳細と要約"}} html/inter_elems -.-> lab-70849{{"HTML の詳細と要約"}} html/custom_attr -.-> lab-70849{{"HTML の詳細と要約"}} html/adv_access -.-> lab-70849{{"HTML の詳細と要約"}} end

`<details>` タグの追加

<summary> タグを追加する前に、展開または折りたたみ可能なコンテンツセクションを作成する必要があります。そのために、<details> タグを使用します。<body> タグの中の index.html ファイルに次のコードを追加します。

<details>
  <summary>Click me to see the content</summary>
  <p>Content goes here.</p>
</details>

上記のコードでは、コンテンツの要約を定義するために、<details> タグの中に <summary> タグを追加しています。

`aria-expanded` 属性の追加

コンテンツの現在の状態を提供するために、<details> タグに aria-expanded 属性を追加することができます。コンテンツが展開されている場合、aria-expanded の値は true になり、折りたたまれている場合、値は false になります。aria-expanded 属性を含めるために、<summary> タグの後に次のコードを追加します。

<details>
  <summary aria-expanded="false">Click me to see the content</summary>
  <p>Content goes here.</p>
</details>

`<summary>` タグのスタイリング

<summary> タグには特定の属性はありませんが、CSS を使ってスタイリングすることができます。<summary> タグにいくつかのスタイリングを追加するために、<style> タグに次のコードを追加します。

summary {
  padding: 10px;
  background-color: #eee;
  cursor: pointer;
}

さらにコンテンツを追加する

<details> タグの中にさらにコンテンツを追加することができ、自動的に展開可能かつ折りたたみ可能になります。最初の段落の後に次のコードを追加して、さらにコンテンツを追加します。

<details>
  <summary aria-expanded="false">Click me to see the content</summary>
  <p>Content goes here.</p>
  <p>More content.</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</details>

複数の展開可能なセクションの追加

ウェブページに複数の展開可能なセクションを追加することができます。別の展開可能なセクションを作成するために、次のコードを追加します。

<details>
  <summary aria-expanded="false">Another section</summary>
  <p>Content of another section</p>
</details>

要約

<summary> タグは、ウェブページ上のコンテンツの展開可能かつ折りたたみ可能なセクションを作成するために使用できます。<details> タグの中にさらにコンテンツを追加し、スタイリングを使って <summary> タグの外観をカスタマイズすることができます。aria-expanded 属性を追加することで、コンテンツの現在の状態を提供し、障害者向けにアクセス可能にすることができます。

HTML の詳細と要約