はじめに
こんにちは！ご覧いただきありがとうございます。
作って学ぶWeb制作の初級編として今回はタブメニューをHTML・CSS・JavaScriptで実装していきます。
ページ遷移することなく画面の表示を切り替えることができ、限られたスペースで複数の情報を表示させたいときによく使われるUIですね。
操作のしやすさや、現在選択しているタブのわかりやすさなどのデザインも考慮して作っていきましょう。
では今回作るもののデモと仕様を確認していきます。
デモ
タブ1・タブ2・タブ3それぞれをクリックするとコンテンツが切り替わって表示されます。
※スマホの場合はクリック(タップ)で表示されます。
仕様
以下の仕様をもとに実装を進めていきます。
初期状態ではタブ１をアクティブ状態にしておく
現在選択されているタブのタイトル部分の色をわかりやすく変えて表示する
タブ選択ボタンにhoverしたときはカーソル形状を指差しの手に変える
タブ選択ボタンをクリックしたときに、表示するコンテンツを切り替える
今回もcss、jsファイルは外部ファイルとしてhtmlで読み込みます。
【実践】タブメニューを実装する
HTMLを準備する
まずはタブのメニュー部分と表示するコンテンツ部分をHTMLに記載していきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>タブメニューサンプル</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- start tabcontents --> <main> <h1>作って学ぶWeb制作 初級</h1> <p>タブ切替を作ってみましょう！！</p> <div class="tab-group"> <!--タブ--> <ul class="tab-button"> <li class="tab tab-01 is-active">タブ１</li> <li class="tab tab-02">タブ２</li> <li class="tab tab-03">タブ３</li> </ul> <!--タブを切り替えて表示するコンテンツ--> <div class="tab-contents"> <div class="content tab-01 is-display">今日はタブ切替を作ってみましょう！</div> <div class="content tab-02">限られたスペースの中で複数の情報を伝えることができますね。</div> <div class="content tab-03">WEBサイトでもよく使われるUIです。</div> </div> </div> </main> <!-- end tabcontents --> <script type="text/javascript" src="script.js"></script> </body> </html>
ソースコード ポイント解説
17~21行目の”tab-button”がタブを選択するボタン、24~28行目が”tab-contents”で実際に表示される中身のコンテンツ部分になります。
<ul class="tab-button">
<li class="tab tab-01 is-active">タブ１</li>
<li class="tab tab-02">タブ２</li>
<li class="tab tab-03">タブ３</li>
</ul>
<!--タブを切り替えて表示するコンテンツ-->
<div class="tab-contents">
<div class="content tab-01 is-display">今日はタブ切替を作ってみましょう！</div>
<div class="content tab-02">限られたスペースの中で複数の情報を伝えることができますね。</div>
<div class="content tab-03">WEBサイトでもよく使われるUIです。</div>
</div>
初期状態ではタブ１をアクティブ状態にしておきたいので、ボタンにはis-active、コンテンツにはis-displayのクラスを付与しておきます。
CSSでスタイルを追加する
.tab-group {
margin-top: 20px;
/* タブ全体の幅 */
width: 500px;
list-style: none;
text-align: center;
}
.tab-button {
display: flex;
justify-content: space-between;
list-style: none;
/* カーソル形状を指先にする */
cursor: pointer;
}
.tab-button .is-active {
background: #4bab80;
border: 2px solid #4bab80;
color: #FFF;
}
.tab {
width: calc(100% / 3);
border: 2px solid #ccebdc;
padding: 8px;
border-bottom: none;
}
.tab-contents {
border-top: none;
background: #ccebdc;
}
.content {
display: none;
padding: 8px;
text-align: left;
}
.content.is-display {
display: block;
border: 2px solid #4bab80;
height: 100px;
}
ソースコード ポイント解説
選択中のタブボタン部分に設定するis-activeクラスでは、背景色を緑に設定しています。
.tab-button .is-active {
background: #4bab80;
border: 2px solid #4bab80;
color: #FFF;
}
.content.is-display {
display: block;
border: 2px solid #4bab80;
height: 100px;
}
Javascriptでボタンクリック時にタブ切り替えできるようにする
document.addEventListener('DOMContentLoaded', function () {
const targets = document.getElementsByClassName('tab');
for (let i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', changeTab, false);
}
// タブメニューボタンをクリックすると実行
function changeTab() {
// タブのclassを変更
document.getElementsByClassName('is-active')[0].classList.remove('is-active');
this.classList.add('is-active');
// コンテンツのclassの値を変更
document.getElementsByClassName('is-display')[0].classList.remove('is-display');
const arrayTabs = Array.prototype.slice.call(targets);
const index = arrayTabs.indexOf(this);
document.getElementsByClassName('content')[index].classList.add('is-display');
};
}, false);
ソースコード ポイント解説
const targets = document.getElementsByClassName('tab');
for (let i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', changeTab, false);
}
上記部分ではタブメニュー(classにtabの値をもつ要素）が複数、今回は３つあるので、そのすべてに対してclickイベントを適用しています。
function changeTab() {
// タブのclassを変更
document.getElementsByClassName('is-active')[0].classList.remove('is-active');
this.classList.add('is-active');
// コンテンツのclassの値を変更
document.getElementsByClassName('is-display')[0].classList.remove('is-display');
const arrayTabs = Array.prototype.slice.call(targets);
const index = arrayTabs.indexOf(this);
document.getElementsByClassName('content')[index].classList.add('is-display');
};
上記が実際にタブが切り替わる部分の関数です。現在is-activeのクラスが付与されているタブに対し、is-activeの値を削除します。そして、クリックしたタブに対してis-activeを追加することで、選択されたタブボタンの色を変更しています。
また、コンテンツの表示切替は現在is-showのクラスが付与されている要素に対し、is-showの値を削除して非表示にしています。そして、クリックされたタブメニューのインデックス番号を取得し、その番号を使って指定した要素に対して、is-showを追加することで、クリックされたタブメニューボタンと同じインデックス番号のコンテンツが表示されます。
indexOf()… 配列から指定した要素の順番を取得するメソッド
まとめ
今回の作って学ぶWeb制作初級編ではタブメニューを実装してみました。
少ないスペースを活用してたくさんのコンテンツを表示できるので、情報量が多くなりそうなときにもきれいに見せることができますね。
デザインなどアレンジしてぜひ活用してみてください！
最後までお読みいただきありがとうございました。
