もくじ

JavaScript・PHP不要!HTMLとCSSのみでタブ切り替えを実装する方法

ハウツー
蛙のicon

こんにちは、蛙です。
ブログのトップページに記事カテゴリごとのタブを設置したり、サイドメニューのランキング表示にタブを使うなど、個人・企業問わずタブ切り替えを積極的に取り入れているサイトをよく目にしますよね。 そんなタブ切り替えですが、使ってみたいけどなんだか難しそう…と実装を諦めていませんか?
今回はJavaScriptを使わず、HTMLとCSSだけで簡単にタブ切り替えを実装する方法をご紹介いたします。 もちろんJavaScriptで作った方が凝った動きをつけやすいなどのメリットはあるのですが、HTML・CSSだけでも機能的には十分なものを作ることができます。 JavaScriptが使えずタブの実装を諦めていた人は、ぜひこちらの方法を試してみてください。

タブ切り替えの実装方法

早速ですが、完成したタブの見本をお見せします。 HTML・CSSの記述については後で詳しく説明しますので、今はとりあえずResultで動作チェックだけしてもらえればOKです。

HTML

<div class="tab"> <input id="tab-1" type="radio" name="tab" checked> <label for="tab-1">哺乳類</label> <input id="tab-2" type="radio" name="tab"> <label for="tab-2">爬虫類</label> <input id="tab-3" type="radio" name="tab"> <label for="tab-3">両生類</label> <div class="content-1"> <ul> <li>イヌ</li> <li>ネコ</li> <li>ネズミ</li> <li>ウサギ</li> </ul> </div> <div class="content-2"> <ul> <li>トカゲ</li> <li>ヘビ</li> <li>カメ</li> </ul> </div> <div class="content-3"> <ul> <li>カエル</li> <li>イモリ</li> </ul> </div> </div>
スタイルを作りやすいように、まずは全体を<div>で囲んでクラス名をつけておきましょう。
タブ部分は<input>タグと<label>タグを使って作っていきます。 1つのタブだけ選択できるようにしたいので、<input>にはtype="radio"を指定します。 <input>idとそれに対応する<label>for属性は必ず合わせておいてください。
タブの準備ができたら、その下にコンテンツとなる部分を入れていきます。 コンテンツの外側は<div>で囲い、クラス名をつけることでCSSで表示・非表示の制御ができるようにしておきます。
コンテンツの中身は今回はリストを入れていますが、テキストを直書きしても構いませんし、<div><p><span>などのタグでもOKです。 画像や表なども入れられますよ!

CSS

.tab { /* 横幅を設定 */ width: 100%; /* デフォルトだとタブとタブの間に妙な隙間ができてしまうので、 フォントサイズを0にすることでそれを回避 */ font-size: 0; margin: 0 auto; } /* タブの基本スタイル */ .tab label { display: inline-block; width: 80px; font-size: 16px; padding: 8px 0; text-align: center; cursor: pointer; margin-right: 4px; /* 非選択時のタブのスタイル */ background: #ddd; color: #444; } /* ホバーアクション */ .tab label:hover { background: #ccc; } /* 選択時のタブのスタイル */ .tab input:checked + label { background: #444; color: #fff; } /* ラジオボタンを消す */ .tab input { display: none; } /* コンテンツのスタイル */ .content-1, .content-2, .content-3 { font-size: 16px; color: #444; padding: 16px; border: 1px solid #444; /* コンテンツを一旦すべて非表示にする */ display: none; } /* 選択中のコンテンツだけ表示 */ #tab-1:checked ~ .content-1, #tab-2:checked ~ .content-2, #tab-3:checked ~ .content-3 { display: block; }
重要な部分はコメントアウトしているので、参考にしながらお好みで調整してみてください。 タブを角丸にしたり、吹き出しっぽくしてもおしゃれだと思います。

まとめ

HTML・CSSだけでもいい感じのタブ切り替えを作ることができました! タブって一見すると実装が難しそうで躊躇してしまいがちですが、きちんとパーツを分けて組み立ててみると意外とシンプルですよね。
一応初心者向けということで作ってみましたが、JavaScriptを使っておらず軽量なので、サイトの表示速度が気になる人にもおすすめです。
タブとコンテンツは追記することでいくつでも増やすことができますし、スタイルも付けやすいので、色々と試してみてください!
蛙のicon
ひょんなことからIT業界に迷い込んだ1匹のカエル。知識ゼロからのスタートで四苦八苦。特にJavaScriptが怖い…。