ホームページ作成/装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)

ページ移動せずに内容を変更するタブを作る方法

ページを移動することなくボックス内の表示内容を切り替えられる「タブ」機能の作成方法を解説。HTML・CSS・JavaScriptを使って、「タブ」をクリックすると一瞬で内容が変化する機能を作ります。狭い領域に沢山の情報を掲載したい場合などに便利です。

この記事の担当ガイド

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

  • このエントリーをはてなブックマークに追加

タブで内容を切り替えられる機能を作る

クリックした瞬間に表示内容が切り替わる「タブ」機能

クリックした瞬間に表示内容が切り替わる「タブ」機能

ページを移動することなく指定範囲の表示内容を切り替えられる「タブ」機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。右図のように、All Aboutのトップページや、Yahoo! Japanなど、様々なウェブサイトで使われています。

このようなタブ機能は、少量のHTML・CSS・JavaScriptソースを記述することで簡単に作れます。そこで今回は、ウェブページ上にタブ機能を作る方法をご紹介致します。


 

ページ移動することなく内容を切り替えられるタブ機能の例

今回は、以下のような感じのタブ機能を作ることを例として解説致します。

ページ移動することなく内容を切り替えられる「タブ」機能の例

ページ移動することなく内容を切り替えられる「タブ」機能の例


上図のページを実際にブラウザで表示確認できるよう、サンプルページを用意しています。実際にアクセスして、表示を確認してみて下さい。

サンプルページには、3つのタブ「更新履歴」・「オススメ」・「検索」があり、それぞれをクリックすると表示内容が切り替わります。シンプルなデザインなので、あまり「タブ」らしくは見えませんが、画像を使ったりCSSを工夫したりすればもっとタブらしく見せられます(その方法は別の機会にご紹介いたします)。

各タブで表示される内容は、その都度サーバから読み込まれるわけではなく、最初からHTML内に含まれています。そのため、表示の切り替えに時間はかかりません。なお、タブの切り替えにはJavaScriptを利用していますが、JavaScriptが利用できない環境では、すべてのタブの内容が並んで表示されます。タブとしては機能しませんが、中身が読めなくなることはありません。

それでは、上記のようなタブ機能を作る方法を順番に見ていきましょう。必要なHTMLを書き、装飾するCSSを書き、タブの切り替えを実現するJavaScriptを書けば完成します。最後に、コピー&ペーストで利用できるようソースのまとめも掲載していますので、ご活用下さい。

【この記事の目次】
1. タブの外側と中身のHTMLを書く (Page.2)
2. タブとして見えるようスタイルシートで装飾する (Page.3)
3. タブの切り替え機能を実現するJavaScriptを書く (Page.4)
4. タブ機能を作るソースのまとめ (Page.5)

更新日:2013年04月24日

(公開日:2008年08月02日)

あわせて読みたい

    この記事を読んで良かったですか?

    良かった

    18

    この記事を共有する