MENU
  1. ホーム
  2. CSS
  3. 【CSS】コピペだけ！開閉式のアコーディオンメニューデザイン8選

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

CSS
accordion-menu-design
ポートフォリオ向けサーバー
HTML/CSSスキルが活きる！
学んだ知識を活かして、
自分だけのブログを始めませんか？

WordPressブログなら、あなたのコーディング知識でデザインのカスタマイズが自由自在。
ブログデビューに最適な初心者向けサーバー環境を徹底比較しました。

ブログ向けサーバー4選を見る

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

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

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

HTML/CSS学習者の方へ
「学んだコード、自分のブログで試してみませんか？」
多くのブロガーがデザインでつまずく中、コードが読めるあなたは圧倒的に有利です。
自由自在なサイト構築の第一歩となる、初心者向けサーバーを分かりやすく比較しました。

＼ スキルを活かして情報発信 ／ ブログ向けレンタルサーバー4選を読む▶︎
目次

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

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

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

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

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

Code Stock
Code Stock | UIコピペサイト UIコピペサイト

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

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

シンプルなアコーディオンメニューデザイン
  • 下線あり
  • 枠線あり
  • 背景あり
  • 白背景＆シャドウ

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

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

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

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

Code Stock
ACCORDION-MENU | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Simple accordion シンプルなアコーディオンメニュー アコーディオンのデザイン 下線だけのシ…

下線あり

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

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

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

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

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コードを記載しています。

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

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

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

Code Stock
ACCORDION-MENU | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Simple accordion シンプルなアコーディオンメニュー アコーディオンのデザイン 下線だけのシ…

単色背景

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

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

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

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

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;
}

よくある質問（FAQ）

アコーディオンメニューを動かすためにJavaScript（jQuery）は必要ですか？

いいえ、必要ありません。

当記事で紹介しているデザインはすべて、HTML（<details>と<summary>タグ、またはチェックボックス）とCSSのみで作られているため、コピペするだけでそのまま動作します。

HTMLとCSSのコードはどこにコピペすればいいですか？

HTMLコードは、アコーディオンを表示させたい記事の本文中（カスタムHTMLブロックなど）に貼り付けます。

CSSコードは、WordPressテーマの「追加CSS」や子テーマのスタイルシートに貼り付けてください。

メニューが開く・閉じる時のアニメーションスピード（速度）を変えられますか？

はい、変更可能です。

CSSコード内にあるtransitionプロパティの秒数（例：0.3sや0.5sなど）の数値を大きくすればゆっくり開き、小さくすれば素早く開閉するようになります。

最初から1つ目のメニューだけ「開いた状態」にしておくことはできますか？

可能です。

<details>タグを使用している場合は、HTMLを<details open>と記述するだけで最初から開いた状態になります。

スマホで見るとタップする部分（＋アイコンなど）が押しづらいのですが調整できますか？

タップ領域を広げるには、CSSでタイトルの部分（<summary>や<label>）のpadding（内側の余白）を大きめに設定してください。

これにより、スマホでも快適に操作できるレスポンシブ対応になります。

CONTACT

サイト制作でお困りの人はお気軽にご連絡ください。
どんなお悩み事も丁寧に返信させて頂きます。

お問い合わせページへ
WordPress移行
Webサイトを公開しよう！

「どのサーバーを選べばいいか分からない…」そんな悩みを解決！
WordPressデビューに最適なサーバーを徹底比較しました。

おすすめサーバー4選を見る
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次