【HTML/CSS】アコーディオンメニュー【プラグインなし・コピペOK】

コピペOK！CSSのみ！プラグインなしで実装できる・・・

シンプルなデザインの「アコーディオンメニュー」アニメーションあります？

クリックで開閉できて、レスポンシブ（スマホ）対応済みの。

「よくある質問（FAQ）」の長い文章や、「ネタバレ」を隠すのに使いたくて。

こういった要望に応える記事を用意しました！

本記事の内容

本記事は、「アコーディオンメニュー」のHTML/CSSコードと、そのカスタマイズ方法【完全保存版】です！

実際に当ブログにも取り入れています。WEB制作で食べているぼくが解説しますね(｀・ω・´)ゞ

テーマやプラグインに依存しないので、変更してもデザインが崩れませんよ。

色をいっぱい使うとダサいので、シンプルなグラデーションにしました（クリックしてね）。

ポイント

「文字色・背景色」や「アイコン」を変更したい人のために、後半に「13通りのカスタマイズ方法」も記載しておきました。

このまんま使いたい人は、そのまんまコピペするだけでOKです。

【HTML/CSS】アコーディオンメニュー【プラグインなし・コピペOK】

コピペするのは、次の２つ。

「追加CSS」にペーストするCSS

/* アコーディオンメニュー */
.ac-menu:last-child {
  margin-bottom: 60px; /* 最後の要素の下にだけ余白 */
}
.ac-menu input {
  display: none;
}
.ac-menu label {
  color: #fff; /* 文字色 */
  font-size: 17px; /* 文字サイズ */
  line-height: 2; /* 行間 */
  font-weight: bold; /* 文字を太く */
  text-align: center; /* 文字を中央に */
  background: linear-gradient(-90deg, #C84260, #465D90); /* グラデーションの背景色 */
  padding: 20px; /* 内側の余白 */
  cursor: pointer;
  position: relative;
  display: block;
}
.ac-menu label:after {
  position: absolute;
  right: 20px; /* 左からの距離 */
  top: 50%; /* 上下中央配置 */
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
  content: "＋"; /* アイコン */
}
.ac-menu input:checked ~ label::after {
  content: "−"; /* クリック後のアイコン */
}
.ac-menu div {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.3s; /* 開閉スピード */
}
.ac-menu input:checked ~ div {
  height: auto;
  opacity: 1;
  padding: 20px; /* 中身の枠内の余白 */
  background: #FAFAFA; /* 中身の背景色 */
}
.ac-menu-inside {
  color: #333; /* 中身の文字色 */
  font-size: 17px; /* 中身の文字サイズ */
  line-height: 2; /* 行間 */
}

まずは上記を「追加CSS」にコピペしてください。「追加CSS」の場所は下記です。

あとは以下を、記事（テキストエディタ）の「アコーディオンメニュー」を設置したい箇所に毎回コピペするだけです。

「テキストエディタ」にペーストするHTML

<div class="ac-menu">
    <input id="ac-1" type="checkbox" />
    <label for="ac-1">【ネタバレ注意！】ジャンプの内容１です</label>
    <div class="ac-menu-inside">
        山田涼介です。
    </div>
</div>
<div class="ac-menu">
    <input id="ac-2" type="checkbox" />
    <label for="ac-2">【ネタバレ注意！】ジャンプの内容２です</label>
    <div class="ac-menu-inside">
        知念侑李です。
    </div>
</div>
<div class="ac-menu">
    <input id="ac-3" type="checkbox" />
    <label for="ac-3">【ネタバレ注意！】ジャンプの内容３です</label>
    <div class="ac-menu-inside">
        伊野尾慧です。
    </div>
</div>

では、カスタマイズ方法を解説していきます。

あらかじめ表示されている部分全体を「ラベル」、クリックすると開く部分を「中身」としています。

カスタマイズ①：ラベルの文字色を変更したい

.ac-menu label {
  color: #fff; /* 文字色 */
}

上記のcolorを変更すると、ラベルの文字色が変わります。

カスタマイズ②：ラベルの背景色を変更したい

.ac-menu label {
  background: linear-gradient(-90deg, #C84260, #465D90); /* グラデーションの背景色 */
  background: #FAFAFA; /* 単色の背景色 */
}

上記のbackgroundを変更すると、ラベルの背景色が変わります。

上が「グラデーション」、下が「単色」の背景色の書き方になります。

カスタマイズ③：ラベルに枠線をつけたい

.ac-menu label {
  border: 1px solid #eee; /* 線の太さ 線のタイプ 線の色 */
}

上記のborderを追記すると、ラベルに枠線をつけられます。

カスタマイズ④：ラベルの角を丸くしたい

.ac-menu label {
  border-radius: 4px; /* 角を丸く */
}

上記のborder-radiusを追記し、数値を上げていくと、角が丸くなります。

カスタマイズ⑤：アイコンを左にしたい

.ac-menu label:after {
 right: 20px; /* 左からの距離 */
}

上記をright → leftに変更すると、左から20pxの位置にアイコンが表示されます。

カスタマイズ⑥：アイコンを変更したい【プラスマイナス・開閉】

.ac-menu label:after {
  content: "▼"; /* アイコン */
}
.ac-menu input:checked ~ label::after {
  content: "▲"; /* クリック後のアイコン */
}

上記のcontent: "ココ";を変更すると、表示されるアイコンを変更できます。

「開」「閉」など文字でもOKです。

カスタマイズ⑦：開閉スピードを変更したい

.ac-menu div {
  transition: 0.3s; /* 開閉スピード */
}

上記のtransitionの数値を変更すると、開閉スピードが変わります。

カスタマイズ⑧：ラベルにマウスを乗せた時に背景色を変えたい

.ac-menu label:hover {
  background: #FAFAFA; /* マウスを乗せた時の背景色 */
  opacity: 0.5; /* マウスを乗せた時に背景色が薄くなる */
}

上記を追記し、backgroundを変更することで、ラベルにマウスを乗せた時に背景色が変わります。

opacityだけ追記すると、色はそのままに背景色が薄くなります。

ユーザーの視認性が上がりますね。

カスタマイズ⑨：アイコン（ラベル）をクリックした後の背景色を変えたい

.ac-menu input:checked ~ label {
  background: #FAFAFA; /* クリック後のラベルの背景色 */
}

上記を追記し、backgroundを変更することで、アイコンをクリックした後のラベルの背景色が変わります。

ちなみに、ラベルのどこをクリックしても開閉しますよ。

カスタマイズ⑩：中身の文字色を変更したい

.ac-menu-inside {
  color: #333; /* 中身の文字色 */
}

上記のcolorを変更すると、中身の文字色が変わります。

カスタマイズ⑪：中身の背景色を変更したい

.ac-menu input:checked ~ div {
  background: #FAFAFA; /* 中身の背景色 */
}

上記のbackgroundを変更すると、中身の背景色が変わります。

カスタマイズ⑫：アコーディオンメニューを１記事に２つ以上使いたい

「テキストエディタ」にペーストするHTML

<!-- 1つ目のアコーディオンメニュー -->
<div class="ac-menu">
    <input id="ac-1" type="checkbox" />
    <label for="ac-1">１つ目のラベル</label>
    <div class="ac-menu-inside">
        １つ目の中身
    </div>
</div>
<!-- 2つ目のアコーディオンメニュー -->
<div class="ac-menu">
    <input id="ac-2" type="checkbox" />
    <label for="ac-2">２つ目のラベル</label>
    <div class="ac-menu-inside">
        ２つ目の中身
    </div>
</div>

上記のとおり、id="ac-1"とfor="ac-1"の数字を変更し、それぞれ一致させればOKです。

カスタマイズ⑬：ラベル内のテキストが長すぎてスマホで崩れてしまう

文字数によってはラベル内のテキストが長すぎて、スマホではデザインが崩れてしまう・・・なんてことがあるでしょう。

文字サイズを小さくする方法もありますが、スマホでのみ改行する方法がオススメです。

「テキストエディタ」にペーストするHTML

<div class="ac-menu">
    <input id="ac-4" type="checkbox" />
    <label for="ac-4">【ネタバレ注意！】<br class="br-sp">ジャンプの内容４です</label>
    <div class="ac-menu-inside">
        八乙女光です。
    </div>
</div>

改行したい位置に<br class="br-sp">を挿入します。

「追加CSS」にペーストするCSS

/* アコーディオンメニュー */
.br-sp {
  display: none; /* 改行させない */
}

/* 480px以下 */
@media (max-width: 480px) {
  .br-sp {
    display: block; /* 480px以下で改行する */
  }
}

上記を追記することで、PCでは改行させず、「480px」以下になると改行されるようになります。

数値は自由に変更してくださいね。

まとめ：アコーディオンメニューのHTML/CSSアニメーション【シンプルデザイン】

シンプルなデザインの「アコーディオンメニューのHTML/CSS」アニメーションの作り方でした！

プラグインなし・CSSだけで作る「コピペOKな装飾」は、次のとおり。

CSSだけで作るシリーズ

「ブログ」はもちろん、「WEB制作」でも重宝すること間違いないですよ！

その前に・・・

人気記事【３０代後半＋未経験】プログラミングで月１００万稼ぐロードマップ