基本のタブ切り替えを作る方法
基本のタブ切り替えを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、クリックしたタブに対応するコンテンツだけを表示するシンプルなタブUIを実装します。HTML・CSS・JavaScriptの3つのタブを用意し、選択中のタブは青色で強調表示されます。
商品情報の切り替え、料金プランの比較、会員サイトの設定画面、管理画面の項目整理、FAQやサービス説明など、限られたスペースへ複数の内容をまとめたい場面で利用できます。ページを移動せずに表示内容を切り替えられるため、情報を見比べやすく、画面をすっきり整理できます。
タブ名や各パネルの文章はHTMLから変更でき、CSSでは全体の横幅、余白、背景色、枠線、角丸、選択中のタブ色などを調整できます。JavaScriptではクリックしたタブの識別情報を取得し、対応するパネルへ表示用クラスを付け替えます。画面幅が狭い場合はタブの文字サイズや余白を調整するため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
タブをクリックすると、対応するコンテンツへ切り替わります。
HTML・CSS・JavaScriptの各タブをクリックすると、対応する説明へ切り替わります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>基本のタブ切り替え</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- タブ切り替え全体 -->
<div class="basic-tab-switch_wrap">
<!-- タイトル -->
<div class="basic-tab-switch_title">
基本のタブ切り替え
</div>
<!-- 説明文 -->
<p class="basic-tab-switch_text">
タブをクリックすると、対応するコンテンツへ切り替わります。
</p>
<!-- タブ一覧 -->
<div
class="basic-tab-switch_tabs"
role="tablist"
aria-label="使用技術">
<!-- HTMLタブ -->
<button
class="basic-tab-switch_tab is-active"
id="tab-html"
type="button"
role="tab"
aria-controls="panel-html"
aria-selected="true"
data-tab="html">
HTML
</button>
<!-- CSSタブ -->
<button
class="basic-tab-switch_tab"
id="tab-css"
type="button"
role="tab"
aria-controls="panel-css"
aria-selected="false"
data-tab="css">
CSS
</button>
<!-- JavaScriptタブ -->
<button
class="basic-tab-switch_tab"
id="tab-js"
type="button"
role="tab"
aria-controls="panel-js"
aria-selected="false"
data-tab="js">
JavaScript
</button>
</div>
<!-- HTMLパネル -->
<div
class="basic-tab-switch_panel is-active"
id="panel-html"
role="tabpanel"
aria-labelledby="tab-html"
data-panel="html">
HTMLはWebページの構造を作るためのマークアップ言語です。
</div>
<!-- CSSパネル -->
<div
class="basic-tab-switch_panel"
id="panel-css"
role="tabpanel"
aria-labelledby="tab-css"
data-panel="css">
CSSは文字色やレイアウトなど、見た目をデザインするために使います。
</div>
<!-- JavaScriptパネル -->
<div
class="basic-tab-switch_panel"
id="panel-js"
role="tabpanel"
aria-labelledby="tab-js"
data-panel="js">
JavaScriptはクリック時の切り替えなど、動きを付けるために使います。
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではタブと表示するコンテンツを作成し、CSSではタブの見た目やレイアウト、JavaScriptではクリックしたタブに応じて表示するコンテンツを切り替える処理を行います。シンプルな構成なので、初心者でも各ファイルの役割を理解しながらカスタマイズしやすいサンプルです。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはタブボタンと各コンテンツを配置するファイルです。タブ名や表示する文章、コンテンツの数を変更できます。
style.cssはタブやコンテンツのデザインを設定するファイルです。背景色、文字色、余白、角丸、横幅、選択中のタブの色などを変更できます。
script.jsはタブをクリックしたときの切り替え処理を行うファイルです。クリックしたタブだけを選択状態にし、対応するコンテンツのみ表示します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたタブをクリックすると、それぞれ対応するコンテンツへ切り替わります。
カスタマイズできる内容
index.htmlではタブ名、表示するコンテンツ、タブの数を変更できます。HTML・CSS・JavaScript以外にも、お知らせ、料金表、プロフィール、FAQなど用途に合わせて自由に変更できます。
style.cssでは全体の横幅、背景色、文字色、余白、角丸、タブの色、選択中のデザイン、コンテンツの余白などを変更できます。用途に合わせてデザインを調整できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
min-height:52px;
タブボタンの高さです。値を大きくすると押しやすくなり、小さくするとコンパクトになります。
padding:14px;
タブボタンの内側余白です。値を大きくするとボタン全体が大きくなります。
margin-left:6px;
タブ同士の間隔です。値を大きくすると間隔が広がり、小さくすると近付きます。
padding:24px;
コンテンツエリアの内側余白です。値を大きくすると文字との余白が広がります。
transition:0.3s;
タブの色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって画面幅に応じて縮小表示されます。また、640px以下では余白や文字サイズ、ボタンサイズを調整しているため、スマートフォン・タブレット・PCで快適に利用できます。
コメント