CSSだけでタブ切り替えを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSだけでタブ切り替えを実装する方法について解説しています。jQueryやJavaScriptを使わずにタブの切り替えをする際には疑似クラス :checkedを使用します。実装の手順と画面上での見え方を確認しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

CSSだけでタブ切り替えを実装する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

CSSだけで動きのある部品を作る基本テクニックなので、ぜひマスターしてください。JavaScriptが苦手なWebデザイナーさんや、脱jQueryを目指しているコーダーさんにおススメです。

 

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSだけでタブ切り替えを実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

目次

 

タブの切り替えとは

タブ切り替えとは、こんな部品のこと。

See the Pen
Tab only CSS fin
by TAKAYOSHI (@lspuwbkv)
on CodePen.

従来は、タブ切り替えのような動きのある部品はCSSだけで作ることはできず、jQueryやJavaScriptで実装するのが一般的でした。

しかし、CSS3の新機能がほとんどのブラウザで動作するようになったため、タブ切り替えもCSSだけで実装できるようになったのです。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

タブ切り替えのHTMLを解説

まずは複数の項目から一つだけを選択できるボタン、通称ラジオボタンを作ります。

<!-- タブメニュー A -->
<input type="radio" name="tab_item" id="tab_radio_A" class="tab_radio" checked>

<!-- タブメニュー B -->
<input type="radio" name="tab_item" id="tab_radio_B" class="tab_radio">

<!-- タブメニュー C -->
<input type="radio" name="tab_item" id="tab_radio_C" class="tab_radio">


inputタグに、このような属性をつけていきます。

属性名 解説
type radio ラジオボタンになります。
name tab_item nameが同じタグで、一つのラジオボタンを構成します。

どれかを選択すると、それ以外の項目が選択解除されます。

id tab_radio_A

tab_radio_B

tab_radio_C

各input要素固有のID。

ラジオボタン選択のためのクリック領域を作ったり、

選択されたコンテンツを表示する処理に使います。

class tab_radio 基本スタイルを指定するために使用します。
checked 初期表示で選択されている項目を指定します。

 

次に、各inputタグの下にlabelタグを配置し、選択のためのクリック領域を作ります。

<!-- タブメニュー A -->
<input type="radio" name="tab_item" id="tab_radio_A" class="tab_radio" checked>
<label for="tab_radio_A" class="tab_menu">HTMLとは</label>

<!-- タブメニュー B -->
<input type="radio" name="tab_item" id="tab_radio_B" class="tab_radio">
<label for="tab_radio_B" class="tab_menu">CSSとは</label>

<!-- タブメニュー C -->
<input type="radio" name="tab_item" id="tab_radio_C" class="tab_radio">
<label for="tab_radio_C" class="tab_menu">JavaScriptとは</label>

 

labelタグには、このような属性をつけました。

属性名 解説
class tab_menu タブのスタイルを指定するために使用します。
for tab_radio_A

tab_radio_B

tab_radio_C

クリックされたときに、選択するinput要素のIDを指定します。

 

最後に、inputタグと同じ階層に、各タブの表示内容のdivタグを作り、表示内容をpタグで記載します。

 

<!-- タブA 表示内容 -->
<div id="tab_contains_A" class="tab_contains">
<p>HTMLは、コンピュータが理解できる文章構造を作ります。</p>
</div>

<!-- タブB 表示内容 -->
<div id="tab_contains_B" class="tab_contains">
<p>CSSは、HTML文章の見た目にデザインを指定していきます。</p>
</div>

<!-- タブC 表示内容 -->
<div id="tab_contains_C" class="tab_contains">
<p>JavaScriptは、ユーザーの動きに反応したり、複雑なことをします。</p>

 

Divタグの属性はこのようになります。

属性名 解説
class tab_contains コンテンツのスタイルを指定するために使用します。
for tab_contains_A

tab_contains_B

tab_contains_C

選択状態に応じて表示/非表示を制御するために使います。

 

ここまでのHTMLを表示するとこのようになります。

See the Pen
Tab only CSS p1
by TAKAYOSHI (@lspuwbkv)
on CodePen.

 

タブ切り替えのCSSを解説

それでは次に、CSSを記載していきます。
まずは、タブのメニューとコンテンツについて、選択されていない状態のスタイルを指定します。

.tab_menu{
    /*タブの基本スタイル*/
    border-bottom :solid 3px #5bc0de;
    background-color:#EEE;
    margin: 0;
    padding:0 1rem;

    /*選択されていないタブは透明色*/
    background-color:transport;
}

labelタグをお好みの見た目にスタイルして、メニュー部分を作っていきましょう。

 

.tab_contains{
    /*選択されていないコンテンツは非表示*/
    display:none;
}

コンテンツ部分は、選択されていない場合は非表示になります。

 

次に、選択されている状態のタブメニューを作ります。

.tab_radio:checked + .tab_menu{
    /*選択されているタブは白背景*/
    /* タブコンテンツの上線にかぶせて隠す */
    background-color:white;
}

 

ポインターはCSSセレクタ。選択されているinput要素を指定する疑似クラスcheckedと、真横にあるタグを指定する隣接セレクタ+。

この記述で、選択されているラジオボタンの真横にあるlabelタグをセレクトしています。

選択されたlabelタグは、背景色を白くし、タブコンテンツの上線を隠すことで、選択されている感を表現しました。

そして、選択されたタブコンテンツを表示させていきます。

#tab_radio_A:checked ~ #tab_contains_A,
#tab_radio_B:checked ~ #tab_contains_B,
#tab_radio_C:checked ~ #tab_contains_C{
    display:block;

    /*コンテンツの基本スタイル*/
    width:500px;
    border: solid black 1px;
    border-radius:3px;
    padding:1rem;

    /*選択されたタブで上線をかぶせる*/
    //margin-top:-1px;
    background-color:white;
}

ここにも、疑似クラスcheckedと、同じ階層の要素をセレクトする~セレクタを使っています。

#tab_radio_Aが選択された場合は#tab_contains_A、というようにABCそれぞれ、ラジオボタンとコンテンツ表示領域を紐づけています。

displayをnoneからblockに変えて、表示させていますね。

細かいスタイルはお好みで指定していきましょう。

 

最後に、ラジオボタンを非表示にします。

.tab_radio{
    /*ラジオボタンは表示しない*/
    display:none;
}

 

これで、CSSだけでタブ選択を実装することができました。

もちろん、レスポンシブにも対応することもできます。

カスタマイズして、お好みのタブを作ってみてくださいね。

 

監修してくれたメンター

田屋 貴祥

最新テクノロジーを広めるという情熱を持ちクラウドベンダーでセールスエンジニアに従事。その後、フリーランスWeb制作をしながら、海外で人生の楽しみ方を学ぶ。

海外のWeb制作Tipsを翻訳し実践するTechブログ制作中。https://webcreate.bokutachino.world/
最近のマイトレンドはCSS3で脱JavaScript。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。