【CSSのみ】detailsで作ったアコーディオンにアニメーションをつける

はじめに
- この記事の概要
- 対象読者
基本的なアコーディオンを作成する
- detailsの使用方法
open属性を使用してアコーディオンの見た目をカスマイズする
さいごに

はじめに

この記事の概要

前回の記事で、detailsの基本的な使い方とJavaScriptを使用したカスタマイズ方法を紹介しました。
detailsを使用することで、HTMLのみで簡単にアコーディオンを作成することができるとお分かり頂けたかと思います。
ただ、前回も紹介しましたが、detailsで作成したアコーディオンをそのまま表示すると味気ないものになってしまうので、
CSSを用いて見た目をカスタマイズすることをおすすめします。
今回はその応用で、CSSのみを使用して簡単に見栄えを良くする方法をご紹介します！

前回の記事はこちらになります↓

2023年5月27日【CSSのみ】detailsで作ったアコーディオンにアニメーションをつける

対象読者

HTMLやCSSを使用したコーディングを勉強中の方
detailsを使用してアコーディオンを実装したい方
detailsで作成したアコーディオンの見栄えを良くしたい方

基本的なアコーディオンを作成する

detailsの使用方法

前回の復習になりますが、detailsを使用したアコーディオンの作成方法をご紹介します。
detailsタグを使用してアコーディオンを作成する際は、以下のように記述します。

<details>
  <summary>タイトル</summary>
  <p>コンテンツ</p>
</details>

上記のように、detailsタグの配下にsummaryタグと表示したコンテンツを記述することで最低限のアコーディオンを作成することができます。
ただ、これでは味気ないデザインのままですので、ここから見た目をカスタマイズしていきます！

open属性を使用してアコーディオンの見た目をカスマイズする

完成形

今回の内容で最終的にできるアコーディオンの挙動は以下のようになります。

CSSのみでここまでの挙動ができるので、ぜひご参照にしてみてください！

開いた状態と閉じた状態で、summaryの内容を変更する

まずは、アコーディオンの開閉状態に合わせて、summaryの表示を変えてみましょう！
動画で[開きます]と[閉じます]と変わっているところですね！

アコーディオンの開閉状態によって表示を変更するためには、CSSでdetailsにopen属性を付与し、それに応じて他の要素に適したプロパティをあてましょう。
summaryの内容を変更するためには、HTMLとCSSに以下のように記述します。

<details class="c-accordion">
  <summary class="c-accordion__header">
    <p class="c-accordion__close-heading">開きます</p>
    <p class="c-accordion__open-heading">閉じます</p>
  </summary>
  <div class="c-accordion__content">
    <p class="c-accordion__text">アコーディオン内容</p>
  </div>
</details>

.c-accordion__open-heading {
  font-size: 24px;
  font-weight: bold;
  color: $black-color;
  line-height: 1.2;
  display: none;
}

.c-accordion__close-heading {
  font-size: 24px;
  font-weight: bold;
  color: $black-color;
  line-height: 1.2;
  display: block;
}

details[ open ] .c-accordion__close-heading {
  font-size: 24px;
  font-weight: bold;
  color: $black-color;
  line-height: 1.2;
  display: none;
}

details[ open ] .c-accordion__open-heading {
  font-size: 24px;
  font-weight: bold;
  color: $black-color;
  line-height: 1.2;
  display: block;
}

ポイントは、summary配下に開閉状態に合わせて表示したい内容を２種類用意することです。
そして、CSSにあるように、アコーディオンが開いているときはc-accordion__open-headingを表示し、閉じているときにはc-accordion__close-headingを表示するようにdisplay: block;とdisplay: none;で切り替えています。

アコーディオンの内容をふわっと表示する

detailsで作成したデフォルトのアコーディオンでは、クリックと同時にパッと内容が表示されます。
これをCSSでふわっと表示させましょう！
こちらも[ open ]を使用していきます。

<details class="c-accordion">
  <summary class="c-accordion__header">
    <p class="c-accordion__close-heading">開きます</p>
    <p class="c-accordion__open-heading">閉じます</p>
  </summary>
  <div class="c-accordion__content">
    <p class="c-accordion__text">アコーディオン内容</p>
  </div>
</details>


detailsアコーディオンにtitleを入力してください .c-accordion__content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0; 
    transform: translateY(-10px); 
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

HTMLの6行目にc-accordion__contentというクラスをあてて、これにアニメーションをあてます。
イメージとしては、クリック直後にc-accordion__content のopacityを上げて、10px上から表示させるようなものになります。

summaryの右端にプラスとマイナスを表示する

最後に、summaryにアイコンを表示しましょう！
今回は、アコーディオンが閉じているときにプラスマーク、開いているときにマイナスマークを表示します。

<details class="c-accordion">
  <summary class="c-accordion__header">
    <p class="c-accordion__close-heading">開きます</p>
    <p class="c-accordion__open-heading">閉じます</p>
    <div class="c-accordion__plus"></div>
  </summary>
  <div class="c-accordion__content">
    <p class="c-accordion__text">アコーディオン内容</p>
  </div>
</details>

.c-accordion__plus {
  display: inline-block;
  vertical-align: middle;
  color: $black-color;
  line-height: 1;
  min-width: 24px;
  height: 2px;
  background-color: $black-color;
  position: relative;
  @include mq("sp") {
    min-width: 16px;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);
    transition: 0.3s;
  }
}

detailsアコーディオンにtitleを入力してください .c-accordion__plus::before {
  transform: rotate(0deg);
}

まず、HTMLのsummary内にc-accordion__plusというクラスのdivタグを付け加えます。
あとは上記の記述のようにCSSをあてるとプラスマークを表示できます。
detailsの[ open ]時、プラスマークを構成しているbefore要素の角度を0にすることで、マイナスマークを表示しています。

以上で、先に示した動画のような挙動のアコーディオンを実装できます。

さいごに

今回はdetailsで作成したアコーディオンの見た目をCSSのみでカスタマイズする方法について紹介しました！
紹介したプラスマイナスの他に、三角形で開閉状態を示すことも今回の記述で可能なので、ぜひお試しください！
これくらいの挙動であれば、JavaScriptを使用せずに実装できるので、コーディング初心者の方でも気軽に実装できるかと思います。
この他にも、まだまだカスタマイズ方法はあるかと思うので、ご自身でも色々遊んでみると楽しいかと思います！

最後に、HTMLやCSSについてもっと詳しく知りたいという方は以下の書籍がおすすめです。
初学者の方にもわかり易い言葉で丁寧に説明がされているので、とても参考になります！