HTML・CSS:詳細を折りたたんだ状態で表示させるdetailsタグ、折りたたんだ詳細の内容を作成するsummaryタグ、プルダウン形式のフォームを作成するdatalistタグ

<details>タグ・<summary>タグとは

<details>ディテイルズタグ<summary>サマリータグとは、詳細を折りたたんだ状態で表示させるタグになります。必ず2つセットで使用します。↓

いちもんじとは いちもんじとは、フリーゲームの製作者である。代表作は「罪と罰」、「醍醐くんの飯活!!」など。

<details>タグ・<summary>タグの使い方

  1. <details>タグで大枠を作る
  2. <summary>タグで表題を付けて</summary>で閉める
  3. それ以外の内容を作成する
  4. </details>タグで大枠を閉める

まずは、折りたたみたいコンテンツを囲うために<details>タグを書きます。その中に、折りたたんだ詳細の表題のようなものを<summary>タグで付けましょう。標題を付け終わったら</summary>でタグを閉じて、そのほかの内容を書き込んでいきます。

<details>
<summary>いちもんじとは</summary>
いちもんじとは、フリーゲームの製作者である。代表作は「罪と罰」、「醍醐くんの飯活!!」など。
</details>

<details>タグ1つにつき▶が1つ付くイメージです。そして<summary>タグは折りたたんだその内容に対して表題を付けるイメージです。中身に関しては別のタグと一緒に使っても構いません。↓

いちもんじとは いちもんじとは、フリーゲームの製作者である。代表作は「罪と罰」、「醍醐くんの飯活!!」など。
罪と罰 あなたは監禁されました。ここから出るにはパートナーと協力し謎を解いて体のパーツを手に入れてください。
ゲームのプレイはここからどうぞ。
醍醐くんの飯活!! 3日後にあなたは命を落とします。と同級生から唐突に告げられた戸門。彼のことを救う代わりに昼ご飯をおごってもらうお話。
ゲームのプレイはここからどうぞ。
<details>
    <summary>いちもんじとは</summary>
     いちもんじとは、フリーゲームの製作者である。代表作は「罪と罰」、「醍醐くんの飯活!!」など。<br />
    <details>
      <summary>罪と罰</summary>
      あなたは監禁されました。ここから出るにはパートナーと協力し謎を解いて体のパーツを手に入れてください。<br />
      <a href="https://111111monji.com/tumitobatusyoukai/" target="_blank"
        >ゲームのプレイはここからどうぞ。</a>
    </details>
    <details>
      <summary>醍醐くんの飯活!!</summary>
      3日後にあなたは命を落とします。と同級生から唐突に告げられた戸門。彼のことを救う代わりに昼ご飯をおごってもらうお話。<br />
      <a href="https://111111monji.com/daigokousin/" target="_blank"
        >ゲームのプレイはここからどうぞ。</a>
    </details>
</details>

<details>タグとは

<details>タグは、詳細を折りたたんだ状態で表示させるために大枠を作る(<div>のようなもの)タグになります。

<details>タグの属性

<summary>タグとは

<summary>には【概要】という意味があります。このタグの場合は概要のタイトル部分を指定する意味を持ちます。

いちもんじとは
いちもんじとは、フリーゲームの製作者である。代表作は「罪と罰」、「醍醐くんの飯活!!」など。

この例で行くと、いちもんじとはの部分がこの<summary>に該当します。折りたたまれている内容のタイトルなので分かりやすいものを指定すると良いと思います。

<summary>タグの属性

<summary>タグの属性はこんな感じにたくさんあります。↓

まだ更新中…。

タイトルとURLをコピーしました