[JavaScript不要] アコーディオンの作り方
今記事ではJavaScriptを使わずにアコーディオンの作り方を紹介します。
細かいアニメーションなどはまだまだJavaScriptのお力を借りなければなりませんが、HTMLだけでアコーディオンが作れるようになったのは驚きですねw
とりあえず作ってみた。
detailsとsummaryといったタグを使うことにより簡単にアコーディオンを作ることができます。
<details class="accordion">
<summary class="label">フロントエンドエンジニア</summary>
ダミーテキストダミーテキストダミーテキストダミーテキスト
</details>
<details class="accordion">
<summary class="label">バックエンドエンジニア</summary>
ダミーテキストダミーテキストダミーテキストダミーテキスト
</details>
<details class="accordion">
<summary class="label">デザイナー</summary>
ダミーテキストダミーテキストダミーテキストダミーテキスト
</details>
応用編
では、応用編です。今回はCodeJumpさんの「【jQuery コーディング練習】番外編：アコーディオンメニューの練習」を参考にデザインを作っています。
<div class="wrapper">
<h1 class="title">募集職種</h1>
<details class="accordion">
<summary class="label">1. フロントエンドエンジニア</summary>
<dl class="detail">
<dt>仕事内容</dt>
<dd>テキストテキストテキストテキスト</dd>
<dt>応募資格</dt>
<dd>テキストテキストテキストテキスト</dd>
<dt>必須スキル</dt>
<dd>テキストテキストテキストテキスト</dd>
<dt>給与</dt>
<dd>XXX万～XXX万 (スキル・経験・実績により優遇)</dd>
<dt>休日・休暇</dt>
<dd>
土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
</dd>
<dt>雇用形態</dt>
<dd>正社員（試用期間3ヶ月）<br />業務委託</dd>
<dt>勤務時間</dt>
<dd>フレックスタイム</dd>
<dt>勤務地</dt>
<dd>東京</dd>
</dl>
</details>
<details class="accordion">
<summary class="label">2. バックエンドエンジニア</summary>
<dl class="detail">
<dt>仕事内容</dt>
<dd>テキストテキストテキストテキスト</dd>
<dt>応募資格</dt>
<dd>テキストテキストテキストテキスト</dd>
<dt>必須スキル</dt>
<dd>テキストテキストテキストテキスト</dd>
<dt>給与</dt>
<dd>XXX万～XXX万 (スキル・経験・実績により優遇)</dd>
<dt>休日・休暇</dt>
<dd>
土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
</dd>
<dt>雇用形態</dt>
<dd>正社員（試用期間3ヶ月）<br />業務委託</dd>
<dt>勤務時間</dt>
<dd>フレックスタイム</dd>
<dt>勤務地</dt>
<dd>東京</dd>
</dl>
</details>
<details class="accordion">
<summary class="label">3. デザイナー</summary>
<dl class="detail">
<dt>仕事内容</dt>
<dd>テキストテキストテキストテキスト</dd>
<dt>応募資格</dt>
<dd>テキストテキストテキストテキスト</dd>
<dt>必須スキル</dt>
<dd>テキストテキストテキストテキスト</dd>
<dt>給与</dt>
<dd>XXX万～XXX万 (スキル・経験・実績により優遇)</dd>
<dt>休日・休暇</dt>
<dd>
土日祝祭日、有給休暇、夏季休暇、年末年始休暇、産前産後休暇、育児休暇
</dd>
<dt>雇用形態</dt>
<dd>正社員（試用期間3ヶ月）<br />業務委託</dd>
<dt>勤務時間</dt>
<dd>フレックスタイム</dd>
<dt>勤務地</dt>
<dd>東京</dd>
</dl>
</details>
</div>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #addff2;
color: #000;
}
.wrapper {
max-width: 960px;
padding: 0 20px;
margin: 40px auto;
}
.title {
font-size: 2rem;
font-weight: normal;
margin-bottom: 30px;
}
.accordion {
border-top: solid 1px #000;
}
.accordion:last-child {
border-bottom: solid 1px #000;
}
.accordion[open] {
background-color: #5bbee5;
}
.accordion .label {
list-style: none;
cursor: pointer;
font-size: 1.125rem;
font-weight: bold;
padding: 40px 30px;
position: relative;
transition: 0.5s;
}
.accordion .label::-webkit-details-marker {
display: none;
}
.accordion .label:hover {
background-color: #5bbee5;
}
.accordion .label::before,
.accordion .label::after {
content: "";
width: 20px;
height: 1px;
background: #000;
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
}
.accordion .label::after {
transform: translateY(-50%) rotate(90deg);
transition: 0.5s;
}
.accordion[open] .label::after {
transform: rotate(180deg);
}
.accordion .detail {
border-top: solid 1px #ccc;
padding: 32px 24px;
display: flex;
flex-wrap: wrap;
background-color: #addff2;
}
.accordion .detail dt {
padding-bottom: 32px;
font-weight: bold;
width: 20%;
}
.accordion .detail dd {
padding-bottom: 32px;
width: 80%;
}解説
HTMLの方は最初の方に解説したので省略しますね。
デフォルトの三角形を消す
デフォルトで左についてある開閉式ができるやつです。
作成するデザインによってはそれが不要になる場合があります。
.accordion .label {
list-style: none;
}
通常は上記の指定で消えてくれますが、Safariだけ-webkit-details-marker というCSSの擬似要素で三角形を表示しています。以下のように別途指定して三角形を消してやる必要があります。
.accordion .label::-webkit-details-marker {
display: none;
}ちなみにデフォルトではdisplay: list-item;が指定されています。
開閉状態のスタイルの切り替え
アコーディオンには開いている時、閉じている時があります。
開いている時のスタイルは「こう！」閉じている時のスタイルは「こう！」のように開閉状態を調べてスタイルを切り替える方法をここでは紹介します。
.accordion {
/* アコーディオンが閉じている時 */
}
.accordion[open] {
/* アコーディオンが開いている時 */
}アコーディオンが開いているときはopen属性が付与され、閉じている時には付与されない為、上記のような指定の仕方になるわけです。
