タブ切り替えをおしゃれにするCSS/JSスニペット16選。通常型もスライドショー型も縦型も。
フォームのデザインをかっこよくするタブ(tab)切り替えのCSS/JSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。
入力項目が多いけどスクロールは避けたい場合、タブ切り替え機能をhtml/CSS/Javascript/jQueryなどで実装することも多いと思います。本記事ではフォームの中でも「タブ切り替え」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
シンプルで押しやすい見た目・動作のタブ切り替えCSSデザイン例。
基本形とも言えるシンプルタブ切り替え。縦型・横型の2パターン。
See the Pen
Bootstrap Tab Group by Stefan Rusu (@stephanrusu)
on CodePen.
最もシンプルな形式でJSを使わずCSSのみで表現しているタブ切り替えサンプルです。縦型・横型の2パターンがあって、使う場所によって使い分けができそうですね。
タブ切り替えをリッチなアニメーション表現にしようとするとJSで書かないといけないケースが多いですが、機能性を重視しシンプルに済ませたい場合はこれで充分ではないかと思います。
シンプルで押しやすい見た目・動作のタブ切り替えCSSデザイン例。
See the Pen
Active Tab Background Color to Look Like File Folder – Bootstrap 4 by Jacob Lett (@JacobLett)
on CodePen.
こちらも非常にシンプルなデザインのタブ切り替えデザインサンプルです。JSは使っていますが。
シンプルなボックスタイプのタブ切り替え。<>ボタンも付いて機能性も高い。JS不要。
See the Pen
Tabs – CSS Only (JS optional) by ekrof (@ekrof)
on CodePen.
こちらはCSS Onlyのタブデザインです。ボックスの中のタブをクリックすると、内容が切り替わります。また、下に矢印も付いていて、クリックするとタブを順次表示してくれます。
コンパクトな場所にタブ表示したい場合に最適です！
各タブの文字内容がスライド表示されるタブ切り替えデザイン。
See the Pen
Slide Transitions Between Bootstrap Tabs Using CSS3 & jQuery by Mike Doubintchik (@allurewebsolutions)
on CodePen.
タブのデザイン自体は非常にシンプルですが、各タブをクリックすると、タブの内容が右から左にスライド表示されます。
タブの下の太線が移動することでタブ移動を表現しているサンプル。
See the Pen
Multiple tabs w/ lava lamp by Mohammad Hamza Dhamiya (@hamzadhamiya)
on CodePen.
タブをクリックすると、タブ自体には変化がないですが、タブの下の黒い太線が移動することでタブ切り替えを表現しています。各タブの内容もディレイ表示されてキレイです。
非常にスタイリッシュなタブ切り替えサンプルです。JSも使っていますが非常にシンプルですので、実際に真似して実装しやすいデザインでしょう。
色分けされて見やすいタブ切り替え。タブの入れ子も考慮されているデザインで美しい。
See the Pen
WCAG ARIA accessible tab navigation by mike foskett (@2kool2)
on CodePen.
非常に美しいタブ切り替えのデザインです。色分けされており、現在選択しているタブが識別できるようになっています。さらにSection Cを開くと、色の濃淡で入れ子タブも切り替えもおこなっており、デザインとしてキレイにまとまっているCSSサンプルです。
流行りのスライドショータイプのタブ切り替えのCSSデザイン例。
タブ切り替え時にスライドアニメーションで変化。JSの内容もシンプルでGOOD!
See the Pen
Tabs with slide animation by francisco antonio (@sianuro)
on CodePen.
デザイン自体はシンプルなタブ切り替えですが、タブをクリックするとスライドしながらタブの内容を切り替えるようになっています。
タブ切り替えはCSSのみでは難しくJavascriptやjQueryを使っているサンプルが多いですが、このサンプルはCSSもJSもシンプルで分かりやすいですね。JSではスライドアニメーションの制御だけをやっているのみです。
スライドショータブ切り替えのサンプル。
See the Pen
Sliding Multiple Tabs with Arrow navigation by Mohammad Hamza Dhamiya (@hamzadhamiya)
on CodePen.
こちらもスライドショータイプのタブ切り替えですが、タブの中ほどにマークが出てくるようになっています。隅のタブをクリックした際の動きも考慮されていて良いですね。
ハイクオリティなスライドショータブ。下線移動＋波紋などの演出も美しい。
See the Pen
Dynamic Tabs by olegweb (@olegweb)
on CodePen.
これは非常にハイクオリティです。
タブクリックでスライドショー移動しますが、前述したサンプルにあった下線の太線移動も取り入れています。また、タブをクリックした位置に波紋が出るようになっています。
動きも見た目も素晴らしい！
縦型のタブ切り替えのCSSデザイン例。
シンプルな縦型のタブ切り替えサンプル。
See the Pen
Simple Vertical Tab Navigation by Luis Leguisamo (@luisleguisamo)
on CodePen.
タブと言えば上に付いているイメージの人が多いかと思いますが、このデザインサンプルは縦型のタブデザインになります。シンプルですがレスポンシブになっていますし素晴らしいと思います。
可愛い縦スタイルのタブボックス。横幅に応じて縦型に変化。
See the Pen
Vanilla JavaScript Tabbed Content by Beth Elwell (@bethelwell)
on CodePen.
こちらも非常に可愛いコンパクトな縦型タブですが、実は横幅を狭くしていくと横型に変化するんです。非常に面白いデザインですね。
限られたスペースに情報を出したいときに良さそうです。
えっ？コレってタブなのかい？個性豊かな見た目の奇抜CSSデザイン例。
タブがラジオボタンのようなデザイン。タブの内容はカード内に表示される。
See the Pen
mobile navigation concept by Tobias Glaus (@tobiasglaus)
on CodePen.
ラジオボタンかアイコンのようなタブをクリックすると、区切られたカード内に内容がふわっと現れる感じでカッコイイですね。
奇抜な見た目のタブ切り替えデザインですが、非常にスタイリッシュで真似したくなるデザインです。
タブの中身がプニプニ動く…！？。
See the Pen
Animated Tab by jamesreegan (@jamesreegan)
on CodePen.
タブをクリックすると、タブの内容がフェードしながら形を変えて変化します。何だかスライムみたいなのがプニプニ動いてるみたい笑
タブの中身がパカパカ開く…！？。
See the Pen
Tabs that switch by Harsh Pandey (@geekidharsh)
on CodePen.
こっちはタブの内容が回転しているような感じでパカパカ動きます。
コロコロ回るキューブ型タブ。これでCSS Onlyなデザインサンプル。
See the Pen
Pure CSS Tabbed Interface with 3D Cube by vavik (@vavik96)
on CodePen.
実装・ソースコード的には非常にシンプルなんですけど、キューブ・サイコロがコロコロ回るような感じでタブの内容が切り替わります。非常に楽しいデザインサンプルですね。
タブのクリック時のタブ内容にフォーカスする動作をするCSSサンプル。
See the Pen
Tab by Vineeth.TR (@vineethtr)
on CodePen.
最初何が起こったのかよくわからないような動作に見えますが、タブをクリックした後にタブ内容の部分にスクロールがフォーカスする動きになってます。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
