HTML/CSS

コピペOK|CSSで作るアコーディオンメニューアニメーション

更新日:

「アコーディオンメニューってどうやって作るんだろう」

「CSSだけで作れないかな」

「コピペできないかな」

こういった悩みに答えます。

目次

  • 基となる作品
  • 解説

基となる作品

解説

まず始めに、<head>~</head>の中に下記をコピペしてFontAwesomeを読み込んでおきます。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

HTML

<section class="faq">
    <input id="check1" class="check" type="checkbox">
    <label class="label" for="check1"><span class="label__span">Q</span><p>質問1です。</p><i class="fas fa-angle-left"></i></label>
    <div class="answer">
        <p>回答1です。</p>
    </div>
    <input id="check2" class="check" type="checkbox">
    <label class="label" for="check2"><span class="label__span">Q</span><p>質問2です。</p><i class="fas fa-angle-left"></i></label>
    <div class="answer">
        <p>回答2です。</p>
    </div>
    <input id="check3" class="check" type="checkbox">
    <label class="label" for="check3"><span class="label__span">Q</span><p>質問3です。</p><i class="fas fa-angle-left"></i></label>
    <div class="answer">
        <p>回答3です。</p>
    </div>
  </section>

CSSを読み込んでいないHTMLだけだとこんな感じです。

回答1です。

回答2です。

回答3です。

CSS

.faq {
  width: 50%;
  margin: 0 auto;
}

.faq .check {
  display: none;
}

.faq .label {
  border: 1px solid black;
  background: white;
  color: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 4rem;
}

.faq .label:hover {
  cursor: pointer;
}

.faq .label__span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bolder;
  color: white;
  background-color: black;
  width: 4rem;
  height: 4rem;
}

.faq .label p {
  font-family: serif;
  padding-left: 1rem;
  width: 100%;
}

.faq .label .fas {
  padding: 1rem;
  font-size: 20px;
}

.faq .answer {
  border: 1px solid black;
  display: block;
  height: 0;
  opacity: 0;
  padding: 0;
  -webkit-transition: .3s;
  transition: .3s;
  visibility: hidden;
}

.faq .check:checked + .label + .answer {
  height: 50px;
  opacity: 1;
  padding: 10px;
  visibility: visible;
}

.faq .check:checked + .label > .fas {
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.faq .check + .label > .fas {
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

6行目のdisplay:none;でチェックボックスを非表示にします。

10行目はlabelのスタイリング。

30行目はlabel__span、Qの部分をスタイリング。

47、53行目はlabel内の文字などのスタイリング。

58行目はanswer、回答の部分を非表示。

69行目は、.check:checked + .label + .answerでチェックボックスにチェックが入ったら、answerを表示することができます。

76行目は、.check:checked + .label > .fasでチェックボックスにチェックが入ったら、fasを上向きに動かすようにしていています。

83行目は、.check + .label > .fasでチェックボックスにチェックが入っていなかったら、fasを下向きに動かすようにしています。

まとめ

今回、CSSで作るアコーディオンメニューアニメーションをご紹介しました。

この記事を観てくれた人が少しでも参考になれたらと思います。

おすすめしている本

他の投稿

-HTML/CSS

Copyright© yamab-log , 2021 All Rights Reserved Powered by STINGER.