はじめに
HTML では、<summary>
タグを使用して、Web ページに表示されているコンテンツ用の展開可能かつ折りたたみ可能な要約要素を作成します。
注:
index.html
でコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
HTML では、<summary>
タグを使用して、Web ページに表示されているコンテンツ用の展開可能かつ折りたたみ可能な要約要素を作成します。
注:
index.html
でコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
<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
属性を追加することで、コンテンツの現在の状態を提供し、障害者向けにアクセス可能にすることができます。