前回、「簡単！ HTMLだけでアコーディオンメニューを作成する方法 ①」で、HTMLのみで作成する手順を紹介しました。気になる方は、前回の記事もご覧ください。
今回は、CSSでデザインを少し変更してみます。
デザイン変更する手順
①既存の矢印を非表示にする（既存の矢印でいい場合は必要ありません）
②カーソルポインターを変更（こちらはお好みで）
③アニメーションをつける（こちらもお好みで）
④上記を含めCSSでデザイン変更
矢印のデザインを変更するには、既存の矢印を一度非表示にする必要があります（既存のものでいい場合は、設定なしで構いません）。
/*Chrome, Safari用 既存の矢印削除 */
summary::-webkit-details-marker {
display: none;
}Firefoxに対応するため、以下も追加してください。
/* Firefox用 既存の矢印削除*/
summary {
list-style: none;
}クリックした際、分かりやすくするためにポインターを変更できます。
summary {
cursor: pointer;
}heightプロパティとtransitionプロパティを設定することで、ゆっくり開閉する動きになります。
details {
height: 40px;
transition: .6s;
}
details[open] {
height: 90px;
}詳細（隠している箇所）の箇所をふわっと出す場合。
details[open] p {
animation: fadeIn .8s ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: none;
}
}上記の設定を含め、CSSでデザインを変えていきます。
例として、下図のようなアコーディオンを作成します。例示の「Result」の中の「Run Pen」をクリックした後、「常に表示させておく項目」をクリックしてください。
See the Pen
Untitled by 林 (@hayashi-akina)
on CodePen.
以下、HTMLとCSSです。
<details>
<summary>常に表示させておく項目</summary>
<p>ここに項目に対する内容などを記述する</p>
</details>
<details>
<summary>常に表示させておく項目</summary>
<p>ここに項目に対する内容などを記述する</p>
</details>
<details>
<summary>常に表示させておく項目</summary>
<p>ここに項目に対する内容などを記述する</p>
</details>details {
height: 40px;
padding: 0px;
transition: .6s;
border: 1px solid #59b2e1;
max-width: 350px;
margin-top: 20px;
border-radius: 3px;
margin-left: 20px;
}
details[open] {
height: 90px;
max-width: 350px;
}
summary::-webkit-details-marker {
display: none;
}
summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content:space-around;
align-items: center;
background: #59b2e1;
max-width: 350px;
height: 40px;
border-radius: 1px;
color: #fff;
}
summary::after {
content: '';
transform: translateY(-25%) rotate(45deg);
width: 7px;
height: 7px;
margin-left: 10px;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
transition: transform .3s;
display: inline-block;
}
details[open] summary::after {
transform: rotate(225deg);
}
p {
margin: 0;
color: #333333;
padding: 10px 30px;
}
details[open] p {
animation: fadeIn .8s ease;
margin-top:4px;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: none;
}
}今回はCSSでデザイン変更しました。アコーディオンメニューはHTMLとCSSで簡単にできるので、ぜひ使ってみてください。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
