HTML の追加の詳細

はじめに

HTML の<details>タグは、任意の見出しやテキストに関する追加の詳細と情報を提供する方法を提供します。<details>タグは、既定で内部のテキストを非表示にし、ユーザーが矢印ボタンをクリックしたときのみテキストを表示します。この実験では、カスタムの要約付きで HTML の<details>タグを使用する方法を学びます。

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

基本的な

タグ

好きなテキストエディタでindex.htmlファイルを作成します。

以下のコードをコピーしてindex.htmlファイルに貼り付けます。

<details>
  <summary>Click to see more</summary>
  <p>This text is hidden and can be seen by clicking on the arrow button.</p>
</details>

これは<details>タグを使用する基本的な例です。<details>タグ内のテキストは既定で非表示になっており、ユーザーは矢印ボタンをクリックすることでテキストを表示できます。

カスタム要約

次に、<details>タグ用のカスタム要約を作成しましょう。既存のコードを以下のように変更します。

<details>
  <summary>Read more about the author</summary>
  <p>
    John Doe is a writer who has published numerous books in different genres.
  </p>
</details>

上記のコードでは、<summary>タグを使用してカスタム要約「Read more about the author」を追加し、<details>タグ内に著者の詳細を記載しています。

画像を追加する

<details>タグに画像を追加しましょう。以下のコードをコピーしてindex.htmlファイルに貼り付けます。

<details>
  <summary>Click to see more</summary>
  <p>This text is hidden and can be seen by clicking on the arrow button.</p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

上記のコードでは、<img>タグを使用して画像を追加しています。ユーザーが矢印ボタンをクリックすると、<details>タグ内の画像とテキストが表示されます。

open 属性を追加する

次に、<details> タグに open 属性を追加して、既定でテキストを表示させましょう。既存のコードを以下のように変更します。

<details open>
  <summary>Read more about the author</summary>
  <p>
    John Doe is a writer who has published numerous books in different genres.
  </p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

<details> タグの open 属性により、テキストが既定で Web ページ上に表示されることが保証されます。

まとめ

この実験では、HTML の<details>タグを使用して、見出しやテキストに関する追加の詳細と情報を提供する方法を学びました。また、カスタム要約を使用する方法と、<details>タグに画像を追加する方法も学びました。