HTML・CSS：詳細を折りたたんだ状態で表示させるdetailsタグ、折りたたんだ詳細の内容を作成するsummaryタグ、inputの機能をグレードアップしたフォームを作成するdatalistタグ

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

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

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

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

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

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

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

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

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

<details>タグとは

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

<details>タグの属性

name同じ名前を付けた<details>の中身（<summary>）を１つ開いたら他を閉じる…みたい、排他的な状態にする
openデフォルトで詳細が開いた状態にする
name属性の使い方

name属性の使い方について少しわかりづらいかと思いましたので、実際に使ってみることにしました。↓

いちもんじとは いちもんじとは、フリーゲームの製作者である。代表作は「罪と罰」、「醍醐くんの飯活！！」など。
醍醐くんの飯活！！ ３日後にあなたは命を落とします。と同級生から唐突に告げられた戸門。彼のことを救う代わりに昼ご飯をおごってもらうお話。
<details name=ichi>
<summary>いちもんじとは</summary>
いちもんじとは、フリーゲームの製作者である。代表作は「罪と罰」、「醍醐くんの飯活！！」など。<br>
</details>
<details name=ichi>
<summary>醍醐くんの飯活！！</summary>
３日後にあなたは命を落とします。と同級生から唐突に告げられた戸門。彼のことを救う代わりに昼ご飯をおごってもらうお話。<br>
</details>

ここで→name=”名前の指定”←指定したichiというのが２つの項目を繋げる要素であり、ひとつ開いたらひとつは閉じる、またひとつ開いたらひとつは閉じる、という状態になっています。実際に触ってみると分かると思います。

open属性の使い方

open属性は、初めから最初の項目を開いた状態にしておくことが出来る属性になります。↓の場合はいちもんじとは～の部分にopen属性を付けているので、クリックせずとも最初から詳細情報が開いていると思います。

いちもんじとは いちもんじとは、フリーゲームの製作者である。代表作は「罪と罰」、「醍醐くんの飯活！！」など。
醍醐くんの飯活！！ ３日後にあなたは命を落とします。と同級生から唐突に告げられた戸門。彼のことを救う代わりに昼ご飯をおごってもらうお話。
 <details name="frame-characteristics" open>
<summary>いちもんじとは</summary>
いちもんじとは、フリーゲームの製作者である。代表作は「罪と罰」、「醍醐くんの飯活！！」など。<br>
</details>
 <details name="frame-characteristics" id="d2">
<summary>醍醐くんの飯活！！</summary>
３日後にあなたは命を落とします。と同級生から唐突に告げられた戸門。彼のことを救う代わりに昼ご飯をおごってもらうお話。<br></details>

<summary>タグとは

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

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

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

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

気を付けたいのは、<summary>タグの内側に概要の内容を突っ込むわけではないということでしょう。あくまでも<summary>は概要のタイトル部分になるので、詳細については</summary>のあとに普通に書き連ねることになります。つまり<details>の中に詳細の説明を書く、ということですね。

<summary>タグの属性

<summary>タグの属性はグローバル属性のみになります。

<datalist>タグとは

<datalist>タグは<option>タグ<input>タグをセットで使用します。具体的な働きとして、<input>タグを用いたフォームの作成において便利具合を高めることができるタグです。↓

<label>
 Animal:
 <input name=animal list=animals>
 <datalist id=animals>
  <option value="Cat">
  <option value="Dog">
 </datalist>
</label>

<select>タグと何が違うの？

<select>タグもプルダウンで項目を作成できるタグでした。

HTML・CSS：プルダウン形式のフォームを作成するselectタグ、プルダウン内の選択肢を作成するoptionタグ、タグのグループ化をするoptgroupタグ、区切られたフォームを作成・グループ化するfieldsetタグ、区切られたフォームに説明を付加するlegendタグ
HTML・CSS：プルダウン形式のフォームを作成するselectタグ、プルダウン内の選択肢を作成するoptionタグ、区切られたフォームを作成・グループ化するfieldsetタグ、区切られたフォームに説明を付加するlegendタグ
111111monji.com
2023.12.20

見た目上では特に変わりは無さそうです。…が、実際に扱ってみると違いが分かるかと思います。上が<datalist>タグで、下が<select>タグになります。

お気づきだろうか…？上のリストは入力することも可能なのに対し、下のリストは選択肢からしか選ぶことができません。まあ…正直あまり用途が分からない…と思っていたら！よくよく調べるとめっちゃ便利でした！！！

実はめっちゃできる子な<datalist>タグの使い方


この<datalist>タグ、<input>タグで作成したフォームに対して色んな機能を付加してくれる便利なタグです。例えば<input>タグのカラー型の場合。↓

<label for="colors">色を選択して下さい:</label>
<input type="color" list="Colors" id="colors" />
<datalist id="Colors">
<option value="#2e8b57"></option>
</datalist>

このようにいくつかの項目を提示したうえで「その他」の項目を作成し、自由に色を選択できるようにします。（カラーピッカー自体は<input>タグのカラー型を指定すると表示されます。）

ちなみに<option>で何も指定しなかったらこんな風になりました。↓

<label for="colors">色を選択して下さい:</label>
<input type="color" list="Colors" id="colors" />
<datalist id="Colors">
</datalist>

また、<input>タグのrange型の場合。

<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

このようにわかりやすいメモリを表示させることも可能です。
こっちは<option>入力しないと上手く行かないようです。

と言うわけで散々コードを見て来たのでお分かりかと思いますが、この<datalist>タグは<input>をより便利にしたいときに使うタグです。まずは<input>でフォームを作成し、その<input>タグ内でlist属性を設定、その属性名と<datalist>タグ内にあるidを同じにすることによって<input>と紐づけましょう。そして詳しい内容は<option>内に書き記します。

<label for="tick">表示したいテキスト</label>
<input type="機能を加えたいフォームの種類指定" list="わかりやすいリスト名（例：ichimonjiikemen）" min="0" max="100" id="tick" name="tick" />
<datalist id="わかりやすいリスト名で付けたリスト名（例：ichimonjiikemen）">
↓付け足したい要素↓
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>
タイトルとURLをコピーしました