目次
HTMLだけで簡単なアコーディオンを作成する方法
アコーディオンとは、クリックやタップをすると、折りたたんだり開いたりできるコンテンツのことです。
これが、detailsタグとsummaryタグで簡単に作ることができます。
以前は、対応していないブラウザもありましたが、現在はほぼ、ブラウザ対応をしています。
- Internet Explorerは対応をしていません。
ノーマルなコーディング方法
HTML
<details>
<summary>ココをクリック!</summary>
<p>
アコーディオン風に開きます。
</p>
</details>
表示例
ココをクリック!
アコーディオン風に開きます。
初めからアコーディオンを開く
初めからアコーディオンを開いておきたい場合は、detailsタグに、"open"をつけるだけです。
HTML
<details open>
<summary>ココをクリック!</summary>
<p>
アコーディオン風に開きます。
</p>
</details>
表示例
ココをクリック!
アコーディオン風に開きます。
簡単なレイアウト例
簡単なCSSの設定例です。
先頭の(▶)を消して、Font Awesomeのアイコンを表示するようにしています。
CSS
details {
border: 1px solid rgba(0,0,0,.2);
border-radius: 10px;
}
details summary {
list-style: none;
cursor: pointer;
outline: none;
padding: 10px;
font-weight: bold;
}
details summary::before {
font-family: FontAwesome;
content: '\f067';
margin-right: 1em;
background-color: rgba(0,0,0,.2);
padding: 3px;
border-radius: 50%;
}
details[open] summary::before {
content: '\f068';
}
/* safariで先頭の(▶)を表示しない */
details summary::-webkit-details-marker {
display: none;
}
p {
margin-left: 1em;
}