このページの本文へ

前へ 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 次へ

ソーシャルランキング
  1. 全部知ってる?今後のサイト制作で押さえたいCSSの最新プロパティ9選 164
  2. これなら作れる!WordPressプラグイン開発に役立つ記事まとめ 62
  3. コンテンツマーケティングのセミナーに行く前に読んでおきたい記事8選 10
  4. 【週末まとめ読み】Google Fontsのぶっちぎりな進化に驚いた! 5
  5. 【週末まとめ読み】話題沸騰の新ブラウザー「Blisk」ってもう試した? 2
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1021
  10. 「シングルページ」流行の7つの理由と最新事例まとめ 705
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング