cssだけでアコーディオンメニューを作成・第一回(なぜ可能なのか)

こんにちは tanaka です。

cssだけで出来ているアコーディオンメニューを
初めて見た人は、
頭にいっぱい「???」が
浮かんだのではないでしょうか。

「これは一体どうなっているのか?」
「それ以前に、どうやって動作しているのか?」
など

そんな難しそうなアコーディオンメニューを
仕組みから
作り方まで
徹底解説します。

とても長くなるので、
以下の4回に分けて説明します。

  1. なぜ可能なのか
  2. ボタン作成
  3. cssセレクタ
  4. 完成

今回は、第一回目「なぜ可能なのか」をお送りいたします。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

全体説明

チェックボックス と :checked { } を利用

1回目は「なぜ可能なのか?」です。

結論からいうと

ウインド画像3

まず、
チェックボックスを作ります。
<input type=”checkbox”>

ウインド画像4

チェックボックスが押されると

チェックボックスが押されたcssが動きます。

.box01:checked + h1 {
color: red;
}

.box01:checked + h1 {
color: red;
}
ウインド画像3

チェックが外れると普通のcssが動きます。

普通のcss

.box01 + h1 {
color: blue;
}

.box01 + h1 {
color: blue;
}

この切り替えは機械側が自動でやってくれます。

この自動で切り替わってくれるシステムを利用して
css側で2つの状態を切り替えている。

閉じたメニュー ←自動切り替え→ 開いたメニュー

このシステムを利用してアコーディオンメニューは作成されています。

チェックボックスのあり、なしを css側 が自動で判別

さらにもっと、
説明すると、

まずは、
<input type=”checkbox”>を作ります。

そうすると、
 ・チェックあり
 ・チェックなし
2つの状態ができます。

次に、
css側で
 ・チェックあり用(:checked { })
 ・チェックなし用(普通のcss)
を作ります。

htmlcss
チェックが入った:checked { }
チェックが入っていない普通のcss

チェックボックスを押すだけで
2つのcssが自動で切り替わる、
そんな、システムが出来上がります。

うん?
わからん??

と、文字だけ読むと
「わからん」
になりませんか?

ということで、
実際に作ってみましょう。

html 作成

それでは、
動きや、仕組みが分かりやすい

チェックが入ると文字の色が変わる
html,cssを作ります。

ウインド画像4

こういう感じのものです。
チェックが入ると文字が赤くなります。

<input> は type=”checkbox” で作成

まずはhtml側を作っていきます。
下の画像をご覧ください。

ウインド画像1
<input type=”checkbox” id=”label01″ class=”box01″ name=”window01″ /> 
<h1>windows</h1>

<input type=”checkbox” id=”label01″ class=”box01″ name=”window01″ />
<h1>windows</h1>

<input> と <h1> を用意しました。

ウインド画像3

<input> = □   (チェックボックスを作成)
<h1> = windows (この文字の色を変える)
になります。

まずは、
<input> <h1> の説明です。

<input>
typecheckbox□ ←これを作成
idlabel01(第二回)で使用
classbox01名前つけ
namewindow01同上



<h1>

文字windows今回、
この文字の色を変える

これで
htmlができました。

css 作成

:checked はチェックが入った時のcss

次は、css側を作ってみましょう。

下の画像をご覧ください。

ウインド画像2
.box01 + h1 {
color: blue;
}

.box01:checked + h1 {
color: red;
}

.box01 + h1 {
color: blue;
}

.box01:checked + h1 {
color: red;
}

チェックなし .box01 + h1
チェックあり .box01:checked + h1
2つを作ります。

チェックなしcss

.box01 + h1color: blue;何もしないと”



チェックありcss

.box01:checked + h1color: red;チェックが入ると”

これで、
htmlとcssの両方ができました。

完成

2つの状態が自動で切り替わる

予定通りに動けば

  • <input> のチェックなしで青
  • <input> のチェックありで赤

になります。

それでは、
ブラウザー見てみましょう。

ウインド画像3

どうでしょうか?
ちゃんと表示されていますか?

初めは、チェックが外れた状態(文字青)で表示されています。

チェックを入れてみると

ウインド画像4

文字が赤に変わりました。

これらを利用することにより、

  • チェックなしcss
  • チェックありcss

と2つの状態を自動で切り替える事が
できるようになりました。

今回はこれでおしまいです。

次は、「チェックボックスの印」をボタンに変えるやり方を
紹介します。

以上、
cssだけで作るアコーディオンメニュー
第一回:なぜ可能なのか(全4回)ついてのお話しでした。

ありがとうございました。

第二回はこちら

タイトルとURLをコピーしました