チェックボックスがチェックされた時、
- 要素をフェードイン表示したり、
- 逆に要素を非表示にしたり、
- 文字の色を変えたりとか・・・
そういう動的な処理ってCSSだけでも十分できます。
そこで自分の記憶の整理も兼ね、
ここでは チェックON・OFF時に要素を表示する方法 を紹介！
jQueryとかスクリプトを書かなくても、複雑な処理ができて便利です。
チェック状態は :checked 疑似クラスを使う
チェックボックスとかラジオボックスとか・・・チェック可能な要素の場合
チェック状態の時だけCSSを適用できる便利な疑似クラスがあります。
それが :checked 疑似クラスというやつ
あんまり目立たないけど、これが意外と便利で使えます。
▼ 以下MDNリファレンスでの説明
CSS の :checked 疑似クラスセレクターは、ラジオボタン（<input type="radio">）、 チェックボックス（<input type="checkbox">）、 オプションボタン（<select> の中の <option>）要素がチェックされていたり on の状態にあったりすることを表します。
引用元 ： https://developer.mozilla.org/ja/docs/Web/CSS/:checked
これを使えば、チェック状態のときだけ要素表示とか可能
チェックされたときに要素表示する手順
ではチェックボックスがチェック時に要素表示する手順について
こういう処理って普通スクリプトとか使うイメージですよね。
でも今紹介した :checked を使えば、CSSだけでチャチャッとできます。
その基本的なやり方手順は次の通り
１．まずチェックボックスと表示したい要素作成
1 2 3 4 5 6 | <input type="checkbox" class="toggle"/> <div class="message"> チェックボックスがONになったらパッと表示します。 チェックOFFになったらスッと消えます。 </div> |
２．チェックされたら要素表示するCSS追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /** チェックOFFなら非表示 */ .message{ display: none; } /** チェックONなら表示 */ input:checked ~ .message{ display: block; } /** チェックボックス横にラベル表示 */ [type="checkbox"].toggle{ position: relative; } [type="checkbox"].toggle:after{ content: "表示する"; position: absolute; width: 100px; height: 20px; padding-left: 20px; top: 50%; transform: translateY(-50%); } |
何をしてるかはコード内のコメント参照
ただしラベル表示する時は input を label で囲むテクニックが使えません。だから ::after 疑似要素を使って表示制御の邪魔にならない形で追加してます。
▼ after疑似要素についてまとめた記事
そして要素表示を次のタイミングで実行
- チェックONなら要素を表示する
- チェックOFFなら要素を隠す
こういう感じで要素表示を切り替えてるだけです。
実際にチェックON・OFFしてみた要素がコチラ
▼ チェックが入ってないとき
▼ チェックを入れると・・・
ちゃんと要素表示されました。
動的な処理だけど、一切JavaScriptとかjQueryを使ってません。
このくらい簡単な処理なら、スクリプトの出番なし
チェックされたら要素をアニメ表示する応用
とりあえずチェックされたら要素表示する方法はこんな感じ
でも要素がパッと表示されるだけだとイマイチつまらないです。
なのでついでに、アニメ効果を付けて要素表示する方法 も載せときます。
例として作ってみたのが、
次みたいに要素をフェードインさせながら表示させるCSS
１．まずさっきと同じように要素作成（変更点なし）
1 2 3 4 5 6 | <input type="checkbox" class="toggle"/> <div class="message"> チェックボックスがONになったら１秒かけてゆっっっくり表示します。 チェックOFFになったら消えます。 </div> |
２．そして先ほどのCSSを次のように改造（一部省略）
1 2 3 4 5 6 7 8 9 10 11 | .message{ display: none; } input.toggle:checked ~ .message{ display: block; animation: fadein 1.5s; } @keyframes fadein{ from{ opacity: 0; } to{ opacity: 1; } } |
まず @keyframes で透明度 0 ～ 1 に変更する fadein というアニメを作成
そしてチェックボックスが :checked 状態でないなら要素非表示、 :checked 状態が有効になったらアニメを再生するっていう感じです。
実際の動作は次のGif動画参照
CSSでここまでできるとは驚き（自画自賛）
ここではフェードインするだけですが、応用すれば以下みたいなことも可能です。
- 回転とか縮尺させながら表示
- 要素を揺らしながら表示
- 背景色をグラデーションさせて表示
・・・みたいに工夫次第でいろいろ面白いことができます。
気になる人は transform プロパティとかで調べてみてください。
ここまでのまとめ
以上、CSSだけでチェック時に要素表示する手順でした。
jQueryとか使う前に、CSSでできないか考えるのも大事ですね。ではでは($・・)/~~~ﾊﾞｲﾊﾞｲ
