【コピペで簡単！】HTMLとCSSで作る！タブの切り替えBOX（ドロップダウンメニュー）

先日、FrankuL-フランクル-が受注した案件で、アイテムごとにおすすめ商品を表示したい！というご依頼があり、タブの切り替えBOX（ドロップダウンメニュー）を使用しました。

タブを切り替えて、表示させることでスッキリとしたページになりますよ！

タブの切り替えBOXと、リスト表示で見比べて見てください！
どちらがスッキリして見えますか？？

☆好きなスイーツセレクション☆

ケーキ

チーズケーキ
フルーツタルト
ガトーショコラ

クッキー

ショートブレッド
ジンジャーブレッド
チョコチップクッキー

和菓子

いちご大福
みたらし団子
たい焼き

☆好きなスイーツセレクション☆

ケーキ
１チーズケーキ
２フルーツタルト
３ガトーショコラ
クッキー
１ショートブレッド
２ジンジャーブレッド
３チョコチップクッキー
和菓子
１いちご大福
２みたらし団子
３たい焼き

今回は、見やすいサイトを作るお手伝い、コピペで使えるシリーズの「タブの切り替えBOX」をご紹介します！

タブ切り替えBOXとは？
1. メリット
2. デメリット
タブの切り替えBOX（ドロップダウンメニュー）を作ってみよう！
見やすいWebサイト制作を

タブ切り替えBOXとは？

タブの切り替えBOXとは、タイトルのみ表示または指定されたもののみ表示されていて、クリックしたものが切り替わりながら表示される仕組みです。

どんなメリットやデメリットがあるか、みてみましょう！

メリット

閲覧者が自分に必要のある部分を直感的に選んでみることができるので、不要な部分をスクロールで飛ばすなどしなくてもよいため、ニーズに合わせた情報提供にも使えます！

また、ページ遷移と違いクリックですぐに表示されるので、表示切り替え速度が速いです。

デメリット

表示しているタブの中身自体は、クリックするまで [ display: none ] で非表示になっています。Googleでは、デフォルトで非表示にしているものはSEO上評価してくれません。

タブの切り替えBOX（ドロップダウンメニュー）を作ってみよう！

それぞれのタブの＜HTML＞と＜CSS＞はコピーして使えます！
カラーやフォントサイズは自由に変えて使ってください。

シンプルなタブメニュー

デフォルトでは表示せず、クリックしたものが表示されます。

めだかの学校

めだかの学校は川の中　そっとのぞいてみてごらん
そっとのぞいてみてごらん　みんなでお遊戯しているよ

森のくまさん

ある日森の中くまさんにであった　
花咲く森の道　くまさんにであった

かえるの合唱

カエルの歌が　きこえてくるよ
クワクワクワクワケケケケケケケケクワクワクワ

＜HTML＞

<div class="tab-simple">
    <label>
        <input type="radio" name="tab-simple" >
        めだかの学校
    </label>
    <div>
        めだかの学校は川の中　そっとのぞいてみてごらん<br>
       そっとのぞいてみてごらん　みんなでお遊戯しているよ
    </div>
    <label>
        <input type="radio" name="tab-simple">
        森のくまさん
    </label>
    <div>
        ある日 森の中 くまさんにであった　<br>
        花咲く森の道　くまさんにであった
    </div>
    <label>
        <input type="radio" name="tab-simple">
        かえるの合唱
    </label>
    <div>
        カエルの歌が　きこえてくるよ<br>
        クワクワクワクワ ケケケケ ケケケケ クワクワクワ
    </div>
</div>

＜CSS＞

/*タブを並べる設定*/
.tab-simple {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    max-width: 650px;
}
/*タブ見出しの設定*/
.tab-simple > label {
    flex: 1 1;
    order: -1;
    opacity: 0.5;
    min-width: 70px;
    padding: .6em 1em;
    background-color: #008080;
    color: #fff;
    font-size: 1em;
    text-align: center;
    cursor: pointer;
}
/*ホバーされた時*/
.tab-simple > label:hover {
    opacity: 0.8;
}
/*表示しない*/
.tab-simple input {
    display: none;
}
/*デフォルトでは表示しない*/
.tab-simple > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #ffffe0;
}
/*クリックされた時*/
.tab-simple label:has(:checked) {
    opacity: 1;
}
/*クリックされたら表示*/
.tab-simple label:has(:checked) + div {
    display: block;
}

付箋風のタブメニュー

デフォルトでひとつ表示させておくバージョンです。

めだかの学校

めだかの学校は川の中　そっとのぞいてみてごらん
そっとのぞいてみてごらん　みんなでお遊戯しているよ

森のくまさん

ある日森の中くまさんにであった　
花咲く森の道　くまさんにであった

かえるの合唱

カエルの歌が　きこえてくるよ
クワクワクワクワケケケケケケケケクワクワクワ

＜HTML＞

<div class="tab-postit">
    <label>
        <input type="radio" name="tab-postit" checked>
