立体的な開閉ボタン付きアコーディオンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

立体的な開閉ボタン付きアコーディオンを作る方法

立体的な開閉ボタン付きアコーディオンを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、見出しの右側に配置した「＋」「－」の開閉ボタンへ厚みと影を付け、押し込まれたり浮き上がったりするような立体感を表現します。アコーディオン本体はシンプルな開閉動作にして、開閉ボタンのデザインと動きを主役にした構成です。

見出しをクリックすると対応する内容が表示され、右側の開閉ボタンは「＋」から「－」へ切り替わります。閉じている状態ではボタンが手前へ浮いたように見え、開いた状態では少し押し込まれた位置へ移動するため、クリックした感覚を視覚的に伝えられます。FAQ、商品説明、お問い合わせページ、会員サイトのヘルプ、管理画面の設定項目など、複数の情報を整理して表示する場面に利用できます。

見出しや本文はHTMLから変更でき、CSSではボタンの大きさ、色、角丸、影、厚み、移動量、アニメーション時間などを調整できます。JavaScriptではアコーディオンの開閉状態と「＋」「－」の表示を切り替えます。画面幅に合わせて余白やボタンサイズも調整するため、スマートフォン・タブレット・PCで利用しやすく、通常のアコーディオンへ立体的な開閉ボタンを加えたい場合に活用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

立体的な開閉ボタン付きアコーディオン

立体的なボタンはそのままに、「＋」の縦線だけが動いて「－」へ切り替わります。

アコーディオンとは？

アコーディオンは、見出しをクリックして必要な内容だけを表示できるUIです。

どんな場面で使う？

FAQ、商品説明、お問い合わせページ、管理画面などで利用できます。

ボタンの特徴は？

ボタン本体は厚みと影で立体的に見せ、中央の線だけを動かして開閉状態を表現しています。

各見出しをクリックすると内容が開閉し、立体的なボタンを保ったまま「＋」が中央位置をずらさず「－」へ切り替わります。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>立体的な開閉ボタン付きアコーディオン</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- アコーディオン全体 -->
  <div class="raised-accordion-button_wrap">

    <!-- タイトル -->
    <div class="raised-accordion-button_title">
      立体的な開閉ボタン付きアコーディオン
    </div>

    <!-- 説明文 -->
    <p class="raised-accordion-button_text">
      立体的なボタンはそのままに、「＋」の縦線だけが動いて「－」へ切り替わります。
    </p>

    <!-- アコーディオン一覧 -->
    <div class="raised-accordion-button_list">

      <!-- 1つ目の項目 -->
      <div class="raised-accordion-button_item">

        <!-- 開閉ボタン -->
        <button
          class="raised-accordion-button_heading"
          type="button"
          aria-expanded="false">

          <span>アコーディオンとは？</span>

          <!-- 立体的な＋／－アイコン -->
          <span
            class="raised-accordion-button_icon"
            aria-hidden="true">
          </span>

        </button>

        <!-- 開閉する内容 -->
        <div class="raised-accordion-button_content">

          <div class="raised-accordion-button_content-inner">

            <p class="raised-accordion-button_content-text">
              アコーディオンは、見出しをクリックして必要な内容だけを表示できるUIです。
            </p>

          </div>

        </div>

      </div>

      <!-- 2つ目の項目 -->
      <div class="raised-accordion-button_item">

        <!-- 開閉ボタン -->
        <button
          class="raised-accordion-button_heading"
          type="button"
          aria-expanded="false">

          <span>どんな場面で使う？</span>

          <!-- 立体的な＋／－アイコン -->
          <span
            class="raised-accordion-button_icon"
            aria-hidden="true">
          </span>

        </button>

        <!-- 開閉する内容 -->
        <div class="raised-accordion-button_content">

          <div class="raised-accordion-button_content-inner">

            <p class="raised-accordion-button_content-text">
              FAQ、商品説明、お問い合わせページ、管理画面などで利用できます。
            </p>

          </div>

        </div>

      </div>

      <!-- 3つ目の項目 -->
      <div class="raised-accordion-button_item">

        <!-- 開閉ボタン -->
        <button
          class="raised-accordion-button_heading"
          type="button"
          aria-expanded="false">

          <span>ボタンの特徴は？</span>

          <!-- 立体的な＋／－アイコン -->
          <span
            class="raised-accordion-button_icon"
            aria-hidden="true">
          </span>

        </button>

        <!-- 開閉する内容 -->
        <div class="raised-accordion-button_content">

          <div class="raised-accordion-button_content-inner">

            <p class="raised-accordion-button_content-text">
              ボタン本体は厚みと影で立体的に見せ、中央の線だけを動かして開閉状態を表現しています。
            </p>

          </div>

        </div>

      </div>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* アコーディオン全体 */
