development_creative

この記事は1年以上経過しています。

【これからWeb制作を目指す方へ!】アコーディオン表示を実装したい!detailsタグとsummaryタグ

皆さんはご存知でしたか?

皆さん、いつの間にかhtmlにステキな機能を兼ね備えたタグがあったことを知っていますか?
筆者はこんな記事を書いているので、知る由もありませんでした。

開発者として恥ですが、せめてこちらに書き残すことで、供養をしたいと思います・・・。

detailsタグとsummaryタグとは?

両者に言えることは、以下です。

  • html5より導入された要素
  • ユーザーがクリックすることで、詳細情報を表示・非表示にするアコーディオンスタイルのセクションを生成する。
  • 一緒に使用されることが多い。(ペアタグ)

よく筆者もQ&Aなどのページを作る際に、アコーディオン欲しいな〜となり、
開け閉めのjsを書くか〜って感じでしたが、これならばお手軽に実装できますね。

詳細説明:detailsタグ

  • HTML文書内に展開可能な詳細情報を含むコンテンツブロックを定義する
  • ユーザーはコンテンツを開閉することができるようになる(アコーディオン)
  • 詳細情報は初期状態では非表示、ユーザーがタグをクリックすると展開

詳細説明:summaryタグ

  • summaryタグは、detailsタグ内で使用
  • 展開可能な詳細情報の見出しや要約を定義
  • ユーザーがクリックすることで、detailsタグ内のコンテンツが表示される際に、このタグで指定した要約(文字)が表示される

具体的なコードと表示

言葉で並べてると訳がわからなくなりますね。笑
具体的な使用の仕方は、以下のコードを参考にしてください。

<details>
    <summary>詳細情報を表示</summary>
    <p>ここに詳細情報が記載されます。</p>
</details>
  • “詳細情報を表示”という見出しがタグで定義されている。
  • クリックすると、detailsタグ内の要素で指定された詳細情報が表示される
  • detailsタグとsummaryタグを使用することで、ユーザーの必要に応じて追加情報を表示できる

上記左手がクリック前、右手がクリック後です。
アコーディオンで要素が出てきていることがわかります。

ぜひ皆様もお試しあれ。

Related ariticle

関連記事

TOP