ブログ

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

2021年5月9日

考える人

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

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

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

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

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

本記事の内容

  • アコーディオンメニューの「HTML/CSSのコード」
  • アコーディオンメニューの「カスタマイズ方法」

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

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

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


山田涼介です。

知念侑李です。

伊野尾慧です。

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

ポイント

  • シンプルなデザイン
  • 文字色や背景色を変更できる
  • クリックで開閉するアニメーション
  • 1つだけ開く・下に開く
  • アイコン(プラスマイナス・開閉)を変更できる
  • アイコンの位置も変更できる
  • 1記事に何個も使用できる
  • テキストが長くなってもOK
  • もちろんレスポンシブ・スマホ対応

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

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

\🔖ブックマーク🐦SNSシェアにご協力を💡/

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

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

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

「追加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」の場所は下記です。

外観 › カスタマイズ › 追加CSS

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

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


<div class="ac-menu">
    <input id="ac-1" type="checkbox" />
    <label for="ac-1">【ネタバレ注意!】ジャンプの内容1です</label>
    <div class="ac-menu-inside">
        山田涼介です。
    </div>
</div>
<div class="ac-menu">
    <input id="ac-2" type="checkbox" />
    <label for="ac-2">【ネタバレ注意!】ジャンプの内容2です</label>
    <div class="ac-menu-inside">
        知念侑李です。
    </div>
</div>
<div class="ac-menu">
    <input id="ac-3" type="checkbox" />
    <label for="ac-3">【ネタバレ注意!】ジャンプの内容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を変更すると、中身の背景色が変わります。

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

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


<!-- 1つ目のアコーディオンメニュー -->
<div class="ac-menu">
    <input id="ac-1" type="checkbox" />
    <label for="ac-1">1つ目のラベル</label>
    <div class="ac-menu-inside">
        1つ目の中身
    </div>
</div>
<!-- 2つ目のアコーディオンメニュー -->
<div class="ac-menu">
    <input id="ac-2" type="checkbox" />
    <label for="ac-2">2つ目のラベル</label>
    <div class="ac-menu-inside">
        2つ目の中身
    </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">ジャンプの内容4です</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アニメーション【シンプルデザイン】

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

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

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

CSSだけで作るシリーズ

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

ここをタップして「アコーディオンメニューのHTML/CSS」を最初から見る!

その前に・・・

\🔖ブックマーク🐦SNSシェアにご協力を💡/

人気記事【30代後半+未経験】プログラミングで月100万稼ぐロードマップ

-ブログ
-, ,

テキストのコピーはできません。

© 2018 ONE PIECE THE BIBLE