【html&css】コピペだけ！開閉式のアコーディオンメニューデザイン8選

2026年2月22日2026年2月24日

本記事では、カスタマイズ可能な開閉式のアコーディオンメニューデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

おしゃれなフリー素材デザイン集

本サイトでは、アコーディオンメニュー以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

おしゃれな素材デザイン集

見出し
ボタン
ボックス
ローディング
リスト
吹き出し
アコーディオンメニュー
検索フォーム
セレクトボックス
パンくずリスト
テキストボックス
ツールチップ
Q&Aリスト
引用ボックス
レーダーチャート
「READ MORE」ボタン
タブボタン
トグルボタン
チェックボックス
フッター
付箋
ページネーション
円グラフ
ラジオボタン
目次
棒グラフ
モーダルウィンドウ
タイムライン（ステップバー）

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

シンプルなアコーディオンメニュー｜矢印, プラスマイナス

ここでは、以下のシンプルなアコーディオンメニューデザイン例を記載しています。

シンプルなアコーディオンメニューデザイン

下線あり
枠線あり
背景あり
白背景＆シャドウ

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もアコーディオンメニューページでは選択式でご用意しました。

調整項目一覧

下線の色
タイトルの色
詳細の文字色
アイコンの種類：矢印, プラスマイナス
枠線の色
左線の色

ご興味があれば「アコーディオンメニュー一覧ページ」を一読ください。

下線あり

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

内容がここに入ります。内容がここに入ります。

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

内容がここに入ります。内容がここに入ります。

HTMLコード表示

<details class="accordion-1">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>
<details class="accordion-1">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>

CSSコード表示

.accordion-1 {
  max-width: 500px;
  margin: 0 auto 1em;
  border-bottom: 2px solid #d0d0d0;
}

.accordion-1 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

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

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

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

.accordion-1 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 2em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

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

枠線あり

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

内容がここに入ります。内容がここに入ります。

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

内容がここに入ります。内容がここに入ります。

HTMLコード表示

<details class="accordion-2">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>
<details class="accordion-2">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>

CSSコード表示

.accordion-2 {
  max-width: 500px;
  margin: 0 auto 1em;
  border: 2px solid #d0d0d0;
  border-radius: 5px;
}

.accordion-2 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

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

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

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

.accordion-2 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 2em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.accordion-2[open] p {
  transform: none;
  opacity: 1;
}

背景あり

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

内容がここに入ります。内容がここに入ります。

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

内容がここに入ります。内容がここに入ります。

HTMLコード表示

<details class="accordion-3">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>
<details class="accordion-3">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>

CSSコード表示

.accordion-3 {
  max-width: 500px;
  margin: 0 auto 1em;
  background-color: #f2f2f2;
  border-radius: 5px;
}

.accordion-3 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

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

.accordion-3 summary::after {
  width: 14px;
  height: 14px;
  margin-left: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  content: '';
  transition: transform .3s;
  opacity: 0.7;
}

.accordion-3[open] summary::after {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11H19V13H5V11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
}

.accordion-3 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 2em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.accordion-3[open] p {
  transform: none;
  opacity: 1;
}

白背景＆シャドウ

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

内容がここに入ります。内容がここに入ります。

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

内容がここに入ります。内容がここに入ります。

HTMLコード表示

<details class="accordion-4">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>
<details class="accordion-4">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>

CSSコード表示

.accordion-4 {
  max-width: 500px;
  margin: 0 auto 1em;
  border-radius: 5px;
  box-shadow: 0 7px 15px -5px rgb(0 0 0 / 50%);
  background-color: #ffffff;
}

.accordion-4 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

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

.accordion-4 summary::after {
  width: 14px;
  height: 14px;
  margin-left: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  content: '';
  transition: transform .3s;
  opacity: 0.7;
}

.accordion-4[open] summary::after {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11H19V13H5V11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
}

.accordion-4 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 2em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.accordion-4[open] p {
  transform: none;
  opacity: 1;
}

おしゃれなアコーディオンメニュー｜矢印, プラスマイナス

ここでは、以下のおしゃれなアコーディオンメニューデザイン例を記載しています。

おしゃれなアコーディオンメニューデザイン

