Zenn
🫠

【HTML,CSSだけ】アコーディオンを作成する！

2023/04/09に公開
CSS
HTML
tech

やったこと

プラスの文字がマイナスにアニメーションするアコーディオンをHTML、CSSのみで作成した。

使用技術

・HTML
・CSS

挙動

コードペン

ソースコード

accordion01.html
<details class="accordion">
    <summary class="accordion__summary">
      <div class="accordion__title">
        <p>ボタン名</p>
      </div>
      <span class="accordion__icon1"></span>
      <span class="accordion__icon2"></span>
    </summary>
    <div class="accordion__details">
      <p>
        内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー内容だよー
      </p>
    </div>
  </details>
accordion01.css
// アコーディオンタイトル
.accordion {
    // サイトに対するアコーディオンの全体幅
    width: 80%;
    margin: 100px auto;
    // ↑上下余白調整
}

.accordion__summary {
    width: 100%;
    // ボーダーを要素サイズに収める用
    box-sizing: border-box;
    // 黒矢印消去用
    display: block;
    list-style: none;
    // 背景色
    background-color: #774784;
    // 文字色
    color: #ffffff;
    // 文字の大きさ
    font-size: 30px;
    // 文字、プラスボタン位置調整用
    position: relative;
    // 外枠線
    border: 1px solid #ffffff;
    // 内枠線との余白用
    padding: 0.5%;
}

// chrome,safari黒矢印消去用
.accordion__summary::-webkit-details-marker {
    display: none;
}

.accordion__title {
    display: block;
    // 内枠線
    border: 1px solid #fff;
}

.accordion__title p {
    // 内枠線と文字間の余白
     padding: 3%;
}

.accordion__icon1 {
    // プラスボタン位置調整用
    position: absolute;
    // プラスボタン横幅
    width: 30px;
    // プラスボタン縦幅
    height: 2px;
    // プラスボタン位置
    top: 0;
    bottom: 0;
    right: 3%;
    margin: auto;
    // プラスボタン色
    background-color: #ffffff;
}

.accordion__icon2 {
    // プラスボタン位置調整用
    position: absolute;
    // プラスボタン横幅
    width: 30px;
    // プラスボタン縦幅
    height: 2px;
    // プラスボタン位置
    top: 0;
    bottom: 0;
    right: 3%;
    margin: auto;
    // プラスボタン色
    background-color: #ffffff;
    transform: rotate(-90deg);
}

details[open] .accordion__icon1 {
    // 回転角
    transform: rotate(180deg);
    // 挙動速度
    transition: .3s;
}

details[open] .accordion__icon2 {
    // 回転角
    transform: rotate(-180deg);
    // 挙動速度
    transition: .3s;
}

// アコーディオン詳細
.accordion__details {
    // ボーダーを要素サイズに収める用
    box-sizing: border-box;
    width: 100%;
    // 背景色
    background-color: #ffffff;
    // 文字と枠線の余白
    padding: 3%;
}

備考

Discussion