<!--デフォルトで表示したいものに"checked"をつけておく-->
        めだかの学校
    </label>
    <div>
        めだかの学校は川の中　そっとのぞいてみてごらん<br>
        そっとのぞいてみてごらん　みんなでお遊戯しているよ
    </div>

    <label>
        <input type="radio" name="tab-postit">
        森のくまさん
    </label>
    <div>
       ある日 森の中 くまさんにであった　<br>
       花咲く森の道　くまさんにであった
    </div>

    <label>
        <input type="radio" name="tab-postit">
        かえるの合唱
    </label>
    <div>
        カエルの歌が　きこえてくるよ<br>
        クワクワクワクワ ケケケケ ケケケケ クワクワクワ
    </div>
</div>

＜CSS＞

/*タブを並べる設定*/
.tab-postit {
    display: flex;
    flex-wrap: wrap;
    max-width: 650px;
}
/*タブ見出しの設定*/
.tab-postit > label {
    flex: 1 1;
    order: -1;
    min-width: 70px;
    padding: .7em 1em .5em;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 0;
    background-color: #f5f5f5;
    color: #a9a9a9;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}
/*ホバーされた時*/
.tab-postit > label:hover {
    opacity: 0.8;
}
/*表示しない*/
.tab-postit input {
    display: none;
}
/*デフォルトでは表示しない*/
.tab-postit > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background-color: #fff;
}
/*クリックされた時*/
.tab-postit label:has(:checked) {
    background-color: #fff;
    border-color: #d3d3d3 #d3d3d3 #d3d3d3 #f7a518;
    border-style: solid;
    border-width: 1px 1px 1px 7px;
    border-radius: 5px 0 0 5px;
    color: #000000;
}
/*クリックされたら表示*/
.tab-postit label:has(:checked) + div {
    display: block;
}

矢印つきのタブメニュー

クリックすると、矢印つきのタブに変化して内容が表示されます。

めだかの学校

めだかの学校は川の中　そっとのぞいてみてごらん
そっとのぞいてみてごらん　みんなでお遊戯しているよ

森のくまさん

ある日森の中くまさんにであった　
花咲く森の道　くまさんにであった

かえるの合唱

カエルの歌が　きこえてくるよ
クワクワクワクワケケケケケケケケクワクワクワ

＜HTML＞

<div class="tab-arrow">
    <label>
        <input type="radio" name="tab-arrow">
        めだかの学校
    </label>
    <div>
        めだかの学校は川の中　そっとのぞいてみてごらん<br>
        そっとのぞいてみてごらん　みんなでお遊戯しているよ
    </div>

    <label>
        <input type="radio" name="tab-arrow">
        森のくまさん
    </label>
    <div>
       ある日 森の中 くまさんにであった　<br>
       花咲く森の道　くまさんにであった
    </div>

    <label>
        <input type="radio" name="tab-arrow">
        かえるの合唱
    </label>
    <div>
        カエルの歌が　きこえてくるよ<br>
        クワクワクワクワ ケケケケ ケケケケ クワクワクワ
    </div>
</div>

＜CSS＞

/*タブを並べる設定*/
.tab-arrow {
    display: flex;
    flex-wrap: wrap;
    max-width: 650px;
}
/*タブ見出しの設定*/
.tab-arrow > label {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 70px;
    padding: 0.7em 1em;
    background-color: #fff;
    color: #808080;
    font-size: 0.9em;
    text-align: center;
    border-color: #d3d3d3;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
}
/*ホバーされた時とクリックされた時*/
.tab-arrow > label:hover,
.tab-arrow label:has(:checked) {
    background-color: #2032b6;
    color: #fff;
}
/*クリックされた時にでる矢印*/
.tab-arrow label:has(:checked)::before {
    position: absolute;
    bottom: -13px; /*縦位置*/
    left: 30%; /*横位置*/
    transform: translateX(-50%);
    width: 30px; /*横幅*/
    height: 15px; /*高さ*/
    background-color: #2032b6;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%); /*三角の角部分*/
}
/*表示しない*/
.tab-arrow input {
    display: none;
}
/*デフォルトでは表示しない*/
.tab-arrow > div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
}
/*クリックされたら表示*/
.tab-arrow label:has(:checked) + div {
    display: block;
}

今回のタブの切り替えBOXは【 CSS Stock 】を参考にさせていただきました。ありがとうございます。

HTML・CSSでつくる切り替え可能なタブのデザイン4選

「ここの要素をユーザーが表示・非表示を切り替えできるようにしたい」という場合におすすめなのがタブメニュー。ユーザーに必要な要素のみを表示できるのが特徴で、よりサイトをスタイリッシュにすることができます。比較的実装に手間がかかるタブですが、コ...

見やすいWebサイト制作を

Webサイトを作る上で、とても大事な見やすさ！
見たいものを選んで見ることができたり、表示するスペースを少なくして見やすくしたり、そんな時に大活躍してくれる、タブの切り替えBOX。

私たちFrankuL-フランクル-が受注した案件のなかでも、商品ごとのおすすめランキングで使用したり、オーダーフォームとサンプルフォームでの切り替えで使用したりなど、様々なパターンで利用されています。

参考にさせていただいたWebサイト、【 CSS Stock 】はタブの切り替えBOXのジェネレータなので、いろんなカラーの切り替えBOXを作成することもできますよ！
カラーや枠線などを変えて、Webサイトに合わせて作成して見てください！