【CSS】 JS使わずに表示・非表示を切り替える方法

こんにちわ！社員Tです！

コーディング中に、テキストの表示・非表示などのtogglleを実装したい時、いちいちJavaScriptを書く手間が面倒な時ってありませんか？

今回は、そんな手間が省ける【JavaScript】を使わずに簡単にtoggleが実装できる方法をご紹介します。

目標とする成果物

まずはじめに今回ご紹介する成果物をご覧ください。

See the Pen
Untitled by tsurukei (@keisuke9360-0122)
on CodePen.

HTMLの構造からですが、toggleの起点となるトリガーをinput要素で、typeをcheckboxに設定します。それによって、checkboxのcheckが入った時に動作させるためです。また、後ほど出てくるlabel要素との紐付けを行う際に目印となる、idの指定もしておきましょう。

input自体の要素は、画面上には必要ないのであくまでも動作の起点としての設定です。（CSSで、後ほど処理をします）

視覚的なtoggleの起点を作成

次に、視覚的なtoggleの起点となる要素を設定します。

labelタグを使い目印となるテキストを記述し、冒頭に記述したinput要素との紐付けを行うためにfor属性で、inputで設定したidを指定します。最後にdivタグ(.toggle-outer)で囲うことによって、この囲った範囲がクリック、またはタップされることで、視覚的なtoggleの起点を作成することができます。

※class名は、任意とします。

中身の作成

展開・収束させる部分の設定は、自分が展開・収束させたいテキストや画像などを記述し、divタグ(.toggle-inner)で囲ってあげれば、HTMLは完成です。

ここでの、ポイントはtoggleさせるブロックとさせないブロックを分けることが重要です！

ブロックを分けることによって、実質的なボタンとして機能させる意図があるからです。

続いて、CSSの解説に移ります。

CSSの設定

ここからCSSを各要素にあてていきます。

まずは、input要素を非表示にするため、visibilityにhidden を指定。

【要素を非表示にする】という観点からすると、display:none も選択肢として考えられますが、今回は、visibility:hiddenを指定。

display:noneにしない理由は、visibility:hiddenは【要素はあるけど見えない状態】に対し、display:noneは【要素も取得されず、完全にその場にない扱い】となるため、今回のように表示したくないけどinputの機能は使いたい時に適しているからです。

同じような理由で、toggleする前の状態では、非表示としたいdiv.toggle-innerにも、visibility:hiddenを設定します。

toggleの切り替わりのスピードが気になったので今回、transitionプロパティを設定してますが、そちらはイメージのtoggleに合わせて適宜設定していただければ大丈夫です！

そして、今回の最大のポイントとなるのがCSSセレクタの~(チルダ)を使って、input にcheckが入ったかを判定させ、toggleとして再現していきます。

この~（チルダ）ですが、【一般兄弟結合子】とも言われ、下記のように設定します。

選択した要素 ~ 条件 {
  color: aqua;
}

【選択した要素】・・・スタイルを適用させたい範囲の始点となる同階層の要素

【条件】・・・スタイルを反映させたい要素

よって、toggleに当てはめると

#toggle１:checkd　~  .toggle-innner    →  「 checkbox(チェック有り)の後ろにある.toggle-inner」にだけスタイルを適用するという指定ができます。

MDNにもより詳しい解説がありますので、ご参考までに！

~ (チルダ)の使い方

まとめ

JavaScriptだと、idを取得、クリックイベントを記述し、クラスの追加・削除まで記述しなければいけないので、今回のようなHTMLの工夫とCSSセレクタの選び方で、本当に簡単に実装できることがお分かりいただけたと思います！

実務で自分の想定していなかった範囲にまで、スタイルがあたってしまうことがあったので、このような間接セレクタをもっと有効に活用していこうと思っています！