「アコーディオンメニューってどうやって作るんだろう」
「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>質問１です。</p><i class="fas fa-angle-left"></i></label>
<div class="answer">
<p>回答１です。</p>
</div>
<input id="check2" class="check" type="checkbox">
<label class="label" for="check2"><span class="label__span">Q</span><p>質問２です。</p><i class="fas fa-angle-left"></i></label>
<div class="answer">
<p>回答２です。</p>
</div>
<input id="check3" class="check" type="checkbox">
<label class="label" for="check3"><span class="label__span">Q</span><p>質問３です。</p><i class="fas fa-angle-left"></i></label>
<div class="answer">
<p>回答３です。</p>
</div>
</section>CSSを読み込んでいないHTMLだけだとこんな感じです。
回答１です。
回答２です。
回答３です。
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);
}６行目のdisplay:none;でチェックボックスを非表示にします。
１０行目はlabelのスタイリング。
３０行目はlabel__span、Qの部分をスタイリング。
４７、５３行目はlabel内の文字などのスタイリング。
５８行目はanswer、回答の部分を非表示。
６９行目は、.check:checked + .label + .answerでチェックボックスにチェックが入ったら、answerを表示することができます。
７６行目は、.check:checked + .label > .fasでチェックボックスにチェックが入ったら、fasを上向きに動かすようにしていています。
８３行目は、.check + .label > .fasでチェックボックスにチェックが入っていなかったら、fasを下向きに動かすようにしています。
まとめ
今回、CSSで作るアコーディオンメニューアニメーションをご紹介しました。
この記事を観てくれた人が少しでも参考になれたらと思います。
