簡単アコーディオンメニュー作成。便利な折り畳み表示ができる<details>タグ

WEB / プログラミング / IT系

こんにちは! あますた(@amaguristar)です。

  • 「この説明必要な人だけに表示できればいいんだよな」
  • 「折り畳み可能な目次をサクッと作りたい」

そんな時ありませんか? その悩みdetailsタグを使えば簡単に解決できます。

目次
  1. `details`タグを使うとできること
  2. 実際の使い方
  3. まとめ

detailsタグを使うとできること

まずはどんなものができるのか簡単に説明。

detailsタグを使うと こんなことが可能です。開くと詳細を確認可能。

↑左の▶︎を押すと詳細を確認可能。

「この説明長いから確認したい人だけ見た方がいいな」って時にとても便利。もちろんcssを編集すれば見た目も好みにカスタマイズ可能(今回は割愛)。

応用すれば目次にも使えます。

目次
  1. テスト1
  2. テスト2
  3. テスト3

コードを書いても良いかもしれませんね。

コード記入例
#include 

int main()
{

    return 0;
}

実際の使い方

それではサクッと実際の使い方を説明。

<details>
<summary>ここに概要</summary>
<div>ここに詳細</div>
</details>

基本は上記のみ。

<summary>〜</summary>タグに表示する概要を入れて、詳細をその下に書けば良いのみ。

当然、全てが<details>〜</details>の間に入ってる必要があります。

最初から開いた状態で表示するには<details>タグの中にopenプロパティを追加するだけ。

<details open>
<summary>オープンテスト</summary>
<div>これが開いたまま表示されてたら成功</div>
</details>

上記を実際に利用すると、

オープンテスト
これが開いたまま表示されてたら成功

↑この様に開いた(広がった?)状態で表示されます。

まとめ

いかがだったでしょうか?

今回は簡単な利用方法のみをご説明。cssで見た目をかえたり、スクリプトを追加してアニメーションをつけたりなど好みでカスタマイズ可能。

詳しいカスタム方法は別でご紹介します。

htmlだけで簡単にアコーディオンメニューを作成できる<details>タグをぜひ利用してみて下さい。

あますた

933 views

電気工学科卒の元プログラマの現飲食店オーナー。間に不動産管理、営業等も経験。ここでは、自分の経験とお客様に聞いた話を基に、役立つ情報を発信していこうと思いま...

プロフィール

ピックアップ記事

関連記事一覧

  1. この記事へのコメントはありません。

CAPTCHA


ABOUT

”わくわく”や”驚き”等、『心の栄養』を与えられる、『楽しい』でつながるWebメディアを目指します。
ABOUT

最新記事