HTMLでタブ切り替え機能を実装したホームページの作成
タブ切り替えは、1つのページ上に複数のコンテンツを効率的に表示するために使用される便利なUI要素です。
これを使うと、ユーザーはクリックで複数のセクションを表示・非表示でき、ページが長くなりすぎるのを防ぎます。
この機能はHTML、CSS、JavaScriptを使って簡単に実装できます。
以下に、タブ切り替え機能を持つホームページを作成する基本的な手順を紹介します。
1. 基本的なHTML構造
まずは、タブのボタンとタブの内容を定義します。
<div>タグを使ってタブのコンテンツを分け、<button>タグでタブの切り替えを行います。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>タブ切り替え機能</title>
<style>
/* 基本のスタイル */
.tab-content {
display: none; /* 最初は非表示 */
padding: 20px;
border: 1px solid #ddd;
margin-top: 10px;
}
.active {
display: block; /* アクティブなタブだけ表示 */
}
.tab-buttons button {
padding: 10px 20px;
margin-right: 5px;
cursor: pointer;
border: none;
background-color: #eee;
font-size: 16px;
}
.tab-buttons button.active {
background-color: #ddd;
font-weight: bold;
}
</style>
</head>
<body>
<h1>タブ切り替えのデモ</h1>
<!— タブのボタン —>
<div class=”tab-buttons”>
<button class=”active” onclick=”openTab(event, ‘tab1’)”>タブ1</button>
<button onclick=”openTab(event, ‘tab2’)”>タブ2</button>
<button onclick=”openTab(event, ‘tab3’)”>タブ3</button>
</div>
<!— タブのコンテンツ —>
<div id=”tab1″ class=”tab-content active”>
<h2>タブ1の内容</h2>
<p>こちらはタブ1のコンテンツです。</p>
</div>
<div id=”tab2″ class=”tab-content”>
<h2>タブ2の内容</h2>
<p>こちらはタブ2のコンテンツです。</p>
</div>
<div id=”tab3″ class=”tab-content”>
<h2>タブ3の内容</h2>
<p>こちらはタブ3のコンテンツです。</p>
</div>
<script>
function openTab(event, tabId) {
// すべてのタブコンテンツを非表示にする
var tabContents = document.getElementsByClassName(‘tab-content’);
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove(‘active’);
}
// すべてのタブボタンのアクティブ状態を解除
var tabButtons = document.getElementsByClassName(‘tab-buttons’)[0].getElementsByTagName(‘button’);
for (var i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove(‘active’);
}
// クリックされたタブの内容を表示し、ボタンをアクティブにする
document.getElementById(tabId).classList.add(‘active’);
event.currentTarget.classList.add(‘active’);
}
</script>
</body>
</html>
2. コードの説明
• HTML部分
タブのボタン (<button>) を3つ作成し、それぞれ異なるタブのコンテンツに対応させています。ボタンをクリックすると、対応するコンテンツが表示されます。
• CSS部分
.tab-content クラスでは、最初にタブのコンテンツをすべて非表示 (display: none) に設定し、active クラスが付与されたときにのみ表示 (display: block) されるようにしています。
また、ボタンのスタイルも設定し、選択されたタブにactive クラスを追加することで強調表示しています。
• JavaScript部分
openTab() 関数は、タブボタンをクリックしたときに呼び出され、現在表示されているタブを非表示にし、クリックされたタブの内容を表示する役割を果たしています。
すべてのタブのactiveクラスを外し、クリックされたタブとそのボタンにactiveクラスを追加することで、表示と非表示の切り替えを実現しています。
3. 使い方と動作確認
このコードをHTMLファイルとして保存し、ブラウザで開くと、タブ切り替え機能を持つページが表示されます。
• ページには3つのボタン（タブ）が表示され、最初は「タブ1」がアクティブになっています。
• 「タブ2」や「タブ3」をクリックすると、それぞれのコンテンツが表示され、前のタブの内容は非表示になります。
この仕組みを使うと、ホームページ上でユーザーが複数のセクションを簡単に切り替えられるタブ付きのページを作成することが可能です。
まとめ
タブ切り替え機能は、ホームページ上で複数のコンテンツを効率的に表示するための便利なUI要素です。
この機能を利用することで、ページの見た目をスッキリさせ、ユーザーにとって直感的に使いやすいインターフェースを提供できます。
本記事では、HTML、CSS、JavaScriptを使った基本的なタブ切り替え機能の実装方法を紹介しました。
基本の構造を理解することで、さらにアニメーションや動的なコンテンツ表示を追加したり、レスポンシブデザインに対応させたりすることも可能です。
タブ切り替えは、見やすさと操作性を高める重要な要素として、さまざまなウェブサイトに応用できる機能です。
ぜひ、自分のサイトにも導入して、ユーザーに快適な体験を提供してみてください。
✨【3名様限定キャンペーン】無料ブログ記事作成サービス開始！✨
🌟 miraizがお届けする特別キャンペーン🌟
無料でSEOのプロがブログ記事を一本ライティングします✨
SEO対策にも強い、質の高い記事をお届けします‼️
miraizのブログサービスは、
🚀 速い納品、高い品質
SEO対策済みの高品質な記事をスピーディーに納品。
ブログの更新頻度を上げたい方、SEO対策に伴う大量の記事が必要な方、100記事作成するのにもぴったりです❗️
大量発注にも対応し、品質は常にトップクラスを保証。
⏫検索上位表示対策済みの記事制作
ユーザーが何を求めているか徹底分析し、それに応える情報をライティング。
SEOの専門知識を駆使して、あなたの記事がGoogleなどの検索エンジンで
上位に表示されるように作成いたします✨
📸画像制作もサポート
文章だけでなく、ご希望があれば必要な画像も全て作成します。
- 本キャンペーン終了後、ご契約を締結する義務は一切ございません⭕️
- 本キャンペーン終了後の追加営業は一切行わないことをお約束します🙏
- 万が一、本キャンペーン終了後、ご契約されない場合でも、預かりした情報は責任をもって破棄いたしますので安心してお申し込みできます✨
また、他社のサービスにご満足いただけなかった方も、ぜひ一度miraizへご相談ください。
👉申し込みは今すぐ！この機会をお見逃しなく！
