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

ページ移動せずに内容を変更するタブ機能の作り方

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

この記事の担当ガイド

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

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

タブを操作して表示内容を切り替えられる機能の作り方

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

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

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

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


 

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

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

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

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


上図のページを実際にブラウザで表示確認できるよう、サンプルページを用意しています。お使いのブラウザでアクセスして、表示と動作を確認してみて下さい。このサンプルページには、3つのタブ「更新履歴」(青)・「オススメ」(黄)・「検索」(赤)があり、それぞれをクリックすると、(ページ移動することなく)その場で表示内容が切り替わります。

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

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

※本記事は、2013年4月24日に第2版を公開し、2015年1月に改訂したものです。記事中の一部の画像や画面イメージは、2013年4月時点のものです。

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

更新日:2015年01月09日

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

あわせて読みたい

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

    良かった

    25

    この記事を共有する