タブ切り替え候補

UI ＞ タブ切り替え

一覧

　状態:- 　閲覧数:2,112 　投稿日:2017-01-12 　更新日:2017-01-12
Tabs Modal
・「次へ」戻る」メニュー機能搭載
・デザインは良いが、レスポンシブ未対応

Transformer Tabs
・モバイル時にtoggleメニュー

Custom Ionic Tabs And Nested State Navigation
Ionic Tabs + Fake Tabs-Top (Facebook-like) togheter
・フッターにメニューアイコンを配置

Vertical Bootstrap Tabs
・左右選択可能な縦メニュー
・モバイル時にはハンバーガーメニュー対応も
・Bootstrap依存？

Horizontal Tab Menu
・レスポンシブ対応
・常に×印を表示する仕様
・あまり見たことがないタイプ
・これはこれで使いやすいかも

Material Design CSS Only Tabs
・普通のレスポンシブタブ

Responsive pure css tabs
・pure css
・モバイル時メニューはアイコンのみ表示

Pure CSS Tabs With Indicator
・pure css
・モバイル時メニューはアイコンのみ表示

Material Tabs
・モバイル時メニューはアイコンのみ表示

CSShrome
・ギミック感が凄い

Tabs animation.
・モバイルには良いかも

Material Expanding Overlay - Top-Aligned Tabs
・良い感じだが、縦長コンテンツの際、どう表示されるか要確認

調査日
・2017-01-12

40ページで終了
・疲れた
・キリがないので

1次選考

　閲覧数:614　投稿日:2017-01-12　更新日:2017-01-12
Transformer Tabs

Vertical Bootstrap Tabs
・Bootstrap依存
・bootstrap.min.js読込をコメントアウトしたら、正常動作しない
・落選

Horizontal Tab Menu
・面白いけれども、今回の用途では不要
・余計なアニメーションとかいらない
・大量テキストをバッと切り替えて読みたい
・落選

Material Design CSS Only Tabs
・<input type="radio">使用しているのが気持ちが悪い
・そこまでしてCSS実装にこだわりたくはない
・落選
・うーん、でもよく見たらメンテしやすそうだから次点

Responsive pure css tabs
・別に悪くはないけれども
・「Material Tabs」の方が良いと思ったので、落選

Pure CSS Tabs With Indicator
・SVG使用
・カスタマイズが面倒かな、と思ったので落選
※今回はテキストメインなので

Material Tabs
・display: flex;

Material Expanding Overlay - Top-Aligned Tabs
・縦長の場合、表示されないこともある
※スクロールバーは表示されない
・落選

2次選考

　閲覧数:668　投稿日:2017-01-12　更新日:2017-01-12
Transformer Tabs

Material Tabs

Material Design CSS Only Tabs



類似度ページランキング
順位 ページタイトル抜粋 ％
1 タブ切り替え候補 100
2 ボタン候補 46
3 モバイルデザイン10 ／ aタグ範囲｢切り替え」 31
4 小見出し候補 29
5 aタグで複数のブロック要素を囲むやり方 22
6 モバイル対応メニュー候補 20
7 モバイルデザイン7 ／ スマホ pc 広告 切り替え　bootstrap 18
8 リンクを新しいタブで開く／IE 17
9 画像補正 17
10 olタグ装飾しようとしたら、「レスポンシブ」と「広告」影響により挫折 14
11 ボタン候補2 ／ 「ボタン」エリア外で「テキスト」表示しても良いの？ 14
12 HTML5タグ 13
13 CSSセレクタ 13
14 親要素の横幅を越えたヘッダー／レスポンシブ対応 13
15 IEエミュレータ 13
16 trタグに背景色 13
17 HTMLエディタ 13
18 UIランキング。パーツ選択候補 ／ Topナビゲーション ／ Bottomナビゲーション ／ グリッド ／ 組積造 ／ コンテンツタブ切替 ／ テーブル ／ フォーム ／ ボタン 12
19 iframeタグ レスポンシブ対応 → うまくいかず 12
20 HTML5タグ再考 12
2026/4/27 12:59 更新
週間人気ページランキング ／ 4-20 → 4-26
順位 ページタイトル抜粋 アクセス数
1 Adobe Camera Raw 4.0 | Photoshop 20
2 Design 0 19
3 「Default User」を削除したら、既存ブックマークが削除されてしまった！ 16
3 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 16
4 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 10
5 Photoshop無料アクションファイル(atn)導入見送り | Photoshop 9
6 RGBの種類 ／ ビットカラー | RGB(色) 6
6 「.aiファイル」を下位バージョンで保存するための操作手順 ／ OS 上で「.aiファイル」から「作成したIllustratorバージョン」を確認する方法 ／ 下位バージョンのIllustratorで開く方法 6
6 Material Design 2014 年 | Material Design(色) 6
7 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 5
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
8 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
9 「position:fixed;」指定した要素を中央寄せするためには、「left:50%;transform:translateX(-50%);」を追記します。 | CSS 3
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
9 ログイン 3
10 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 2
10 「background-color」「background」の違い 2
10 擬似要素 (Pseudo-elements) ／ 擬似クラス (Pseudo-classes) 2
10 画像縦横比の問題 | 画像 2
2026/4/27 5:05 更新