などの疑問や悩みを解決してまいります。
用語の説明や、Q＆Aによく使用されるアコーディオン機能ですが、HTMLだけでも実装が可能なのです。
HTMLだけでもアコーディオンが実装できるなんてやばいですよね…！
今回はHTMLだけでアコーディオンを作成していく方法について解説していきます。
アコーディオンの完成例
See the Pen アコーディオン【HTMLのみ】 by koutarou mori (@koutarou-mori) on CodePen.
HTML解説
コードは以下のようになっています。
<body>
<details>
<summary>タイトルが入ります。</summary>
<p>
本文が入ります。本文が入ります。本文が入ります。
</p>
</details>
</body>これだけでアコーディオンが実装できるのはすごいですよね…！
今回アコーディオン作成において必須とする要素がdetails要素とsummary要素です。
これはセットで使用するので覚えておきましょう。
details要素
details要素は、折りたたみウィジェットを作成します。
<details>: 詳細折りたたみ要素 - HTML: HyperText Markup Language | MDN
アコーディオンが開閉する際は、details要素にopen属性が付与されます。
なので最初から開いた状態にしたい場合は、open属性を指定します。
<body>
<details open> <!-- open属性を指定することで最初から開いた状態になる -->
<summary>タイトルが入ります。</summary>
<p>
本文が入ります。本文が入ります。本文が入ります。
</p>
</details>
</body>
summary要素
summary要素は、details要素のタイトルや用語などを示す際に使用します。
<summary>: 概要明示要素 - HTML: HyperText Markup Language | MDN
summary要素を指定しないとアコーディオンとして機能しないので注意してください！
開いた後の内容はsummary要素の下に記述します。
CSS追加したアコーディオン
HTMLだけだとさすがに味気ないので、CSSも加えてみました。
See the Pen アコーディオン【HTML、CSSのみ】 by koutarou mori (@koutarou-mori) on CodePen.
デフォルト表示のタイトル横の三角形は、summary要素にlist-style:プロパティを指定することで変更することができます。
details summary {
position: relative;
list-style: none; /* デフォルトの三角形を削除 */
}今回は疑似要素を使用して「+」「-」を表示しています。
details summary::before {
position: absolute;
content: '';
top: 50%;
left: -20px;
transform: translateY(-50%);
background-color: #222;
border-radius: 10px;
width: 3px;
height: 15px;
}
details summary::after {
position: absolute;
content: '';
top: 50%;
left: -25.5px;
transform: translateY(-50%);
background-color: #222;
border-radius: 10px;
width: 15px;
height: 3px;
}先程説明しましたが、アコーディオンが開かれるとdetails要素にopen属性が付与されるので、open属性が付与されたら縦線は非表示にして「-」にする動きを作成しています。
details[open] summary::before {
content: none;
}
