概要
この記事はプログラミングの記事です
プログラミングの、アコーディオンの記事です
実態
「アコーディオンのサンプル」
「アコーディオンのサンプル」の本文の部分です
サンプル
上記アコーディオンのコードです
<details>
<summary>
「アコーディオンのサンプル」
</summary>
<div><p>
「アコーディオンのサンプル」の
本文の部分です
</p></div>
</details>
上記のコードを参考に、自分でもアコーディオンをデザインしてみました
「アコーディオンのサンプル」です
『「アコーディオンのサンプル」です』の、本文の部分です
自分でもデザインした、アコーディオンのコードです
<details>
<summary>
<span style=
"text-decoration:
underline
#D9CB5D 6px;">
「アコーディオンのサンプル」
です
</span>
</summary>
<div>
<p>
<span style="
padding:
0px 0px 0px 20px;">
『「アコーディオンのサンプル」
です』の、
本文の部分です
</span>
</p>
</div>
</details>
まとめ
参考資料
- https://www.rectus.co.jp/
archives/7372#:~:text=
HTML界でのアコーディオン表示とは呼んで字のごとく,楽器のアコーディオンのように折り畳みが出来るような表示の仕方を表す - https://pote-chil.com/css-stock/ja/accordion#3
- https://lab.dxo.co.jp/
notes/
web-design/accordion-menu#:~:text=
detailsタグ・summaryタグを使用すると、HTMLのみだけでアコーディオンの開閉を実現することができます - https://
developer.mozilla.org/ja/
docs/Web/HTML/
Reference/
Elements/
details#:~:text=
ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します - https://
developer.mozilla.org/ja/
docs/Web/HTML/
Reference/
Elements/
summary#:~:text=
要素の折りたたみボックスの要約、キャプション、説明、凡例を表します - <details><summary>の内部の、<summary>を、heading(目次)にすることは望ましくない
