今回はHTML、CSS、JavaScriptでタブ切り替え機能のデモを作成しました。
目次
タブ切り替えのメリット
タブ切り替えには下記のようなメリットがあります。
スペースの有効活用
タブはページ上の限られたスペースを有効に活用するのに役立ちます。複数のコンテンツセクションを同じ領域内で表示できるため、ページが混雑することなく情報を提示できます。
見た目の洗練
タブ切り替えは、モダンで洗練されたウェブデザインの要素と見なされます。クリーンで整理された外観は、プロフェッショナルな印象を与え、ユーザー体験を向上させます。
実際の表示
PR
ソースコード例
HTMLソースコード例
<div class="tab-container">
<div class="tab-buttons">
<button class="tab-button active" data-target="tab1">2024年</button>
<button class="tab-button" data-target="tab2">2023年</button>
<button class="tab-button" data-target="tab3">2022年</button>
</div>
<div class="tab-content active" id="tab1">
<div class="news__list">
<article class="news__item">
<a href="#">
<time datetime="2024-01-15">2024.01.15</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
<article class="news__item">
<a href="#">
<time datetime="2024-01-14">2024.01.14</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
<article class="news__item">
<a href="#">
<time datetime="2024-01-13">2024.01.13</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
</div>
</div>
<div class="tab-content" id="tab2">
<article class="news__item">
<a href="#">
<time datetime="2023-01-15">2023.01.15</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
<article class="news__item">
<a href="#">
<time datetime="2023-01-14">2023.01.14</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
<article class="news__item">
<a href="#">
<time datetime="2023-01-13">2023.01.13</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
<article class="news__item">
<a href="#">
<time datetime="2023-01-12">2023.01.12</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
<article class="news__item">
<a href="#">
<time datetime="2023-01-11">2023.01.11</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
</div>
<div class="tab-content" id="tab3">
<article class="news__item">
<a href="#">
<time datetime="2022-01-15">2022.01.15</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
<article class="news__item">
<a href="#">
<time datetime="2022-01-14">2022.01.14</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
<article class="news__item">
<a href="#">
<time datetime="2022-01-13">2022.01.13</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
<article class="news__item">
<a href="#">
<time datetime="2022-01-12">2022.01.12</time>
<p class="news__ttl">タイトルタイトル</p>
</a>
</article>
</div>
</div>CSSソースコード例
.tab-container {
margin: 40px 0;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.tab-buttons {
display: flex;
border-bottom: 1px solid #ddd;
}
.tab-button {
flex-grow: 1;
padding: 15px 20px;
text-align: center;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
font-size: 16px;
color: #333;
transition: all 0.3s;
}
.tab-button.active {
background-color: #007bff;
color: #fff;
border-radius: 10px 10px 0 0;
}
.tab-content {
display: none;
padding: 20px;
border-radius: 0 0 10px 10px;
}
.tab-content.active {
display: block;
}
.news__list {
list-style: none;
padding: 0;
}
.news__item {
background-color: #f9f9f9;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
border-bottom: 1px solid #ccc;
}
.news__item a {
text-decoration: none;
color: #333;
display: block;
}
.news__item time {
font-size: 14px;
color: #666;
}
.news__ttl {
margin-top: 5px;
font-size: 18px;
font-weight: bold;
}JavaScriptソースコード例
document.addEventListener('DOMContentLoaded', () => {
const buttons = document.querySelectorAll('.tab-button');
const contents = document.querySelectorAll('.tab-content');
buttons.forEach(button => {
button.addEventListener('click', () => {
const target = document.getElementById(button.dataset.target);
buttons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
contents.forEach(content => content.classList.remove('active'));
target.classList.add('active');
});
});
});まとめ
HTML、CSS、およびJavaScriptを駆使して、スタイリッシュなタブ切り替え機能を実装しました。ぜひこのコードを参考にして、あなたのウェブサイトなどに応用してみてください。
