TIPS

2018.01.18
vol.86

WEB

簡単なタブ切り替え機能の実装

vol.86 簡単なタブ切り替え機能の実装

ページ遷移や、スクロールでの大きな操作がいらないタブ切り替えコンテンツ。
多くの情報を掲載する場合などに便利な機能で、Webページでよく見かけるかと思います。

使いやすいプラグインなどももちろんありますが
タブ切り替えは、CSSとJSの制御、もしくはCSSだけでも実装することが可能です。
今回は簡単なタブ切り替えの実装方法をデモ・サンプルコードと合わせてご紹介します。

基本の実装

CSSとJS、またCSSのみでタブ切り替え機能をそれぞれ実装していきます。

CSSでタブ切り替えの実装

panel1

panel2

panel3

CSSのみで実装する際、ラジオボタンでコンテンツ切り替えの制御をします。
ラジオボタンとタブ用の要素(サンプルではlabel)を連動させるため、
連動させる要素にfor属性でラジオボタンのidを指定します。

「~」結合子について
 同じ親要素を持つ兄弟要素を指定する際に使用します。
 弟要素(隣接した後ろの要素)のみを指定する「+」結合子とは違い、先に指定した要素より後ろにある兄弟要素であればスタイルを適用することができます。

またCSSのみでの実装では、タブが選択された際のデザインなどは個別指定しなければなりません。
タブ数が多いと記述が長くなってしまいますが、Sassを使用すれば繰り返し処理で簡単に指定することができます。

Sass @whileとインターポレーションを使用した繰り返し処理の記述

CSS、JSでタブ切り替えの実装

panel1

panel2

panel3

選択中のデザインはCSSを使用し、クラスの追加/削除をJSで制御します。
jQueryには toggleClass が存在しますが、jQuery3以降では非推奨タグとなっているため使用していません。

border-radiusを使ってデザインを変える

デザインやレイアウトをする際は様々なプロパティなどを組み合わせて実装するものですが、
今回は、ボックス要素のコーナーに角丸を指定するborder-radiusだけで十分リッチにみせる実装をご紹介します。

panel1

panel2

panel3

タブやコンテンツ部分の一部に角丸を指定し、少し柔らかい印象にしています。

panel1

panel2

panel3

borderとborder-radiusを組み合わせて手書きしたような枠線を表現しています。

panel1

panel2

panel3

選択中のタブが正円になるように指定し、切り替えコンテンツの角丸を大きくして可愛らしいデザインにしています。

アニメーションをつける

タブをクリックし、タブやコンテンツが切り替わる際のアニメーションを実装します。
簡単なアニメーションでも、動きが入っているだけで切り替わったタブや
コンテンツがわかりやすくなり、よりよく見せることができます。

コンテンツの中身がフェードで切り替わる

CSSでの実装

panel1

panel2

panel3

CSS、JSでの実装

panel1

panel2

panel3

JSで制御するCSSの記述

JSの記述

コンテンツが上からスライドして切り替わる

CSSでの実装

panel1

panel2

panel3

CSS、JSでの実装

panel3

panel2

panel1

JSで制御するCSSの記述

JSの記述

選択中のタブが浮いて吹き出しの形になる

CSSのみでの実装です

panel1

panel2

panel3

まとめ

いかがでしたか?
今回は簡単な実装を心がけ、比較的単純なデザインやアニメーションをご紹介しました。
便利なタブ切り替えの機能が簡単に実装できると思っていただけたのではないでしょうか。

CSS・JSにはまだ様々なプロパティや機能があるので
それらを駆使してより使いやすく、リッチなデザインのタブ切り替えコンテンツができたら良いと思います。

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2017
December (
November (
October (
September (
August (
July (
June (
May (
April (
February (
January (
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。