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

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

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

 

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

 

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

 

目次

• タブの切り替えとは
• タブ切り替えのHTMLを解説
• タブ切り替えのCSSを解説

 

タブの切り替えとは

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

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

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

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

 

[PR] Webデザインで副業する方法とは

タブ切り替えの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だけでタブ選択を実装することができました。

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

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

 

 

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

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