CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン
長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！
↑私が10年以上利用している会計ソフト！
detailsとsummaryタグの基本的な使い方
details タグで囲んだ部分がアコーディオンとして設定されます。その中に summary タグで最初から表示させておきたい部分を囲めば完成！ summary タグの部分をクリックすると、詳細文が表示されます。
HTML
<details> <summary>Adobe Photoshop</summary> 画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。 </details>
See the Pen Easiest accordion w/ details and summary by Mana (@manabox) on CodePen.
これだけで完成！簡単ですね！
ポインターを変更する
このままだとカーソルがテキスト選択時のものなので、CSSでリンクをクリックする時と同じものに変更するといいでしょう。
CSS
summary {
cursor: pointer;
}
ちなみに summary をクリックした際にデフォルトで表示される青い線は outline: none; で非表示にできます。が、アクセシビリティの観点から不用意に消さないほうがいいかな、と思います。自己判断でお願いします。
詳細文を最初から開いておく方法
クリックせずに、最初から詳細文を表示させたい時は details タグに open 属性を追加しましょう。
HTML
<details open> <summary>Adobe Photoshop</summary> 画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。 </details>
開いたときの背景色を変えるなら、 details[open] と、属性も指定すればOK。
CSS
details[open] {
background: #c3f6ff;
}
See the Pen details and summary w/ open attribute by Mana (@manabox) on CodePen.
矢印を変える
デフォルトでは ▶ が表示されていますが、これを好きな画像に変更できます。
CSS
summary {
list-style-image: url(images/arrow-right.svg);
}
この書き方だとFirefoxでは実装できますが、ChromeやSafariでは表示されません。そこで -webkit- ベンダープレフィックスを使って、ChromeとSafariに対応させます。その際は list-style-image ではなく背景画像として設置します。 color: transparent; でデフォルトの矢印を非表示にし、必要であれば背景画像の位置やサイズを設定しましょう。
CSS
summary::-webkit-details-marker {
background: url(images/arrow-right.svg) no-repeat center/6px;
color: transparent;
}
See the Pen details and summary – changing an arrow icon by Mana (@manabox) on CodePen.
他にも擬似要素を使った方法でも実装できますね。あれこれ試してみてください！
疑似要素について→ CSSの content プロパティーを使いこなそう！
アニメーションを加える
クリックした時に詳細文をふわっと表示させたい時は、transition を指定するだけでOK。
CSS
details {
transition: .5s;
}
びよーんと伸びる感じに表現したい時は高さも指定すればいいでしょう。
CSS
details {
height: 10px;
transition: .5s;
}
details[open] {
height: 80px;
background: #c3f6ff;
}
See the Pen details and summary w/ animation by Mana (@manabox) on CodePen.
detailsとsummaryタグの対応ブラウザー
Can I use…によると details と summary はIEとEdgeに対応していません………やっぱりね、という感じでしょうか。対応させるためのスクリプトもいくつかリリースされているので、ぜひ試してみてください：
まだまだ荒削り感のある details と summary ですが、JavaScriptなしでもできる範囲が広がるのは素敵なことですね！CSSでカスタマイズしながら素敵に実装してみてください！
