最初から指定したタブが選択されたタブ切り替えを作る方法
最初から指定したタブが選択されたタブ切り替えを作る方法を紹介します。このサンプルでは、ページを開いた時点で2番目の「CSS」タブを選択状態にし、対応するコンテンツを最初から表示します。通常は先頭のタブを初期表示にすることが多いですが、重要な情報や優先して見せたい内容に合わせて、任意のタブを指定できます。
会員サイトの設定画面、管理画面の商品編集、ECサイトの商品詳細、サービス紹介ページなど、複数の情報をタブで整理する場面に利用できます。たとえば、利用者が最初に確認する可能性が高い設定項目や説明を指定しておくことで、目的の情報へ移動する手間を減らせます。表示後は各タブをクリックして、対応する内容へ自由に切り替えられます。
HTMLでは初期選択するタブへis-activeクラスとaria-selected="true"を設定し、対応するパネルにもis-activeクラスを付けます。CSSではタブの色、余白、角丸、文字サイズ、選択状態のデザインを調整でき、JavaScriptではクリックされたタブと表示パネルを切り替えます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ページを開いた時点で「CSS」タブが選択されています。
ページを開くと「CSS」タブが選択された状態で表示されます。各タブをクリックすると対応する説明へ切り替わります。
コードをコピーして使おう！
<!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="initial-selected-tab-switch_wrap">
<!-- タイトル -->
<div class="initial-selected-tab-switch_title">
指定したタブを最初から表示
</div>
<!-- 説明文 -->
<p class="initial-selected-tab-switch_text">
ページを開いた時点で「CSS」タブが選択されています。
</p>
<!-- タブ一覧 -->
<div
class="initial-selected-tab-switch_tabs"
role="tablist"
aria-label="使用技術">
<!-- HTMLタブ -->
<button
class="initial-selected-tab-switch_tab"
id="tab-html"
type="button"
role="tab"
aria-controls="panel-html"
aria-selected="false"
data-tab="html">
HTML
</button>
<!--
CSSタブを初期選択する
is-activeクラスとaria-selected="true"を付ける
-->
<button
class="initial-selected-tab-switch_tab is-active"
id="tab-css"
type="button"
role="tab"
aria-controls="panel-css"
aria-selected="true"
data-tab="css">
CSS
</button>
<!-- JavaScriptタブ -->
<button
class="initial-selected-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="initial-selected-tab-switch_panel"
id="panel-html"
role="tabpanel"
aria-labelledby="tab-html"
data-panel="html">
HTMLはWebページの構造を作るためのマークアップ言語です。
</div>
<!--
CSSパネルを初期表示する
is-activeクラスを付ける
-->
<div
class="initial-selected-tab-switch_panel is-active"
id="panel-css"
role="tabpanel"
aria-labelledby="tab-css"
data-panel="css">
CSSは文字色やレイアウトなど、見た目をデザインするために使います。
</div>
<!-- JavaScriptパネル -->
<div
class="initial-selected-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はタブ切り替え全体を構成するファイルです。タブ名、説明文、各タブ内に表示する内容を編集できます。また、最初に選択したいタブへis-activeクラスとaria-selected="true"を設定することで、初期表示するタブを変更できます。
style.cssはタブのデザインを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、文字サイズ、選択中のタブ色、コンテンツエリアのデザインなどを変更できます。
script.jsはタブをクリックしたときの切り替え処理を担当します。クリックしたタブだけを選択状態にし、対応するコンテンツのみ表示する処理を行います。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くと指定したタブが最初から選択された状態で表示され、別のタブをクリックすると対応するコンテンツへ切り替わります。
カスタマイズできる内容
index.htmlではタイトル、説明文、タブ名、各タブ内の表示内容を変更できます。また、初期表示したいタブへis-activeクラスとaria-selected="true"を設定し、不要になったタブから削除することで、最初に表示するタブを自由に変更できます。
style.cssでは全体の横幅、余白、背景色、文字色、枠線、角丸、タブの色、選択中の背景色、コンテンツエリアの余白などを用途に合わせて調整できます。
数値調整
style.css
max-width:700px;
タブ切り替え全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
min-height:52px;
タブボタンの最低高さです。値を大きくするとタブが高くなり、小さくすると低くなります。
padding:14px;
タブボタンの内側余白です。値を大きくするとタブが大きくなり、小さくするとコンパクトになります。
margin-left:6px;
タブ同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
padding:24px;
コンテンツエリアの内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
transition:0.3s;
タブの背景色と文字色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に応じて横幅が調整されます。また、640px以下では余白やタブサイズ、文字サイズを縮小することで、スマートフォン・タブレット・PCでも利用できます。
コメント