CSSすら不要!detailsとsummaryタグで作る簡単アコーディオン

長い文章や補足説明をアコーディオン(折りたたみ)にしたい時ってありますよね。そんな時に使える detailssummary タグを紹介します。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…によると detailssummary はIEとEdgeに対応していません………やっぱりね、という感じでしょうか。対応させるためのスクリプトもいくつかリリースされているので、ぜひ試してみてください:


まだまだ荒削り感のある detailssummary ですが、JavaScriptなしでもできる範囲が広がるのは素敵なことですね!CSSでカスタマイズしながら素敵に実装してみてください!

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)