このページの本文へ

前へ 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. クラウドは地方を救うか?KDDIウェブら「Cloud ON OKINAWA」を立ち上げ 4
  2. GoogleやLINEみたいなSMS二要素認証をTwilioでサクッと実装してみよう 2
  3. 「使いやすい」と言われたい!WordPressの編集画面にメタボックスを追加する方法 2
  4. PHPはマルチスレッド化で爆速化できるか? pthreadsの使い方(基礎編) 2
  5. 【週末まとめ読み】レスポンシブをメディアクエリなしで実現する5つのCSSトリック 1
  6. 商業写真で首切りと串刺しがダメな理由 2324
  7. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  8. Sketch 3を使う3つの理由と10の魅力 633
  9. ボーナス支給日確定で新聞社を辞めた人に贈る本 551
  10. 5限目:「情報」を「コンテンツ」に変える 告知コピー制作メソッド 396
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング