cssだけでアコーディオンメニューを作成・第二回(ボタン作成)

こんにちは tanaka です。

前回は、仕組みとチェックボックスの説明でした。

これで、
アコーディオンメニュー仕組みが
なんとなく分かってもらえたかと
思います。

今回は、チェックボックスの印を別の何かに変える
ボタン作成の説明をします。

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

文字だけではわかりにくいので
画像も交えて説明します。

第二回:ボタン作成

第一回を見ていない方は、下のリンクからどうぞ。

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

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

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

全体説明

自作のボタンを作成

今回は、
チェックボックスと連動するボタンの作り方の説明します。

まずは、おさらいです。

今現在、下の画像のようになっています。

ウインド画像4

チェックボックスにチェックを入れると、
windowsの文字の色が変わる。

これでも良いのですが、
できればチェックボックスの部分を
自分で作ったものと取り替えたい所です。

そこでまずは、
通常のチェックボックスに加えて、
どこかを押すとチェックボックスが反応する

そのような、
チェックボックスと連動する機能を追加していきます。

html 作成

<label>を使ってチェックボックスと連動

それには、
<label> を使います。

<label>は、
単体で意味をなしません。

しかし、
<input> と同時に使う事で
本領を発揮します。

<label>の使い方は、
まず、
 <input> id=””
 <label> for=””
これを同じ名前にします。

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

<label for=”label01″>
</label>

これで、
<label> と <input>
結合完了です。

<label> と <input>
は、同じ機能となりました。

しかし、
これでは、結合しただけで
まだ使えません。

使うには、
反応カ所となる文字や画像が必要です。

なので、
<label></label>の間に文字や画像を入れます。

<label>
 <h1>ボタン</h1>
 <img src=”hanbaagu.jpg” alt=””>
</label>

<label> と <input> は
今現在、
同じ機能を持っています。

ですので、
<label></label>の間にある
文字や画像をクリックすると

<input> のチェックボックスを
押したことと同じになり
チェックボックスにチェックが入ります。

最初は<input>のチェックボックスしか
反応するところはありませんでした。

しかしこれで、
チェックボックスの反応する所を
 ・<input>のチェックボックス
 ・<label></label>の間にある文字
 ・<label></label>の間にある画像
3つに増やすことができました。

文字だけではわかりにくと思われますので、
実際の html をみてみましょう。

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

<label for=”label01″>
<h1>ボタン</h1>
</label>

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

<label for=”label01″>
<h1>ボタン</h1>
</label>

html はこのような感じになっています。
 <input> id=”label01″ 
 <label> for=”label01″
“label01″ が同じですね。

ここで一つ注意です。
<input> は id
<label> は for

<input>id=”label01″
<label>for=”label01″

同じではないので、
コピーペーストするときには
気をつけてください。

これで、
<input> のチェックボックス
<label>を連動させる事ができました。

<input> と <label> を連動させた事により、
チェックボックスと、
<label></label> の間に書かれている文字などが
同じ機能を果たします。

実行画面

文字を押してもチェックがつく

それでは、ボタンの文字部分を押してみましょう。

ウインド画像6

ボタンの文字を押しているのに、
チェックボックスが反応しチェックがつきました。

<label> を使うことにより、
チェックボックスを押しても
ボタンの文字を押しても反応する
状態を作る事ができました。

しかし、

上のhtmlでは、
チェックボックスは反応しましたが、

第一回で作ったように、
文字の色は変わってくれません。

なぜでしょう?

これは、
前回のwindowsの文字が入っていた
タグの位置(<h1>のこと)と

今回のボタンの文字が入っている
タグの位置が違うため、
色が変わらなくなりました。

それでは、どうしたら良いのでしょうか?

という所で、
今回はおしまいです。

次回は、色を変えれるようにする
<h1>の指定(cssのセレクタ)について

説明します。

以上、
cssだけで作るアコーディオンメニュー
第二回:ボタン作成(全4回)ついてのお話しでした。

ありがとうございました

第三回はこちら

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