こんにちは！
22新卒のゆたかといいます！

社員になってからまだ4ヶ月目ですがインターン期間が濃すぎてもう長年いるかのような感覚に陥っております笑

さて、今回ご紹介したいのは「CSSでタブ切り替えを実装する方法」です！

bravesoft主力商品であるeventosでは、イベント開催のためのページをオンライン上で実装することができる超便利システムですが、セキュリティの懸念によりJSが実装できません。。。

そんな制約の中、なんとかイベントページを賑やかにしたいと思い、CSSの限界に挑戦してタブ切り替え方法を確立しました！

  • テキストの色切り替え
  • タブ切り替え
  • ページ切り替え

 

テキストの色切り替え

タブ1、タブ2をクリックするとテキストの色が変わります。
これは、labelによりラジオボタンの状態を変え、間接セレクタ「~」により同階層の該当項目タグのテキスト色を変更しています。

 

タブ切り替え

理論はテキストの色切り替えと同じで、ラジオボタンの状態に合わせて要素の表示・非表示を切り替えています。

 

ページ切り替え

左右の矢印をクリックしてみてください。
やろうと思えばスクロールアニメーションも付けることができます！

transform: translateX(-250px);
と書いているのが特徴で、右矢印がチェック状態の場合の最終位置を250px左にずらした位置を指定することで実現しています。

 

まとめ

いかがでしたでしょうか。
このように、inputタグのチェック状態と間接セレクタを利用することで、HTMLとCSSだけでさまざまな動きを付けられます！

場合によってはJSよりもこの手法の方が実装が楽であったり、メンテナンス性がよくなったりすることもあるので状況に応じて使い分けてみてください！

Follow me!