アイコン付きタブ切り替えの作り方【HTML/CSS/JavaScript・サンプルコード付き】

タブ切り替え
2025.10.05

アイコン付きタブ切り替えの作り方

HTML・CSS・JavaScriptを使って、アイコンとテキストを組み合わせたボタン型のタブ切り替えを作る方法を紹介します。タブごとにSVGアイコンを表示できるため、視認性が高く、ナビゲーションや管理画面、設定画面などさまざまな用途で利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

アイコン付きタブ切り替え

アイコン付きのボタンをクリックすると内容を切り替えられます。

ホーム

ホーム画面用のサンプルコンテンツです。

検索

検索機能やフィルター画面などを配置できます。

通知

お知らせや未読通知などを表示できます。

設定

各種設定画面やオプション項目を配置できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>アイコン付きタブ切り替え</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- タブ全体を囲むエリア -->
  <div class="icon-text-tab_wrap">

    <!-- タイトル -->
    <div class="icon-text-tab_title">
      アイコン付きタブ切り替え
    </div>

    <!-- 説明文 -->
    <p class="icon-text-tab_text">
      アイコン付きのボタンをクリックすると内容を切り替えられます。
    </p>

    <!-- タブボタン一覧 -->
    <div class="icon-text-tab_tabs">

      <button class="icon-text-tab_button is-active" type="button" data-tab="home">

        <svg class="icon-text-tab_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 10.5L12 3l9 7.5"></path>
          <path d="M5 9.5V21h14V9.5"></path>
          <path d="M9 21v-7h6v7"></path>
        </svg>

        ホーム

      </button>

      <button class="icon-text-tab_button" type="button" data-tab="search">

        <svg class="icon-text-tab_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="11" cy="11" r="7"></circle>
          <path d="M20 20l-4-4"></path>
        </svg>

        検索

      </button>

      <button class="icon-text-tab_button" type="button" data-tab="notice">

        <svg class="icon-text-tab_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18 16V11a6 6 0 10-12 0v5l-2 2h16z"></path>
          <path d="M10 20a2 2 0 004 0"></path>
        </svg>

        通知

      </button>

      <button class="icon-text-tab_button" type="button" data-tab="setting">

        <svg class="icon-text-tab_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="3"></circle>
          <path d="M19 12a7 7 0 00-.1-1l2.1-1.7-2-3.4-2.5 1a8 8 0 00-1.7-1L14.4 3h-4.8l-.4 2.9a8 8 0 00-1.7 1l-2.5-1-2 3.4L5.1 11A7 7 0 005 12a7 7 0 00.1 1L3 14.7l2 3.4 2.5-1a8 8 0 001.7 1l.4 2.9h4.8l.4-2.9a8 8 0 001.7-1l2.5 1 2-3.4-2.1-1.7c.1-.3.1-.7.1-1z"></path>
        </svg>

        設定

      </button>

    </div>

    <!-- ホームタブの内容 -->
    <div class="icon-text-tab_panel is-active" data-panel="home">

      <h3>ホーム</h3>

      <p>
        ホーム画面用のサンプルコンテンツです。
      </p>

    </div>

    <!-- 検索タブの内容 -->
    <div class="icon-text-tab_panel" data-panel="search">

      <h3>検索</h3>

      <p>
        検索機能やフィルター画面などを配置できます。
      </p>

    </div>

    <!-- 通知タブの内容 -->
    <div class="icon-text-tab_panel" data-panel="notice">

      <h3>通知</h3>

      <p>
        お知らせや未読通知などを表示できます。
      </p>

    </div>

    <!-- 設定タブの内容 -->
    <div class="icon-text-tab_panel" data-panel="setting">

      <h3>設定</h3>

      <p>
        各種設定画面やオプション項目を配置できます。
      </p>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。 

sample/
├── index.html
├── style.css
└── script.js

index.html をブラウザで開くと、アイコン付きのタブ切り替えを利用できます。アイコンやテキスト、表示内容を変更したい場合は、index.html 内のSVGやテキスト、各タブコンテンツを書き換えるだけで自由にカスタマイズできます。

コメント