単色背景
枠線あり
枠線あり＆吹き出し風
見出し風

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もアコーディオンメニューページでは選択式でご用意しました。

調整項目一覧

背景色
タイトルの色
詳細の文字色
アイコンの種類：矢印, プラスマイナス
枠線の色
左線の色

ご興味があれば「アコーディオンメニュー一覧ページ」を一読ください。

単色背景

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

内容がここに入ります。内容がここに入ります。

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

内容がここに入ります。内容がここに入ります。

HTMLコード表示

<details class="accordion-5">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>
<details class="accordion-5">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>

CSSコード表示

.accordion-5 {
  max-width: 500px;
  background-color: #f2f2f2;
  margin: 0 auto 1em;
}

.accordion-5 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em;
  border-radius: 5px;
  background-color: #2589d0;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}

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

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

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

.accordion-5 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: 1em 2em 2em 2em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.accordion-5[open] p {
  transform: none;
  opacity: 1;
}

枠線あり

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

内容がここに入ります。内容がここに入ります。

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

内容がここに入ります。内容がここに入ります。

HTMLコード表示

<details class="accordion-6">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>
<details class="accordion-6">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>

CSSコード表示

.accordion-6 {
  max-width: 500px;
  margin: 0 auto 1em;
  border: 2px solid #2589d0;
  border-radius: 5px;
}

.accordion-6 summary {
  display: block;
  position: relative;
  padding: 1em 3.5em 1em 2em;
  color: #2589d0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

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

.accordion-6 summary::before {
  position: absolute;
  top: 50%;
  right: 1.2em;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: #2589d0;
  border-radius: 50%;
  content: '';
}

.accordion-6 summary::after {
  position: absolute;
  top: 50%;
  right: calc(1.2em + 9px);
  transform: translateY(-65%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  content: '';
  transition: transform .3s;
}

.accordion-6[open] summary::after {
  transform: translateY(-25%) rotate(225deg);
}

.accordion-6 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: 0 2em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.accordion-6[open] p {
  transform: none;
  opacity: 1;
}

枠線あり & 吹き出し風

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

内容がここに入ります。内容がここに入ります。

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

内容がここに入ります。内容がここに入ります。

HTMLコード表示

<details class="accordion-7">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>
<details class="accordion-7">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>

CSSコード表示

.accordion-7 {
  max-width: 500px;
  margin: 0 auto 1em;
}

.accordion-7 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em;
  border: 2px solid #2589d0;
  border-radius: 5px;
  color: #2589d0;
  font-weight: 600;
  cursor: pointer;
}

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

.accordion-7 summary::after {
  width: 14px;
  height: 14px;
  margin-left: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  content: '';
  transition: transform .3s;
  opacity: 0.7;
}

.accordion-7[open] summary::after {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11H19V13H5V11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
}

.accordion-7 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin-top: 20px;
  padding: .8em 1.2em;
  border: 2px solid #2589d0;
  border-radius: 5px;
  background-color: #fff;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.accordion-7[open] p {
  transform: none;
  opacity: 1;
}

.accordion-7 p::before,
.accordion-7 p::after {
  position: absolute;
  top: -15px;
  left: 1.2em;
  width: 30px;
  height: 15px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  content: '';
}

.accordion-7 p::before {
  background-color: #2589d0;
}

.accordion-7 p::after {
  top: -12px;
  background-color: #fff;
}

見出し風

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

内容がここに入ります。内容がここに入ります。

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

内容がここに入ります。内容がここに入ります。

HTMLコード表示

<details class="accordion-8">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>
<details class="accordion-8">
  <summary>アコーディオンのデザイン</summary>
  <p>内容がここに入ります。内容がここに入ります。</p>
</details>

CSSコード表示

.accordion-8 {
  max-width: 500px;
  margin: 0 auto 1em;
}

.accordion-8 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em;
  border-left: 5px solid #2589d0;
  background-color: #f2f2f2;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

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

.accordion-8 summary::after {
  width: 14px;
  height: 14px;
  margin-left: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  content: '';
  transition: transform .3s;
  opacity: 0.7;
}

.accordion-8[open] summary::after {
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11H19V13H5V11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
}

.accordion-8 p {
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: 1em 2em 2em 2em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.accordion-8[open] p {
  transform: none;
  opacity: 1;
}