ABOUT ME

wentertainment logo @Eiju Web Designer/Engineer
本サイトに掲載しているコードや画像は全てフリー素材として公開しております。私用商用問わず、ご自由にお使いください。
なお、本サイト内で紹介している外部のライブラリ等につきましては、提供元のサイトにて使用許諾等をご確認ください。
CSS関係

タブパネル・タブ切り替えを実現するコード(CSS-Only)

更新日:2023.2.13

See the Pen Untitled by Wentertainment (@wenterme) on CodePen.

  • CSSのみでタブ切り替え(タブパネル)を実現するコード。
  • ラジオボタンを用いてタブ切り替えボタンを実装し、擬似クラス「checked」を利用することで、コンテンツの切り替えを実現している。
  • ラジオボタンはデザイン上不要なため、非表示にして、タブ切り替えボタンはlabelタグにスタイルを適用することでデザインしている。
  • 各タブ内のコンテンツは、初期値で「display: none;」とし、非表示にしておく。
  • タブが選択された時に、対応するコンテンツを表示するため、「タブ切り替えボタン:checked ~ コンテンツ{ display: block; }」とすればOK!
  • CSSのみで実装しているので動きが非常に軽いのが良い。
  • HTMLのコードが若干見づらくなるのが玉に瑕😢
  • Vue.jsでタブ切り替え(タブパネル)を実装する方法はこちらのページで紹介しています。
  • フリー素材。ご自由にお使いください。
TOPページにもどる