こんにちは、制作担当のI.Sです。
今回は同じコンテンツ内の表示を切り替える、「タブ切り替え」の作成方法を記載します。
目次
1.実装例
2.解説
3.カスタマイズ
4.まとめ
1.実装例
See the Pen
B タブ切り替え by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
※右下の「Rerun」で何度も再生できます。
まず、おおまかに例をあげると上記のような感じです。
例えば各部署の一日のスケジュールや先輩の声など、よく見るようなコンテンツで使用されています。なので日の目を浴びる機会は多いと思います。
またちょっとしたメリットとして、同じコンテンツ内で切り替わるので、ページをスクロールする手間が減ります。
2.解説
それではCSSでどのように制御しているのか、解説していきます。
今回はinputタグを使用しています。
HTMLの記述
inputタグを使ってラジオボタンを作成します。（後にcssで非表示にします）
その後ボタン部分とそれぞれの回答を書き込んでいきます。
ボタンの装飾
こちらはボタンの装飾になります。
afterはボタンの下三角（▼）部分の記述になります。
最後に各タブをクリックしたときに、中身を表示させる記述を追加します。
「checked」というのは、簡単に言うと「ボタンをクリックしたとき」という意味になります。なので、クリックしたタイミングでdisplay:block;を付与して表示させるという流れになります。
3.カスタマイズ
こちらも今までと同様、動きさえわかればカスタマイズがしやすいものとなっています。
See the Pen
B タブ切り替え 2 by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
こちらは枠で囲んであるので、コンテンツとして見やすいと思います。
各部署の事業内容などを入れてみてもいいですね。
4.まとめ
実装例のところでも書きましたが、一つのコンテンツとして複数の情報を書き込めるので、ページを余分スクロールする手間が省けます。離席率にも関係してくる部分だと思うので、これからも活用していこうと思いました。
ではまた.
