HTML/CSSだけで動くタブ切り替えの作り方
HTML/CSSだけで動くタブ切り替えを作成する方法を紹介します。JavaScriptを使用せず、ラジオボタンとCSSの:checkedを利用して表示内容を切り替えるため、シンプルな構成で実装できます。タブをクリックすると対応するコンテンツだけが表示されるため、コード例や説明文、FAQなどを見やすく整理したい場面に適しています。
このサンプルでは、「HTML」「CSS」「サンプル」の3つのタブを用意し、それぞれ異なる内容を表示します。ラジオボタンの選択状態を利用して表示・非表示を制御するため、追加のJavaScriptは必要ありません。タブ名や表示する文章はHTMLを書き換えるだけで変更でき、色や余白、角丸などのデザインはCSSから自由にカスタマイズできます。
お問い合わせページや商品紹介、マニュアル、会員サイト、管理画面など、限られたスペースで複数の情報を整理して表示したい場面で活用できます。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>HTML/CSSだけで動くタブ切り替え</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- タブ切り替え全体 -->
<div class="html-css-only-tab-switch_wrap">
<!-- タイトル -->
<div class="html-css-only-tab-switch_title">
HTML/CSSだけで動くタブ切り替え
</div>
<!-- 説明文 -->
<p class="html-css-only-tab-switch_text">
タブをクリックすると、JavaScriptを使わずに表示内容を切り替えられます。
</p>
<!-- タブの選択状態を管理するラジオボタン -->
<input
class="html-css-only-tab-switch_input"
type="radio"
name="html-css-only-tab-switch"
id="html-css-only-tab-switch_html"
checked>
<input
class="html-css-only-tab-switch_input"
type="radio"
name="html-css-only-tab-switch"
id="html-css-only-tab-switch_css">
<input
class="html-css-only-tab-switch_input"
type="radio"
name="html-css-only-tab-switch"
id="html-css-only-tab-switch_sample">
<!-- タブ一覧 -->
<div class="html-css-only-tab-switch_tabs">
<label
class="html-css-only-tab-switch_tab"
for="html-css-only-tab-switch_html">
HTML
</label>
<label
class="html-css-only-tab-switch_tab"
for="html-css-only-tab-switch_css">
CSS
</label>
<label
class="html-css-only-tab-switch_tab"
for="html-css-only-tab-switch_sample">
サンプル
</label>
</div>
<!-- 表示内容全体 -->
<div class="html-css-only-tab-switch_panels">
<!-- HTMLタブの内容 -->
<div class="html-css-only-tab-switch_panel html-css-only-tab-switch_panel-html">
HTMLでは、ラジオボタンとlabelを利用してタブを切り替える構造を作成します。
</div>
<!-- CSSタブの内容 -->
<div class="html-css-only-tab-switch_panel html-css-only-tab-switch_panel-css">
CSSの:checkedを利用して、選択されたタブだけを表示します。
</div>
<!-- サンプルタブの内容 -->
<div class="html-css-only-tab-switch_panel html-css-only-tab-switch_panel-sample">
JavaScriptを使用せず、HTMLとCSSだけでタブ切り替えを実現できます。
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではラジオボタンとlabelを利用してタブを切り替える構造を作成し、CSSでは選択されたラジオボタンの状態に応じて表示するタブとコンテンツを切り替えます。JavaScriptを使用せずに実装できるため、シンプルで軽量なタブ切り替えを作成したい場合に利用できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはタブ全体を構成するファイルです。タイトル、説明文、タブ名、各タブに表示する内容を変更できます。ラジオボタンとlabelを利用してタブの切り替えを行います。
style.cssはタブ全体のデザインを設定するファイルです。横幅、余白、背景色、文字色、枠線、角丸、選択中タブの色、コンテンツエリアのデザインなどを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。表示されたタブをクリックすると、それぞれに対応した内容へ切り替わります。
カスタマイズできる内容
index.htmlではタイトル、説明文、タブ名、各タブに表示する文章を変更できます。タブの数や表示内容も用途に合わせて追加・変更できます。
style.cssではタブ全体の横幅、背景色、余白、角丸、文字サイズ、タブの色、選択中タブの背景色、コンテンツエリアのデザインなどを変更できます。
数値調整
style.css
max-width:700px;
タブ全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
タブ全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
タブ全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
タブ全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin-bottom:24px;
説明文の下側余白です。値を大きくするとタブとの間隔が広がり、小さくすると狭くなります。
padding:14px;
タブの内側余白です。値を大きくするとクリックしやすい大きさになり、小さくするとコンパクトになります。
border-radius:12px 12px 0 0;
タブ上部の角丸です。値を変更するとタブの丸みが変わります。
padding:24px;
コンテンツエリアの内側余白です。値を大きくすると文章と枠線の間隔が広がり、小さくすると詰まった表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてタブ全体が縮小されます。また、640px以下では内側余白を調整することで、スマートフォン・タブレット・PCでも利用しやすいレイアウトになっています。
コメント