【HTML,CSS,JavaScript】簡単なタブを作成する方法
ここでは、シンプルなタブを作成する方法を解説します。
タブの作成は、既にWebサイトを準備していれば5分程度で終わるかと思います。
こういった方へ向けた記事です ①タブを追加する方法を知りたい ②タブを追加する方法の一例を知りたい ③タブを初めて作成しようとしている
目次 1.タブ完成イメージ 2.タブ作成方法
1.タブ完成イメージ



2.タブ作成方法
下記を参考にしてください。大事な箇所は赤い文字にしてあります。(※スマホだと赤くなっていないかもしれませんのでPC推奨)
HTML(ndex.html)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Tab Menu</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <ul class="menu"> <li><a href="#" class="active" data-id="tab1">タブ1</a></li> <li><a href="#" data-id="tab2">タブ2</a></li> <li><a href="#" data-id="tab3">タブ3</a></li> </ul> <section class="content active" id="tab1"> カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。 </section> <section class="content" id="tab2"> カシムラはプログラマ。カシムラはプログラマ。カシムラはプログラマ。 </section> <section class="content" id="tab3"> カシムラはエンジニア。カシムラはエンジニア。カシムラはエンジニア。カシムラはエンジニア。 </section> </div> <script src="js/main.js"></script> </body> </html>
CSS(styles.css)
body { font-size: 14px; } .container { margin: 30px auto; width: 500px; } .menu { list-style: none; padding: 0; margin: 0; display: flex; } .menu li a { display: inline-block; width: 100px; text-align: center; padding: 8px 0; color:#333; text-decoration: none; border-radius: 4px 4px 0 0; } /* クリックしたタブを紐付くcontentの背景色 */ .menu li a.active { background: #333; color: #fff; } /* ふわっと */ .menu li a:not(.active):hover { opacity: 0.5; transition: opacity 0.4s; } .content.active { background: #333; color: #fff; min-height: 150px; padding: 12px; display: block; } .content { display: none; }
JavaScript(main.js)
'use strict';
{
const menuItems = document.querySelectorAll('.menu li a');
const contents = document.querySelectorAll('.content');
menuItems.forEach(clickedItem => {
clickedItem.addEventListener('click', e => {
e.preventDefault();
menuItems.forEach(item => {
item.classList.remove('active');
});
clickedItem.classList.add('active');
contents.forEach(content => {
content.classList.remove('active');
});
document.getElementById(clickedItem.dataset.id).classList.add('active');
});
});
}
誰かの参考になれば幸いです。