HTMLだけでコンテンツを開閉できる<details>を試してみる

<details>タグはHTML5.1で追加されたタグで、コンテンツを開閉できるウィジェットを生成します。

概要

1
2
3
4
<details>
<summary>日程</summary>
2019年4月1日(月)開場:13:00
</details>
日程 2019年4月1日(月)開場:13:00

<details>の中には1つの<summary>タグ、そしてフローコンテンツに分類されるbody内で使われるほとんどの要素を置くことができます。

参考:フロー・コンテンツについて

装飾をしてみる

detailsを開くとopenという属性が付されるので、それを利用してCSSでカスタマイズしてみます。

装飾をしてみたテスト
CSSでアニメーションを付けてみました。








何も書くことがない!!
1
2
3
4
5
6
<details id="designed">
<summary>タイトル(サマリー)</summary>
<div class="details_content">
ここに中身
</div>
</details>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
summary {
outline: none;
cursor: pointer;
}

/*デフォルトの三角を消す */
summary::-webkit-details-marker {
display:none;
}

/* 疑似要素で三角を付ける */
summary::before {
display: inline-block;
content: "▶";
margin: 0 .3em 0 0;
transform: rotate(0deg);
transition: .2s transform ease;
}

details[open] summary::before {
transform: rotate(90deg);
}

.details_content {
background: #f5f5f5;
padding: 16px;
border-radius: 2px;
}

details[open] .details_content{
animation: .8s details_content ease;
}

@keyframes details_content {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

今のところ、detailsタグ自体にはアニメーションを掛けられないので、中にdivを配置してそこにアニメーションを掛けることになります。

summaryをクリックしてコンテンツを閉じると、高さがすぐ0になってしまうので、閉じるときのアニメーションを付けることはできません。閉じるアニメーションがなくても不自然にならないよう、アニメーションの装飾は最低限に留めたほうがいいかもしれません。

まとめ

detailsタグはHTMLのみでコンテンツの開閉という動きを、WEBサイトにつけることができるので魅力的ですね。

HTMLでマークアップをする以上意味を考えなければならないので、単にコンテンツを開閉させたいのであれば、JavaScriptで実装する方が手っ取り早いと思います。