アコーディオン

折りたためるテキストアコーディオン

テキストを折りたためて(FOLD)したい時に使用します

折りたためるテキスト1

detailsタグの中に、summryタグで囲った見える要素と、折りたたむ要素を並べるだけ

 

▶宇宙の色は何色でしょうか？

ベージュ
人間は光の反射で色を認識するので、太陽光の届かない宇宙の色は目に見えません。それで研究員たちが銀河からの光を集めて人間の目に見える色の値に変換したところ、宇宙の色はベージュだと分かりました。

▶シロクマ（ホッキョクグマ）の肌の色は何色でしょうか？

黒色
ホッキョクグマの地肌の色は黒です。白く見えている毛は実は透明なため、太陽の光が直接届く地肌は黒いので熱をよく吸収して体温が上がるようになっています。


HTML

<details>
<summary>&#9654;宇宙の色は何色でしょうか？</summary>
<p>ベージュ<br>人間は光の反射で～。</p>
</details>


css

summary {
cursor: pointer;
font-weight: bold;
color: crimson;
}

details{
margin:0 0 30px;
}



折りたためるテキスト2　CSSでデザインする

アコーディオンをCSSでデザインしました。色や幅、余白など自由にアレンジしてみてください。

 

アコーディオンのデザイン01

01の記事をここに書く

アコーディオンのデザイン02

02の記事をここに書く


CSS

.accordion01 {
max-width: 700px;
}

.accordion01:not([open]) {
margin-bottom: 20px;
}

.accordion01 summary {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 5px 20px;
border-radius: 5px;
background-color: #2589d0;
color: #fff;
font-weight: bold;
cursor: pointer;
}

.accordion01 summary::-webkit-details-marker {
display: none;
}

.accordion01 summary::after {
transform: translateY(-25%) rotate(45deg);
width: 7px;
height: 7px;
margin-left: 10px;
border-bottom: 3px solid #fff;
border-right: 3px solid #fff;
content: '';
transition: transform .3s;
}

.accordion01[open] summary::after {
transform: rotate(225deg);
}

.accordion-01 p {
transform: translateY(-10px);
opacity: 0;
margin: 0;
padding: 20px;
transition: transform .5s, opacity .5s;
}

.accordion01[open] p {
transform: none;
opacity: 1;
}


HTML

<details class="accordion01">
<summary>アコーディオンのデザイン01</summary>
<p>01の記事をここに書く</p>
</details>