cssだけでアコーディオンメニューを作成・第三回(cssセレクタ)

こんにちは、tanakaです。

前回は、
チェックボックスの反応場所を増やしました。

しかし、
色が変わる機能が消えてしまいました。

今回は、セレクタを使って、
色が変わる機能を戻してあげましょう。

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

cssのセレクタについての詳しい説明は
別の記事がございます。

よければ、そちらもご覧ください。

第三回:cssセレクタ

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

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

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

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

全体説明

cssのセレクタについて

(注意)セレクタについての詳しい解説は、別記事を用意しました。
よければ、そちらもご覧ください。

前回は、チェックボックの反応する箇所を増やしました。
しかし、
ボタンを押しても色は変わりませんでした。

今回は、
ボタンを押すと色が変わるようにします。

html 作成

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は、
こんな感じでした。
これは前回と同じですね。

それでは、
<h1>ボタン</h1>
の文字色が変わるように css 作っていきましょう。

css 作成

セレクタを使って目的タグまでたどる

スタートゴール
<input><label><h1>

それでは、
ボタンを押せば色が変わるように
cssを作って行きましょう。

それにはまず、
セレクタが必要です。

チェックが入っている時の
セレクタのスタートは、
<input>
です。
なぜなら、チェックボックス本体は<input>に
あるからです。

そこから、
変化させたいところまで、
<label>
<h1>
たどっていく事になります。

ここで一つ注意です。

<input>には
class名がつけてあります

.box01 は <input> のclass名です。

なので、
<input> = .box01
になります。

それでは実際に作ってみましょう。

完成はこんな感じです。

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

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

cssはこのような感じになります。

セレクタ
チェックなしcss
.box01+labelh1
チェックありcss
.box01:checked+labelh1

それでは、
.box01 + label h1
を説明します。

ここでは、セレクタを2つ使っています。

  • 隣接1つセレクタ
  • 子孫セレクタ

の2つです。

スタートゴール
.box01labelh1
隣接子孫
.box01+labelh1

と順番にたどって、指定していきます。

チェックありcssの .box01:checked も
:checked がついているか、ついていないかの違いで
セレクタ指定は、ほぼ同じです。

これで、
チェックなしcss
チェックありcss
共に、離れたところを指定する事ができました。

実行画面

チェックボタンを押して色が変わるか確認

それでは、チェックボタンを押して色が変わるか確認してみましょう。

ウインド画像6

色が変わりましたか?

変わらなければ、
セレクタが正しい位置を示していな事になります。

もう一度、
セレクタ付近を確認してみましょう。

どうですか?
色は変わりました?
完成すれば、次へ進みましょう。

チェックボックスを消しましょう

これで、
ボタンとチェックボックスが同じ機能を持ち、
しかも、
文字の色も変える事ができました。

なので、
同じ機能を持つチェックボックスは必要ありません。

チェックボックスを消しましょう。

ウインド画像8
.box01 {
display:none;
}

.box01 は <input> のclass名ですね。
これで、
<input>が表示されない事により、
チェックボックスも表示されなくなりました。

ブラウザの更新を押して画面を確認してみましょう。

ウインド画像9

チェックボックスが消えました。

これで、
ボタンの文字を押してみてください。
色が変わりましたか?

完成です。

今回使ったセレクタは、
とても大事なので、覚えておいた方が良いでしょう。

もっと詳しく知りたい、という方は、
css セレクタ
で、検索をかけて

調べてみると、
これ以外にもたくさん知る事ができて楽しいですよ。

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

次回は、
最終回:cssアコーディオンメニューの完成です。

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

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

第四回(最終回)はこちら

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