本サイトに掲載しているコードや画像は全てフリー素材として公開しております。私用商用問わず、ご自由にお使いください。
なお、本サイト内で紹介している外部のライブラリ等につきましては、提供元のサイトにて使用許諾等をご確認ください。
なお、本サイト内で紹介している外部のライブラリ等につきましては、提供元のサイトにて使用許諾等をご確認ください。
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でタブ切り替え(タブパネル)を実装する方法はこちらのページで紹介しています。
- フリー素材。ご自由にお使いください。