<details>と<summary>で出てくる▼について

凍結

0 Anonymous Chrome

HP作成の時に<details>,<summary>を利用しているのですが、

<details>
<summary>たいとる</summary>
折りたたまれているところ
</details>

と囲んだとき、<summary>~~</summary>の頭に「▶」または「▼」が出てくるのですが、これを消すことは可能でしょうか？
また、他の記号に変えられるものなのでしょか？

03/29 07:53

返信

コメント投稿検索

1 しち SOG03

>>0 『詳細折りたたみ要素<details>・<summary>』文頭の三角は変更できる？
三角は消せますし、別の記号や画像への変更も可能です。

『detail　summary　デザイン』などのワードで検索すると、いろんなデザインの実装方法・解説が見つかると思います。

🔻参考
detailsとsummaryタグでアコーディオンを作る - HTMLリファレンス

detailsとsummaryタグでアコーディオンを作る - HTMLリファレンス

HTMLのdetailsタグとsummaryタグを合わせて使えば、簡単にアコーディオンを作ることができます。CSSの装飾サンプルやアニメーションのかけ方についても合わせて解説します。

code-kitchen.dev

楽に導入できるhtmlの折りたたみ機能「details」を紹介 | ウェブカツBLOG