アコーディオンはCSSのみで作成できる！やり方を紹介

Webサイトにアコーディオンを実装したいと考えていませんか？

いざ実装しようと思っても、複雑な処理が必要そうに見えて、中々手が出しづらいですよね。

実はアコーディオンは、CSSのみで作成することができます。

今回はCSSのみを使用してアコーディオンを作りたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのみでアコーディオンを作成する方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね！

CSSのみでアコーディオンを作成する

CSSのみでアコーディオンを作成するには、input要素のcheckboxを使います。

実装方法を簡単に説明しますね。

チェックボタンをクリックした際に、アコーディオンが開いたり閉じたりするようにCSSで設定していきます。

これには、疑似クラスのcheckedを使用します。

後は、transitionでアニメーションの速度などを調整します。

以上のことを理解できれば、アコーディオンは作成できます。

この後に詳しく説明していきますので、現時点でわからない説明があっても大丈夫ですよ。

実際のコード

それでは、実際にコード書いていきましょう。

HTMLでは、lavel要素とinput要素を使います。

<div class="accordion">
  <input type="checkbox" id="label1" class="acd-check">
  <label for="label1" class="acd-label">タイトル1</label>
  <div class="acd-content">
    <p>アコーディオンの中身です</p>
    <p>クリックで表示させることができます</p>
  </div>
  <input type="checkbox" id="label2" class="acd-check">
  <label for="label2" class="acd-label">タイトル2</label>
  <div class="acd-content">
    <p>再びクリックすると閉じます</p>
    <p>CSSアニメーションでぬるっと動かしています</p>
  </div>
</div>

CSSは以下のように記述します。

.accordion {
  width: 650px;
  margin: 5px auto;
}
.acd-check{
  display: none;
}
.acd-label{
  display: block;
  margin: 5px auto;
  padding: 10px 0;
  text-align: center;
  background: #4169e1;
  color: #fff;
  font-weight: bold;
  cursor :pointer;
}
.acd-content{
  height: 0;
  padding: 0 15px;
  background: #eee;
  transition: .5s;
  overflow: hidden;
}
.acd-check:checked + .acd-label + .acd-content{ 
  height: 100px;
  padding: 15px;
}

青いバーをクリックすると、アコーディオンの隠れていた部分が表示されます。

再びクリックすると閉じることができますね。

コードの解説

HTMLで以下のように書いている部分があります。

<input type="checkbox" id="label1" class="acd-check">
<label for="label1" class="acd-label">タイトル1</label>

上がチェックボックスで、下が青いバーになるラベルの部分ですね。

チェックボックスはCSSで非表示にしています。

チェックが入っているのか動作を確認したい場合は、非表示の指定を削除してみてください。

クリックするたびに、チェックが付いたり外れたりしているのを見ることができます。

このチェックが入ったときに、アコーディオンの中身が表示されるようになっています。

ラベルの部分をクリックしても、チェックボックスに反映されますね。

これは、label要素とinput要素のfor属性とid属性の値を同じものにしているためです。

これにより、チェックボックスを非表示にしても問題なく動作させることができるのです。

チェックを入れることで、以下の部分が表示されます。

<div class="acd-content">
  <p>アコーディオンの中身です</p>
  <p>クリックで表示させることができます</p>
</div>

CSSでは、

.acd-content{
  height: 0;
  padding: 0 15px;
  background: #eee;
  transition: .5s;
  overflow: hidden;
}
.acd-check:checked + .acd-label + .acd-content{ 
  height: 100px;
  padding: 15px;
}

としている部分ですね。

最初は高さを0にしています。

:checkedは疑似クラスで、チェックボックスにチェックが入っているときに適用されます。

acd-checkがそのチェックボックスですね。

acd-checkにチェックが入ったときに、それに隣接するacd-contentのスタイルを指定しています。

高さを100pxにしていますね。

acd-contentの指定で「transition: .5s」と指定しています。

これはCSSアニメーションの設定で、0.5秒かけて変化するという意味です。

秒数を減らせばシュッとした動きになり、増やせばゆっくりとした動きになります。

「overflow: hidden」とすることで、要素の高さからはみ出るものは、非表示になります。

文章も最初は非表示で、要素が現れた時に表示されていますね。

「display:none」ではダメなのか

先ほどの指定で最初の状態を「height: 0」や「overflow: hidden」で指定していましたが、これに「display:none」を使うことはできないのでしょうか？

最初に「display:none」を指定しておいて、チェックが入ったときに「display:block」とするような方法です。

この方法でも表示・非表示の切り替えはできますが、いきなりパッと表示されてしまうため、アニメーションを使ってふわっと表示させるということはできません。

今回の目的では向かないでしょう。

また、高さを気にする必要がないものならば、不透明度を指定するopacityを使う方法もあります。

最初に「opacity:0」を指定しておき、チェックが入ったときに「opacity:1」となるようにしておくと、ふわっと中身が表示されます。

アコーディオン以外でもよく使われる手法ですね。

アイコンをつける

アイコンをつけて開いたときと閉じたときの状態をわかりやすくしてみましょう。

ここではFont Awesomeを使います。

導入の仕方は、こちらのページで紹介していますので、参考にしてみてください。

https://web-camp.io/magazine/archives/27886

HTMLは先ほどのものと同じものを使います。

CSSに以下の内容を付け加えます。

.acd-label{
  position: relative;
}
.acd-label:after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 25px;
  height: 25px;
  margin: 7px 20px;
  content:  '\f107';
  font-family: "Font Awesome 5 Free";
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  border: solid 2px #fff;
  transition: .5s;
}
.acd-check:checked + .acd-label:after{
  transform:rotate(180deg);
}

矢印のアイコンが表示されましたね。

ラベルに「position: relative」を指定し、アイコンに「position: absolute」を指定することで位置を調整しています。

以下の部分がFont Awesomeの設定ですね。

content:  '\f107';
font-family: "Font Awesome 5 Free";

head内で、Font AwesomeのURL等を設定をしていないとアイコンは表示されないので注意してくださいね。

ラベルをクリックすると、アコーディオンの中身が表示されると同時にアイコンが半回転しています。

transform:rotate(180deg);

それ以外の記述は、アイコンの周囲の円などのデザインをしています。

他にもアイコンの種類はたくさんあるので、ぜひ試してみてくださいね。

まとめ：基本はCSSだけでもOK

今回は、CSSを使ったアコーディオンの作成方法を詳細に解説してきました。

アイコンを付け足す方法も紹介しましたね。

基本的なものであればCSSで十分ですが、複雑な動作をさせたくなった場合には、プログラミングを視野に入れても良いかもしれません。

今回の記事が参考になれば幸いです。