このページの本文へ

前へ 1 2 次へ

シンプル・便利な「jQuery UI Tabs」を使ってみよう

長~いページもスッキリ!jQueryでタブ表示

2009年02月04日 08時00分更新

藤本 壱

  • この記事をはてなブックマークに追加
  • 本文印刷

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

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 UIはjQueryをベースに動作しますので、jQuery本体も別途ダウンロードしておきましょう。


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

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

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

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

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

前へ 1 2 次へ

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング