タブ切り替えをおしゃれにする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.
流行りのスライドショータイプのタブ切り替えの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スニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。