こんにちは！コーダーの鶴本です。

「よくある質問」などでよく使われる開閉型のアコーディオン。

タップすると折り畳まれていた文字が表示されたり再度折り畳まれたりするので、説明が長くなってしまう箇所などでよく使われますよね。

通常であればJavaScriptなどを使って動きをつけますが、なんとこれをHTMLだけで作ることができます。

それは

• details要素
• summary要素

この2つを使う方法です。

JavaScriptを使わずにHTMLだけで作ることができるので、ホームページ制作に詳しくない初心者の方でも簡単に設置することができますよ！

今回は、そんなdetails要素とsummary要素をご紹介します。

コピペで使えるカスタマイズサンプルをご用意しましたので、ぜひ最後までご覧くださいね。

details要素とsummary要素を使ってアコーディオンを作る

<details>と<summary>の使い方

details要素は、クリックやタップで開閉できる要素です。

子要素には必ずsummaryを含まなければならず、summary要素は1つだけです。

summary要素はdetails要素の要約や説明文が入るもので、アコーディオンが閉じてるときはsummary要素の内容のみが表示されます。

基本の形は下のようになっています。

<details>
  <summary>Q.質問の文章が入ります。</summary>
  <p>A.ここにアコーディオンの文章が入ります。</p>
</details>

最初から開いておくときはopen属性をつける

アコーディオンを開いておき、最初から質問文と回答文の両方を表示させておきたいこともあります。

そのようなときには、details要素にopen属性をつけます。

<details open>

CSSでカスタマイズする

何もカスタマイズしないと、下のような表示になっています。

ここからCSSでカスタマイズしていきましょう！

See the Pen アコーディオン_1 by アントロワ (@untrois) on CodePen.

矢印を消す

まずは矢印のカスタマイズです。

<summary>の矢印を消すには、ブラウザごとに方法が異なります。

/* Chrome、Safari */
summary::-webkit-details-marker {
  display: none;
}
/* Chrome、Safari以外 */
summary {
  display: block;
}

ChromeとSafariではsummary::-webkit-details-markerをdisplay:none;にします。
それ以外では、display:list-itemをdisplay:blockで上書きして消してあげます。

矢印のスタイルを変える

次に矢印のスタイルを変更する方法です。

上記の方法で矢印を消した後、擬似要素などで矢印を設置します。

See the Pen アコーディオン_2 by アントロワ (@untrois) on CodePen.

ホバー時のスタイルをカスタマイズ

デフォルトではホバーしても特に状態が変化しません。
ですので、ホバーしているのかしていないのか、分かりにくい状態です。

カーソルをポインターに変更し、ホバー時に色をつけてあげると、ホバーしていることやクリックできることが分かりやすなりますよ。

See the Pen アコーディオン_3 by アントロワ (@untrois) on CodePen.

アコーディオンが開いているときのスタイルを変える

details[open]セレクタを使うことにより、アコーディオンが開いている状態のスタイルを変更することができます。

ここではアコーディオンが開くときに、CSSアニメーションを使ってふわっとさせ、折り畳まれている部分に色をつけました。

See the Pen アコーディオン_4 by アントロワ (@untrois) on CodePen.

アコーディオンのカスタマイズサンプル

ここまで、details要素とsummary要素の使い方を見てきました。

最後にコピペで使えるアコーディオンのカスタマイズサンプルをご紹介します。

See the Pen アコーディオン_5 by アントロワ (@untrois) on CodePen.

まとめ

ホームページに欠かせないアコーディオン 。

JavaScriptを使わずにHTMLだけで実装できるととても便利です。

とても手軽にできるので、お好みのデザインにカスタマイズして、ぜひ設置してみてくださいね！

コーディングのお困りごとはアントロワにご相談ください

アントロワでは、ホームページ制作やホームページのリニューアル、コーディングの代行を行っています。

「コーディングする時間がない」

「デザインはあるけれどコーディングができない」

そんなWeb制作会社様やデザイナーの皆さま。

どんな小さなお悩みでも構いません。
何かお困りごとがございましたら、ぜひアントロワにご相談ください。