1つのWebページに多くの情報を載せようとすると、縦に長くなって見づらくなってしまいます。そのようなWebページを整理するには、ページをいくつかのタブに分けるのが1つの方法です。今回は、jQuery UIの「Tabs」というウィジェットを使って、ページをタブに分ける方法を紹介します。

タブを使ったページの例。これなら長いページもスッキリおさまる

Tabsをダウンロードしてみよう

　jQueryには、ユーザーインターフェース関連の基本的なライブラリを集めた「UI」（User Interface）があります。その中の1つに「Tabs」というウィジェットがあります。Tabsは、Webページを複数のタブに分割して、切り替えられるようにするものです。

　jQuery UI Tabsを使うには、まずこのJavaScriptファイルをダウンロードします。ダウンロードページに接続すると、ダウンロードするモジュールを選ぶページが表示されますので、「UI Core」と「Tabs」のチェックをオンにしてダウンロードします（下の画面を参照）。その際に、JavaScriptのコードを圧縮してサイズを小さくすることもできます。

jQuery UIのダウンロードページ

　なお、jQuery UIはjQueryをベースに動作しますので、jQuery本体も別途ダウンロードしておきましょう。

続いてテーマのダウンロード

　jQuery UIは、スタイルシートや画像と組み合わせて使います。jQuery UIのサイトには「ThemeRoller」というページがあり、スタイルシートを自動的に作ることができます。

　Tabsのタブのデザイン（テーマ）も、Theme Rollerで作成できます。あらかじめ用意されているスタイルから選んだり、Theme RollerのWebページでデザインをカスタマイズすることができます。

jQuery UIのテーマを選んだりカスタマイズができる「Theme Roller」

　テーマのファイルのダウンロードが終わったら、jQuery本体／jQuery UI Tabs／テーマのCSSファイルと、CSSで使う画像のフォルダを、1つのフォルダにまとめましょう。

ツイートする

この記事の編集者は以下の記事をオススメしています

• これは便利だ！Excel→Table化するjQueryプラグイン

• JavaScriptで飛び出すWebページへ！

• jQueryで作る“Amazon風”インターフェイス

• 【短期集中連載】この冬作ろう！jQueryプラグイン講座

• たった6行でWebサイトのUIをガラッと変える

• JavaScriptライブラリで作るリッチUI（まとめ）

• はてブの評判が丸分かり！ APIを使ってみよう

• 10分でできるMovable Typeケータイ対応法

• 懐かしの“マーキー”をjQueryでちょいオシャレに！

• 面倒な処理を1行に！WordPressのショートコードAPI

• jQueryアニメ＆エフェクト合わせ技で画像を拡大

• Excel不要！URLでグラフが作れる！

• JavaScriptでびゅんびゅんスライド！ページ切換法

• 便利！WordPressショートコードプラグイン3選

• あのFlashサイトのUIをjQueryで作る

• 技術系サイトに必需品！ ソースコードは鮮やかに

• MT最新版で作る、Twitter風ミニブログ

• Yahoo！の流れるパネルをJSライブラリで再現

• jQueryでエクスプローラ風メニューに！

• jQueryで作るAmazon流リキッドレイアウト

• Google Feed APIで3分マッシュアップ

• 意外性が心地よいJSメニューのWebデザイン

• JavaScriptだけで表＜table＞を並び替え！

• Amazonと楽天のアフィリエイトを効率化するjQuery技

• WordPressがTwitterふうのライフストリームに！

• jQueryでクールなくるくるウィジェットを作ろう

• jQueryプラグインで世界に1つの右クリックメニュー

• JSONP＋jQueryで楽天アフィリエイトを攻略！

• 3分でできるJS＋CSS「角丸」テクニック

• 英国の映像作家も使うJS製LavaLampメニュー

• HTML5先取り！CanvasならFlash不要で絵が描ける

• Googleマップ＋jQueryで作るAjaxなデザイン

• ブログの新着をまとめて表示！Pipes活用法

• 手軽になった！Google Maps API V3

• jQuery UIでiGoogleふうメニューを作ろう！

• WordPress 2.8登場！新ウィジェットAPIの使い方

• JavaScriptで画像付きツールチップをカスタマイズ！

• jQueryで見栄えのいいグラフが描ける「jqPlot」

• 海外で流行中のダイアログ表示をjQuery UIで

はてブ注目ランキング

1. 50代でも分かったHTML5の基礎知識727 users

2. 10分でわかる！ jQuery Mobileのキホン94 users

3. iBooks AuthorでHTML5の電子書籍作ってみた76 users

4. HTML5要素のブラウザー実装状況を調べてみた38 users

5. 本店と楽天を使い分け、ブランディングを強化23 users

6. 40分で覚える！jQuery速習講座2209 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2135 users

8. もう配色には困らない！「Adobe Kuler」1681 users

9. 30分でできる！Webサイトを高速化する6大原則1495 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1214 users

最新記事

• 音楽は「クックパッド」になっていく

  

• 人気のタブレット対応フレキシブルアームがスマホにも対応

  

• 「GALAXY S II」より安い！　韓国版「GALAXY S II LTE」

  

• GALAXY TabにSDカードとUSB機器を接続できるアダプター

  

• AntecのPLATINUM電源は、回路やファンもプラチナ級！