.raised-accordion-button_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* アコーディオン全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* アコーディオン内の全要素 */
.raised-accordion-button_wrap *{
  box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}

/* タイトル */
.raised-accordion-button_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.raised-accordion-button_text{
  margin:0 0 28px; /* 下側28pxの余白。値を大きくすると項目との間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* アコーディオン一覧 */
.raised-accordion-button_list{
  display:flex; /* 各項目を並べる */
  flex-direction:column; /* 縦方向へ配置 */
  gap:16px; /* 項目同士の間隔。値を大きくすると間隔が広がる */
}

/* アコーディオン項目 */
.raised-accordion-button_item{
  border:1px solid #dbeafe; /* 項目を囲む枠線 */
  border-radius:14px; /* 項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 項目の背景色 */
  overflow:hidden; /* 閉じた内容を項目の外へ表示しない */
}

/* 見出しボタン */
.raised-accordion-button_heading{
  display:flex; /* 見出しと開閉アイコンを横並びにする */
  align-items:center; /* 上下中央へ揃える */
  justify-content:space-between; /* 見出しとアイコンを左右へ配置 */
  width:100%; /* 項目の横幅いっぱいに表示 */
  min-height:70px; /* 見出しの最小高さ。値を大きくすると高くなる */
  padding:14px 18px; /* 上下14px・左右18pxの内側余白 */
  border:none; /* ブラウザ標準のボタン枠線を削除 */
  background:#ffffff; /* 見出しの背景色 */
  color:#111827; /* 見出しの文字色 */
  font:inherit; /* ページと同じフォントを使用 */
  font-size:17px; /* 見出しの文字サイズ */
  font-weight:700; /* 見出しを太字にする */
  line-height:1.5; /* 見出しの行間 */
  text-align:left; /* 見出しを左揃えにする */
  cursor:pointer; /* マウスを乗せたときにポインターを表示 */
}

/* キーボードフォーカス時 */
.raised-accordion-button_heading:focus-visible{
  outline:3px solid rgba(37,99,235,.22); /* フォーカス位置を示す3pxの枠線 */
  outline-offset:-3px; /* 枠線を3px内側へ表示 */
}

/* 立体的な開閉アイコン */
.raised-accordion-button_icon{
  position:relative; /* ＋記号を中央へ配置する基準 */
  display:flex; /* アイコン内部を中央揃えにする */
  align-items:center; /* 上下中央へ配置 */
  justify-content:center; /* 左右中央へ配置 */
  flex-shrink:0; /* アイコンが縮まないようにする */
  width:44px; /* アイコンの横幅。値を大きくするとボタンが大きくなる */
  height:44px; /* アイコンの高さ。値を大きくするとボタンが大きくなる */
  margin-left:16px; /* 見出し文字との間隔。値を大きくすると離れる */
  border:1px solid #93c5fd; /* 閉じている状態の枠線 */
  border-radius:50%; /* 円形にする */
  background:#ffffff; /* 閉じている状態のボタン本体を白にする */
  box-shadow:
    0 7px 0 #bfdbfe,
    0 12px 20px rgba(37,99,235,.18);
  /*
    7pxはボタン下側の厚み。
    値を大きくすると立体感が強くなる。
    12pxと20pxは外側の影の位置と広がり。
  */
  transform:translateY(-3px); /* 3px上へ配置して浮き上がった状態にする */
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    background-color .3s ease,
    border-color .3s ease;
  /*
    0.3秒で位置・影・色を切り替える。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

/* ＋記号を構成する横線と縦線 */
.raised-accordion-button_icon::before,
.raised-accordion-button_icon::after{
  content:""; /* 疑似要素を表示する */
  position:absolute; /* アイコン中央へ固定する */
  left:50%; /* 左端を中央へ移動 */
  top:50%; /* 上端を中央へ移動 */
  width:18px; /* 線の長さ。値を大きくすると＋記号が大きくなる */
  height:3px; /* 線の太さ。値を大きくすると太くなる */
  border-radius:999px; /* 線の両端を丸くする */
  background:#2563eb; /* 閉じている状態の＋記号を青にする */
  transform:translate(-50%,-50%); /* 線の中心をボタン中央へ合わせる */
  transition:
    transform .35s ease,
    opacity .35s ease,
    background-color .3s ease;
  /*
    0.35秒で縦線を回転・非表示にする。
    値を大きくするとゆっくり、小さくすると速くなる。
  */
}

/* ＋記号の縦線 */
.raised-accordion-button_icon::after{
  transform:
    translate(-50%,-50%)
    rotate(90deg); /* 横線を90度回転させて縦線を作る */
}

/* 開いている状態の立体ボタン */
.raised-accordion-button_item.is-open
.raised-accordion-button_icon{
  background:#2563eb; /* ボタン本体を青へ反転 */
  border-color:#2563eb; /* 枠線も青へ変更 */
  box-shadow:
    0 3px 0 #1d4ed8,
    0 6px 12px rgba(37,99,235,.20);
  /*
    3pxは開いた状態の下側の厚み。
    閉じた状態より小さくして押し込まれたように見せる。
  */
  transform:translateY(2px); /* 2px下へ移動して押し込まれた状態にする */
}

/* 開いている状態の記号 */
.raised-accordion-button_item.is-open
.raised-accordion-button_icon::before,
.raised-accordion-button_item.is-open
.raised-accordion-button_icon::after{
  background:#ffffff; /* 青いボタン上で記号を白へ反転 */
}

/* 開いたときに縦線を横方向へ回転して消す */
.raised-accordion-button_item.is-open
.raised-accordion-button_icon::after{
  transform:
    translate(-50%,-50%)
    rotate(0deg); /* 90度から0度へ回転させる */
  opacity:0; /* 重なった縦線を非表示にして－だけを残す */
}

/* 開閉する内容 */
.raised-accordion-button_content{
  display:grid; /* 高さを滑らかに切り替える */
  grid-template-rows:0fr; /* 閉じた状態では高さを0にする */
  transition:grid-template-rows .4s ease; /* 0.4秒で内容を開閉する */
}

/* 開いている内容 */
.raised-accordion-button_item.is-open
.raised-accordion-button_content{
  grid-template-rows:1fr; /* 内容の高さまで広げる */
}

/* 開閉内容の内側 */
.raised-accordion-button_content-inner{
  min-height:0; /* gridで高さ0まで縮小できるようにする */
  overflow:hidden; /* 閉じている内容を非表示にする */
}

/* 開閉内容の文章 */
.raised-accordion-button_content-text{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:0 18px 20px; /* 左右18px・下20pxの余白 */
  color:#4b5563; /* 本文の文字色 */
  font-size:16px; /* 本文の文字サイズ */
  line-height:1.8; /* 本文の行間 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* アコーディオン全体 */
  .raised-accordion-button_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* 見出しボタン */
  .raised-accordion-button_heading{
    min-height:64px; /* スマートフォンでの最小高さ */
    padding:12px 14px; /* スマートフォンでは余白を小さくする */
    font-size:16px; /* スマートフォンでの文字サイズ */
  }

  /* 立体的な開閉アイコン */
  .raised-accordion-button_icon{
    width:40px; /* スマートフォンではボタンを小さくする */
    height:40px; /* スマートフォンではボタンを小さくする */
  }

  /* ＋／－記号 */
  .raised-accordion-button_icon::before,
  .raised-accordion-button_icon::after{
    width:16px; /* スマートフォンでは記号を少し小さくする */
  }

  /* 開閉内容の文章 */
  .raised-accordion-button_content-text{
    padding:0 14px 18px; /* スマートフォンでは左右と下の余白を小さくする */
  }

}

/* アコーディオン全体を取得 */
const raisedAccordionButton=
  document.querySelector(
    ".raised-accordion-button_wrap"
  );

/* すべての見出しボタンを取得 */
const raisedAccordionButtonHeadings=
  raisedAccordionButton.querySelectorAll(
    ".raised-accordion-button_heading"
  );

/* 各見出しボタンへクリック処理を設定 */
raisedAccordionButtonHeadings.forEach(function(button){

  button.addEventListener("click",function(){

    /* クリックしたボタンが属する項目を取得 */
    const item=button.closest(
      ".raised-accordion-button_item"
    );

    /* is-openを切り替えて開閉状態を取得 */
    const isOpen=item.classList.toggle(
      "is-open"
    );

    /* 開閉状態をaria-expandedへ反映 */
    button.setAttribute(
      "aria-expanded",
      String(isOpen)
    );

  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではアコーディオンの見出し、本文、立体的な開閉ボタンを配置し、CSSでは「＋」「－」ボタンの厚みや影、色の反転、開閉アニメーション、レスポンシブ表示を設定します。JavaScriptではクリックされた項目へis-openクラスを付け外しし、アコーディオンの開閉状態とaria-expandedの値を切り替えます。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはアコーディオン全体を構成するファイルです。タイトル、説明文、各見出し、開閉後に表示する本文を変更できます。右側の開閉アイコンは文字として「＋」「－」を配置せず、空のspan要素へCSSの疑似要素を重ねて表示します。

style.cssはアコーディオン全体と立体的な開閉ボタンのデザインを設定するファイルです。ボタンの大きさ、背景色、枠線、影、厚み、記号のサイズ、開いたときの色反転、押し込まれる位置、本文の開閉速度などを変更できます。

script.jsはアコーディオンの開閉処理を行うファイルです。見出しをクリックすると、その項目のis-openクラスを切り替え、同時にaria-expandedへ現在の開閉状態を反映します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。各見出しをクリックすると対応する本文が開閉し、右側の立体的なボタンは「＋」から「－」へ切り替わります。開いた状態ではボタン本体が白から青、記号が青から白へ反転し、下方向へ移動して押し込まれたように表示されます。

カスタマイズできる内容
index.htmlでは「立体的な開閉ボタン付きアコーディオン」のタイトル、説明文、各項目の見出し、開閉後に表示する本文を変更できます。項目を追加する場合は、raised-accordion-button_itemのまとまりを同じ構成で追加できます。

style.cssではアコーディオン全体の横幅、余白、背景色、角丸のほか、開閉ボタンの大きさ、枠線、背景色、影、厚み、＋／－の線の長さや太さを変更できます。閉じた状態では白いボタンと青い記号、開いた状態では青いボタンと白い記号になるため、それぞれの色も個別に調整できます。また、開閉ボタンの移動量や本文の開閉時間も変更できます。

script.jsではクリックされた項目ごとにis-openクラスを切り替える処理を行っています。現在のコードでは複数の項目を同時に開くことができます。

数値調整
style.css
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

padding:32px;
アコーディオン全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。

gap:16px;
各アコーディオン項目の間隔です。値を大きくすると項目同士の間隔が広がります。

min-height:70px;
見出しボタンの最小高さです。値を大きくすると各見出しが高くなります。

width:44px;・height:44px;
立体的な開閉ボタンの大きさです。2つの値を同じように変更すると円形を保ったままサイズを調整できます。

box-shadow:0 7px 0 #bfdbfe, ...
閉じた状態のボタン下側に見える厚みです。7pxを大きくすると厚みが増え、立体感が強くなります。

transform:translateY(-3px);
閉じた状態のボタンを3px上へ移動しています。絶対値を大きくすると、より浮き上がって見えます。

width:18px;・height:3px;
＋／－を構成する線の長さと太さです。widthを大きくすると記号が横へ長くなり、heightを大きくすると線が太くなります。

rotate(90deg)
横線を90度回転させて＋記号の縦線を作っています。開いた状態では0度へ回転しながら透明になり、中央の横線だけが残って「－」になります。

box-shadow:0 3px 0 #1d4ed8, ...
開いた状態のボタン下側の厚みです。閉じた状態の7pxより小さくすることで、ボタンが押し込まれたように見える構成です。

transform:translateY(2px);
開いた状態のボタンを2px下へ移動します。値を大きくすると押し込み量が大きくなります。

transition:grid-template-rows .4s ease;
本文を開閉するアニメーション時間です。0.4秒で変化します。値を大きくするとゆっくり、小さくすると速く開閉します。

transition:transform .35s ease;
＋記号の縦線が回転する時間です。0.35秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてアコーディオン全体が縮小されます。さらに640px以下では全体のpaddingを24px 18px、見出しの最小高さを64px、開閉ボタンを40pxへ変更し、狭い画面でも収まりやすくしています。スマートフォン・タブレット・PCで利用できます。