よくLPで見かけるQ&AでQを押すとAの文章が開くという仕組み（アコーディオン）のコード紹介です。
今回は第２弾としてさらに簡単に実装できるようにしました。
サンプルはこちら
chromeやFireFoxなどのブラウザでデベロッパーツールを使ってスマホ版、PC版それぞれ確認していただけると分かりやすいと思います。
2021/3/6更新
アコーディオン実装方法の記事一覧
【第１弾】【jquery】コピペでOK！画像で作るレスポンシブアコーディオン
【第２弾】【CSSだけ】コピペで超簡単！jquery無しでレスポンシブアコーディオン
【第３弾】【コピペでOK】画像で作れる！プラス（+）とマイナス（-）の切り替え付きレスポンシブアコーディオン
仕様
HTMLとCSSコーディングのみで実装（コピペでOK）
必要コード
index.html
<head>内
レスポンシブ化、CSSの読み込み
※重複するコードがあれば適宜自身のコーディングに合わせてください。
<!--▼これはレスポンシブデザインにする為のコードです。▼-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--▼CSS読み込み▼-->
<link rel="stylesheet" href="style.css"/><body>内
実装コード
<!--↓↓↓アコーディオン実装↓↓↓-->
<details>
<summary>
ここを押すとアコーディオンが開きます
</summary>
<div class="answer">
<p>ここに内容を書きます</p>
</div>
</details>
<details>
<summary>
ここを押すとアコーディオンが開きます
</summary>
<div class="answer">
<p>ここに内容を書きます</p>
</div>
</details>
<!--↑↑↑アコーディオン実装↑↑↑-->
style.css
/*アコーディオンcss*/
summary{
position: relative;
max-width: 600px;
padding: 10px 50px 10px 20px;
cursor: pointer;
background-color: #353535;
color: #fff;
margin: 10px auto;
}
summary::-webkit-details-marker{
position: absolute;
color: transparent;
}
summary:hover, details[open] summary {
background-color: #804747;
margin-bottom: 0px;
}
summary::after {
content: '+';
font-size: 130%;
position: absolute;
top: 45%;
right: 30px;
transform: translateY(-50%);
transition: transform.5s;
}
details[open] summary::after{
transform:translateY(-50%) rotate(45deg);
}
.answer {
padding: 20px 20px;
background-color: #e6e6e6;
max-width: 630px;
margin: auto;
}
.answer p {
background: none;
}
details[open] .answer{
animation:fadein .5s ease-in-out;
}
@keyframes fadein {
0% { opacity: 0; }
100%{ opacity: 1; }
}
/*アコーディオンcss*/
PCでのアコーディオンの幅を調整するときは「summary」と「.answer」のmax-widthをいじればOKです。