cssだけでボタン!?　アコーディオンメニューの説明と作り方

＜アコーディオンメニューとは＞

アコーディオンメニューとは
「開閉できる」メニューのことです。

まるでアコーディオンのように「伸びたり」「縮んだり」することから
その名前がついたそうです。

＜アコーディオンメニューの例＞

ウインドが開いたり、閉じたりする。

＜:checkedの使用例＞

下の例では「:checked」を利用し
文字の色を変えています。

チェックなし　＝　文字は青
チェックあり　＝　文字は赤

html

<input type=”checkbox”>
<h1>windows</h1>

css

input + h1 {
  color: blue;
}

input:checked + h1 {
  color: red;
}

このように「:checked」を使えば、
条件によってcssを切り替えることができます。

＜アコーディオンメニューのhtml、css＞

html

<input type="checkbox" id="label01" class="box01" />

<label class="la01" for="label01">ローレンイプサムのウインド</label>

<p class="Lorem01">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

css

.box01 {
  display: none;
}

.la01 {
  display: block;
  font-size: 20px;
  text-align: center;
  width: 420px;
}

.la01::after {
  display: inline;
  content: "（開く）";
  font-size: 20px;
}

.box01:checked + .la01::after {
  display: inline;
  content: "（閉じる）";
  font-size: 20px;
}

.Lorem01 {
  opacity: 0;
  transition: 1s all;
  width: 0px;
  height: 0px;
}

.box01:checked + .la01 + .Lorem01 {
  opacity: 1;
  transition: 1s all;
  width: 400px;
  height: auto;
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}

＜アコーディオンメニューでの<label>使用法＞

このように<input>と<label>を連動させると、
チェックボックスを押しても「<label>ボタン</label>」を押しても

どちらでもチェックボックスは反応します。

あとは、
<input>を非表示にすれば完成。

これで
「ボタン」の文字を押すと
チェックボックスが押されたことと同じになります。

＜アニメーションには「transition: 1s all」＞

cssのアニメーションには「transition: 1s all」を使います。

「transition: 1s all」を使えば、
１秒かけてプロパティが変化します。

＜表示、非表示は「opacity」＞

アコーディオンメニューの
表示、非表示には「opacity」を使います。

「非表示は、display:none なのでは？」

と思われるかもしれません。

「display:none」は、
アニメーションに向いていません。

なぜなら

ONとOFFしかないからです。

表示と非表示だけで、間がないため
　「パッと表示して」
　「パッと消える」
このような感じになりアニメーションしません。

なので

アニメーションの表示、非表示には「opacity」を使います。

css

.Lorem01 {
  opacity: 0;
  transition: 1s all;
  width: 0px;
  height: 0px;
}

.box01:checked + .la01 + .Lorem01 {
  opacity: 1;
  transition: 1s all;
  width: 400px;
  height: auto;
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}