チェックボックスとラベルの話【CSS編】

　どうも！LSSです！！

チェックボックスとラベルの話【HTML編】

の続き。

チェックボックスとラベルを紐づけたところで、それに対してCSSから効果を与える方法について書きます。

CSS セレクタについての話が中心になります。

こっちあっち

この仕組みを使うと、クリックで切り替わり↑のような動作をするものが作れたりします。

idによる指定の場合
idを使わないで更にラベルが２つある場合の指定
チェックボックスを画面上で見せなくてもいい場合
まとめ

idによる指定の場合

↓このように、チェックボックスと、それに紐づいたラベルがあります。

ここをクリック

コード

<input id="chkbx2" type="checkbox" />
<label for="chkbx2">ここをクリック</label>

この「チェックボックスにチェックが入った時」に、ラベルの文字の背景色がピンク色に変わるようにしてみます。

まず、色を変化させる対象である、

<label for="chkbx2">ここをクリック</label>

の<label>タグに、対象として選択するためにidをつけておきます。

<label id="txt3" for="chkbx2">ここをクリック</label>

idは任意の名前（好きに名付けてOK）ですが、ここでは txt3 と名付けました。

そして、CSSから「チェックボックスにチェックが入った時にtxt3とidをつけたラベルの背景色をピンクにする」という指定を書きます。

コード

すると、↓こうなります。

ここをクリック

うまくいきましたね^^

ここで書いた、CSSの指定。

#chkbx2:checked~#txt3{
background-color:pink;
}

真ん中の行の「background-color:pink;」が「背景色をピンクにする」という指定です。

「どこの？」背景色をピンクにするのか、というのは、１行目の
「#chkbx2:checked~#txt3」
が該当する事になります。

この部分の事を「セレクタ」「CSS セレクタ」と呼びます。

セレクタはセレクタで色々と書き方のルールがあり、順に解説すると、まず冒頭の

#chkbx2

この「#」をつけたものは「id」を示し、この場合「chkbx2というidをつけたもの」を指す事になります。

今回の例で、「chkbx2」というidをつけたのは、
<input id="chkbx2" type="checkbox" />
チェックボックスでしたね。

そして、それに続く「:checked」という指定。

これはちょっと特殊な指定で「〇〇がチェックされた時のみ」有効となる、という指定です。

「#chkbx2:checked」までで、「chkbx2と名付けたidを持つ物がチェックされた時のみ」という意味になります。

さらに続けて、「~#txt3」と書いています。

「#txt3」は「txt3というidをつけたもの」で、今回の例でいえば、
<label id="txt3" for="chkbx2">ここをクリック</label>
のラベルが該当しますね。

その途中にある「~」（チルダ、と読む記号）は「兄弟要素」を示します。
…厳密にいうと「弟要素」が対象となります。
（弟要素…同じ親要素内で、それよりも後に書かれた要素）

【駄文】HTMLの親子関係を家系図で例示するのが困難だなぁ、と思った話 - Little Strange Software

では、磯野家を引き合いに出しましたが、「サザエ」にとっての「カツオ」および「ワカメ」ですねｗ

で、改めてセレクタ全文、
#chkbx2:checked~#txt3
を日本語に翻訳すると、
「chkbx2というidを持つ物がチェックされた時の、chkbx2の弟要素のうちtxt3というidを持つもの」
を指すセレクタである、という事になります。

チェックボックスはチェックボックスか紐づいたラベルがクリックされるたびに、チェック状態・チェックされていない状態が切り替わるので、
「クリックするたびに、背景色がピンクになったり戻ったりする」
仕組みが完成しましたね^^

idを使わないで更にラベルが２つある場合の指定

ここをクリックこっちでもＯＫ

コード

<label>
<input type="checkbox" />
<span class="dummy">ここをクリック</span>
<span class="dummy">こっちでもＯＫ</span>
</label>

前回、HTML編で書いた、idを使わないでラベルを用意するパターンですね。（<br/>タグだけ抜きました。）

こちらも、前述のようにidをそれぞれつけてやれば動作するようにできます、が…。

「せっかくidを使わないでチェックボックスとラベルを紐づけたんだから、最後までidを使わないでなんとかしたい！」

という場合の解決策について書きます。

まずは、コードを次のように変更します。

<style>
.sntk input+span{background-color:pink;}
.sntk input+span+span{background-color:lightblue;}
</style>
<label class="sntk">
<input type="checkbox" />
<span class="dummy">ここをクリック</span>
<span class="dummy">こっちでもＯＫ</span>
</label>

※idは使わない、と書きましたが一応効果範囲限定のために<label>タグにclassだけ指定しています。

そうすると、こうなります。

ここをクリックこっちでもＯＫ

まだ、クリックしてもチェックボックスしか反応しませんが、まずはこの状態から説明します。

.sntk input+span{background-color:pink;}
.sntk input+span+span{background-color:lightblue;}

セレクタが「.sntk」で始まっていますね。

このように最初に「.」をつけると「クラス名」を意味するようになり、「sntkと名付けたクラス名をもつもの」が対象となります。

続けて、半角スペースをあけて「input」が来ています。

この「半角スペース」は「子孫要素」を示し、「input」のように「#」も「.」もつけずに書いたものは「タグ名」を意味する事になります。

なので「.sntk input」は「sntkというクラス名を持つものの子孫要素（要素のタグで挟まれた中にある）のinputタグな要素」を指す事になります。

さらに、それに続けて「+span」とあります。

この「+」は「隣接する弟要素」をさします。

…弟要素、といえば、前述の「~」（チルダ）もそうでしたね。

「+」のほうは「隣接する弟要素」となっています。

隣接ってどういう事？というと、また例の有名な一家を引き合いにだすと…

「サザエ~」の場合、カツオおよびワカメをさします。
「サザエ+」の場合、すぐ下の弟、カツオをさします。
「カツオ+」の場合、ワカメをさします。

つまり「兄弟のうちの次の年長者」って事ですね。

今回のHTMLの場合、

<label class="sntk">
<input type="checkbox" />
<span class="dummy">ここをクリック</span>
<span class="dummy">こっちでもＯＫ</span>
</label>

なので、
「.sntk input+span」は「ここをクリック」の方の<span>タグ、
「.sntk input+span+span」は「こっちでもOK」の方の<span>タグをさす事になります。

と、いう事で…話が長くなりましたが、

コード

と、２つの<span>タグに対する指定をコピペして、:checked を入れて、指定色を入れ替えてやると…

ここをクリックこっちでもＯＫ

と、クリックするごとに（チェックボックスのオンオフが切り替わるごとに）ピンクと薄青の色が入れ替わるようなものが作れます^^

チェックボックスを画面上で見せなくてもいい場合

とりあえず仕組みの基本はできました。

チェックのオンオフで見た目が変わるようになったので、もうチェックボックス自体は表示しなくていいんじゃないか？って場合に、

コード

と、「.sntk input{display:none;}」を入れちゃいましょう。

チェックボックスである<input>タグを、非表示にしてしまう指定です。

非表示になっていても、見えないだけで存在はしており、機能しているので、

ここをクリックこっちでもＯＫ

と、「なぜかクリックするたびに色が入れ替わる仕組み」になりましたｗ

まとめ

今回は、CSS セレクタについての説明を中心に、仕組みの作り方について説明しました。

変化のほうは、単純に「背景色の指定」で説明しましたが、その { } 内に入れるCSS指定は変更してもいいし、大量に突っ込んでも動作します^^

あっちこっち

コード

↑ちょっと「大量に詰め込み」すぎたかもですがｗ、これだけ突っ込んでも動作しますね^^

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^