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

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

アイコン付きタブ切り替えの作り方を紹介します。このサンプルでは、「ホーム」「検索」「通知」「設定」の4つのタブへ、それぞれ内容をイメージしやすいアイコンと文字を組み合わせて表示します。タブをクリックすると選択したタブが青色に変わり、その下に対応するコンテンツだけが表示される仕組みです。文字だけのタブと比べて項目の種類を視覚的に判別しやすいため、Webサイトや管理画面などのナビゲーションとして利用できます。

タブに表示するアイコンには、Font AwesomeやMaterial Iconsなどの外部アイコンライブラリを使用せず、HTML内へ直接記述したSVGアイコンを使用します。ホームは家、検索は虫眼鏡、通知はベル、設定は歯車を表すシンプルなSVGをそれぞれ用意しているため、アイコン用の画像ファイルや外部ライブラリを別途読み込む必要はありません。SVGにはstroke="currentColor"を指定しているため、通常時はタブの文字色と同じ色で表示され、選択中のタブでは文字と一緒にアイコンの色も切り替わります。

HTMLでタブ、SVGアイコン、対応するコンテンツを作成し、CSSでアイコンと文字の配置、タブのサイズ、枠線、選択中の色などを設定します。JavaScriptではクリックされたタブに合わせてis-activeクラスとaria-selectedを切り替え、対応するコンテンツだけを表示します。会員サイトのメニュー、管理画面の設定項目、ECサイトの商品情報、各種サービスの機能メニューなど、複数の内容をアイコンと文字で分かりやすく分類したい場合に活用できます。画面幅640px以下ではタブやアイコン、コンテンツのサイズを調整するため、スマートフォン・タブレット・PCで利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

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

アイコン付きのタブをクリックすると、対応する内容へ切り替わります。

ホーム

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

検索

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

通知

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

設定

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

ホーム・検索・通知・設定の各タブをクリックすると、アイコンと文字で選択項目を確認しながら対応する内容へ切り替えられます。

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

<!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-tab-switch_wrap">

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

    <!-- 説明文 -->
    <p class="icon-tab-switch_text">
      アイコン付きのタブをクリックすると、対応する内容へ切り替わります。
    </p>

    <!-- タブ一覧 -->
    <div
      class="icon-tab-switch_tabs"
      role="tablist"
      aria-label="表示内容">

      <!-- ホームタブ -->
      <button
        class="icon-tab-switch_button is-active"
        id="icon-tab-switch-home"
        type="button"
        role="tab"
        aria-controls="icon-tab-switch-panel-home"
        aria-selected="true"
        data-tab="home">

        <!--
          ホームアイコン。
          外部アイコンライブラリは使用せず、
          HTML内へ直接記述したSVGで表示しています。
          stroke="currentColor"によってタブの文字色と同じ色になります。
        -->
        <svg
          class="icon-tab-switch_icon"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          aria-hidden="true">
          <path d="M3 10.5L12 3l9 7.5"></path>
          <path d="M5 9.5V21h14V9.5"></path>
          <path d="M9 21v-7h6v7"></path>
        </svg>

        <span>ホーム</span>

      </button>

      <!-- 検索タブ -->
      <button
        class="icon-tab-switch_button"
        id="icon-tab-switch-search"
        type="button"
        role="tab"
        aria-controls="icon-tab-switch-panel-search"
        aria-selected="false"
        data-tab="search">

        <!-- 検索を表す虫眼鏡のSVGアイコン -->
        <svg
          class="icon-tab-switch_icon"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          aria-hidden="true">
          <circle cx="11" cy="11" r="7"></circle>
          <path d="M20 20l-4-4"></path>
        </svg>

        <span>検索</span>

      </button>

      <!-- 通知タブ -->
      <button
        class="icon-tab-switch_button"
        id="icon-tab-switch-notice"
        type="button"
        role="tab"
        aria-controls="icon-tab-switch-panel-notice"
        aria-selected="false"
        data-tab="notice">

        <!-- 通知を表すベルのSVGアイコン -->
        <svg
          class="icon-tab-switch_icon"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          aria-hidden="true">
          <path d="M18 16V11a6 6 0 10-12 0v5l-2 2h16z"></path>
          <path d="M10 20a2 2 0 004 0"></path>
        </svg>

        <span>通知</span>

      </button>

      <!-- 設定タブ -->
      <button
        class="icon-tab-switch_button"
        id="icon-tab-switch-setting"
        type="button"
        role="tab"
        aria-controls="icon-tab-switch-panel-setting"
        aria-selected="false"
        data-tab="setting">

        <!-- 設定を表す歯車のSVGアイコン -->
        <svg
          class="icon-tab-switch_icon"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          aria-hidden="true">
          <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>

        <span>設定</span>

      </button>

    </div>

    <!-- ホームのコンテンツ -->
    <div
      class="icon-tab-switch_panel is-active"
      id="icon-tab-switch-panel-home"
      role="tabpanel"
      aria-labelledby="icon-tab-switch-home"
      data-panel="home">

      <div class="icon-tab-switch_panel-title">
        ホーム
      </div>

      <p class="icon-tab-switch_panel-text">
        ホーム画面用のサンプルコンテンツです。
      </p>

    </div>

    <!-- 検索のコンテンツ -->
    <div
      class="icon-tab-switch_panel"
      id="icon-tab-switch-panel-search"
      role="tabpanel"
      aria-labelledby="icon-tab-switch-search"
      data-panel="search">

      <div class="icon-tab-switch_panel-title">
        検索
      </div>

      <p class="icon-tab-switch_panel-text">
        検索機能やフィルター画面などを配置できます。
      </p>

    </div>

    <!-- 通知のコンテンツ -->
    <div
      class="icon-tab-switch_panel"
      id="icon-tab-switch-panel-notice"
      role="tabpanel"
      aria-labelledby="icon-tab-switch-notice"
      data-panel="notice">

      <div class="icon-tab-switch_panel-title">
        通知
      </div>

      <p class="icon-tab-switch_panel-text">
        お知らせや未読通知などを表示できます。
      </p>

    </div>

    <!-- 設定のコンテンツ -->
    <div
      class="icon-tab-switch_panel"
      id="icon-tab-switch-panel-setting"
      role="tabpanel"
      aria-labelledby="icon-tab-switch-setting"
      data-panel="setting">

      <div class="icon-tab-switch_panel-title">
        設定
      </div>

      <p class="icon-tab-switch_panel-text">
        各種設定画面やオプション項目を配置できます。
      </p>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* タブ切り替え全体と内部要素 */
.icon-tab-switch_wrap,
.icon-tab-switch_wrap *{
  box-sizing:border-box; /* paddingとborderを要素の横幅・高さへ含める */
}

/* タブ切り替え全体 */
.icon-tab-switch_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側の余白。値を大きくすると内容と外枠の間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  color:#111827; /* 全体の基本文字色 */
}

/* タイトル */
.icon-tab-switch_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.icon-tab-switch_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくするとタブとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* タブ一覧 */
.icon-tab-switch_tabs{
  display:flex; /* タブを横一列に配置 */
  border-bottom:1px solid #d1d5db; /* タブ下側の境界線 */
}

/* 各タブ */
.icon-tab-switch_button{
  flex:1; /* 4つのタブを均等な横幅にする */
  min-width:0; /* 狭い画面でも親要素の横幅に合わせて縮小 */
  min-height:52px; /* タブの最小高さ。値を大きくするとタブが高くなる */
  padding:14px 10px; /* 上下14px・左右10px。値を大きくすると内側余白が広がる */
  border:1px solid #d1d5db; /* 通常時の枠線 */
  border-bottom:none; /* コンテンツとの境界部分の枠線を非表示 */
  border-radius:12px 12px 0 0; /* 上側12pxの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色とSVGアイコンの線色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:16px; /* タブの文字サイズ */
  font-weight:700; /* タブの文字を太字にする */
  line-height:1.5; /* タブ内の文字の行間 */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
  display:flex; /* SVGアイコンと文字を横並びにする */
  align-items:center; /* SVGアイコンと文字を上下中央に揃える */
  justify-content:center; /* SVGアイコンと文字を左右中央に揃える */
  gap:8px; /* SVGアイコンと文字の間隔。値を大きくすると間隔が広がる */
  transition:
    background-color .3s ease,
    color .3s ease;
  /*
    0.3秒で背景色と文字色を切り替える。
    値を大きくすると遅くなり、小さくすると速くなる。
  */
}

/* 2つ目以降のタブ */
.icon-tab-switch_button + .icon-tab-switch_button{
  margin-left:6px; /* タブ同士の間隔。値を大きくするとタブの間が広がる */
}

/* 選択中のタブ */
.icon-tab-switch_button.is-active{
  background:#0b6bff; /* 選択中の背景色 */
  color:#ffffff; /* 選択中の文字色。SVGアイコンも同じ色へ変化する */
}

/* キーボード操作時のフォーカス */
.icon-tab-switch_button:focus-visible{
  position:relative;
  z-index:1;
  outline:3px solid rgba(11,107,255,.22); /* フォーカス枠の太さ。値を大きくすると太くなる */
  outline-offset:2px; /* タブとフォーカス枠の間隔。値を大きくすると外側へ離れる */
}

/* SVGアイコン */
.icon-tab-switch_icon{
  width:20px; /* アイコンの横幅。値を大きくするとアイコンが大きくなる */
  height:20px; /* アイコンの高さ。値を大きくするとアイコンが大きくなる */
  flex:0 0 auto; /* アイコンがタブ幅に合わせて縮まないようにする */
}

/* 各コンテンツ */
.icon-tab-switch_panel{
  display:none; /* 選択されていないコンテンツを非表示 */
  min-height:190px; /* コンテンツの最小高さ。値を大きくすると表示領域が高くなる */
  padding:24px; /* 内側の余白。値を大きくすると文章と枠線の間隔が広がる */
  border:1px solid #d1d5db; /* コンテンツを囲む枠線 */
  border-top:none; /* タブとの境界部分の枠線を非表示 */
  background:#ffffff; /* コンテンツの背景色 */
  color:#4b5563; /* コンテンツ本文の文字色 */
  font-size:16px; /* コンテンツ本文の文字サイズ */
  line-height:1.8; /* コンテンツ本文の行間 */
}

/* 選択中のコンテンツ */
.icon-tab-switch_panel.is-active{
  display:block; /* 選択中のコンテンツだけを表示 */
}

/* コンテンツ内のタイトル */
.icon-tab-switch_panel-title{
  margin:0 0 10px; /* 下側10pxの余白。値を大きくすると本文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:18px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* コンテンツ内の文章 */
.icon-tab-switch_panel-text{
  margin:0; /* ブラウザ標準の外側余白を削除 */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* タブ切り替え全体 */
  .icon-tab-switch_wrap{
    padding:24px 18px; /* スマートフォンでは全体の内側余白を小さくする */
  }

  /* 各タブ */
  .icon-tab-switch_button{
    min-height:48px; /* スマートフォン時のタブ最小高さ */
    padding:12px 6px; /* 上下12px・左右6pxへ縮小 */
    gap:5px; /* アイコンと文字の間隔を5pxへ縮小 */
    font-size:14px; /* スマートフォン時の文字サイズ */
  }

  /* 2つ目以降のタブ */
  .icon-tab-switch_button + .icon-tab-switch_button{
    margin-left:4px; /* スマートフォン時のタブ間隔 */
  }

  /* SVGアイコン */
  .icon-tab-switch_icon{
    width:18px; /* スマートフォン時のアイコン横幅 */
    height:18px; /* スマートフォン時のアイコン高さ */
  }

  /* 各コンテンツ */
  .icon-tab-switch_panel{
    min-height:170px; /* スマートフォン時のコンテンツ最小高さ */
    padding:20px 16px; /* 上下20px・左右16pxへ余白を縮小 */
  }

  /* コンテンツ内のタイトル */
  .icon-tab-switch_panel-title{
    font-size:17px; /* スマートフォン時のタイトル文字サイズ */
  }

}

// すべてのアイコン付きタブを取得
const iconTabSwitchButtons =
  document.querySelectorAll(".icon-tab-switch_button");

// すべてのタブコンテンツを取得
const iconTabSwitchPanels =
  document.querySelectorAll(".icon-tab-switch_panel");

// 各タブへクリック処理を設定
iconTabSwitchButtons.forEach(function(button){

  button.addEventListener("click",function(){

    // クリックされたタブに設定されているdata-tabの値を取得
    const target = button.dataset.tab;

    // すべてのタブを非選択状態にする
    iconTabSwitchButtons.forEach(function(item){

      item.classList.remove("is-active");
      item.setAttribute("aria-selected","false");

    });

    // すべてのコンテンツを非表示にする
    iconTabSwitchPanels.forEach(function(panel){

      panel.classList.remove("is-active");

    });

    // クリックされたタブを選択状態にする
    button.classList.add("is-active");
    button.setAttribute("aria-selected","true");

    // data-tabと同じdata-panelを持つコンテンツを表示する
    document
      .querySelector(
        '.icon-tab-switch_panel[data-panel="' +
        target +
        '"]'
      )
      .classList.add("is-active");

  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは「ホーム」「検索」「通知」「設定」の4つのタブと、それぞれに対応するコンテンツを作成し、各タブには内容を視覚的に分かりやすくするSVGアイコンを表示します。CSSではタブの配置や色、サイズ、アイコンと文字の間隔、選択中のデザインなどを設定し、JavaScriptでクリックしたタブに対応するコンテンツへ切り替えます。

タブ内のアイコンにはFont AwesomeやMaterial Iconsなどの外部アイコンライブラリを使用していません。ホームは家、検索は虫眼鏡、通知はベル、設定は歯車を表すSVGをindex.html内へ直接記述しています。そのため、アイコン用の画像ファイルや外部ライブラリを別途ダウンロードしたり読み込んだりする必要はありません。SVGのstroke="currentColor"によってアイコンの線色をタブの文字色と連動させているため、選択中のタブでは文字とアイコンが一緒に白色へ変化します。

外部サービスやAPI、外部データは使用しておらず、APIキーやURLなど利用者自身で用意する設定情報もありません。3つのファイルを同じsampleフォルダへ配置すれば、そのままブラウザで動作を確認できます。

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

各ファイルの役割
index.htmlは、アイコン付きタブ切り替えのHTML構造を記述するファイルです。「ホーム」「検索」「通知」「設定」の4つのタブ、各タブに表示するSVGアイコン、タブに対応する4つのコンテンツを記述しています。タブ名やコンテンツのタイトル・本文を変更する場合や、SVGアイコンの形を変更する場合は、このファイルを編集します。SVGアイコンは外部ファイルではなく、各タブの<svg>要素内へ直接記述されています。

style.cssは、タブ切り替えのデザインを設定するファイルです。全体の最大横幅や余白、背景色、枠線、角丸のほか、タブの高さ、文字サイズ、アイコンサイズ、アイコンと文字の間隔、選択中の背景色などを設定しています。SVGにはstroke="currentColor"を指定しているため、CSSでタブのcolorを変更するとSVGアイコンの線色も同時に変わります。

script.jsは、クリックされたタブに対応するコンテンツへ表示を切り替えるファイルです。タブのdata-tabから切り替え先を取得し、同じ値をdata-panelへ設定しているコンテンツを表示します。同時にis-activeクラスとaria-selectedを更新して、選択中のタブとコンテンツを切り替えます。

設置方法・使い方
sampleフォルダの中へindex.html、style.css、script.jsの3ファイルを配置します。3つのファイルは同じ階層へ保存してください。index.htmlでは<link rel="stylesheet" href="style.css">でstyle.cssを読み込み、<script src="script.js"></script>でscript.jsを読み込む構成になっています。

ファイルを配置したら、sample/index.htmlをブラウザで開きます。最初は「ホーム」が選択された状態で表示されます。「検索」「通知」「設定」のいずれかをクリックすると、選択したタブが青色になり、SVGアイコンと文字が白色へ変わります。同時に、タブの下に表示されるコンテンツも選択した項目に対応する内容へ切り替わります。外部アイコンライブラリを使用していないため、アイコン表示のための追加設定は必要ありません。

カスタマイズできる内容
index.htmlでは、「ホーム」「検索」「通知」「設定」というタブ名と、それぞれのコンテンツタイトル・本文を変更できます。タブとコンテンツの対応は、タブ側のdata-tabとコンテンツ側のdata-panelで設定しているため、これらの値を変更する場合は対応する値を同じ名前にします。また、各タブ内の<svg>に記述している<path>や<circle>を変更すると、表示するSVGアイコンの形を変更できます。

style.cssでは、タブ切り替え全体の横幅、余白、枠線、角丸、背景色を変更できます。各タブについても高さ、余白、文字サイズ、タブ同士の間隔、アイコンと文字の間隔、SVGアイコンの大きさを変更できます。.icon-tab-switch_button.is-activeのbackgroundとcolorを変更すると、選択中のタブの背景色と文字色を変更できます。SVGアイコンの線色もcurrentColorによって同じcolorへ連動します。

数値調整
style.css

padding:40px 20px;
ページ全体の余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。

max-width:700px;
タブ切り替え全体の最大横幅です。値を大きくすると全体を広く表示でき、小さくするとコンパクトになります。

margin:40px auto;
タブ切り替え全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置します。

padding:32px;
タブ切り替え全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。

border-radius:18px;
タブ切り替え全体の角丸です。値を大きくすると丸みが強くなり、0にすると角丸がなくなります。

font-size:22px;
全体タイトルの文字サイズです。値を大きくするとタイトルが大きくなります。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると説明文とタブの間隔が広がります。

min-height:52px;
各タブの最小高さです。値を大きくするとタブが高くなり、小さくすると低くなります。

padding:14px 10px;
各タブの内側余白です。14pxは上下、10pxは左右の余白を表します。値を大きくするとアイコンや文字と枠線の間隔が広がります。

border-radius:12px 12px 0 0;
各タブ上部の角丸です。12pxを大きくすると上側の丸みが強くなります。

font-size:16px;
タブの文字サイズです。値を大きくすると「ホーム」「検索」などの文字が大きくなります。

gap:8px;
SVGアイコンとタブ文字の間隔です。値を大きくするとアイコンと文字が離れ、小さくすると近づきます。

.3s
タブを切り替えたときに背景色と文字色が変化する時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。

margin-left:6px;
2つ目以降のタブに設定している間隔です。値を大きくするとタブ同士の間隔が広がります。

outline:3px solid ...
キーボード操作でタブへフォーカスしたときに表示する枠線の太さです。3pxを大きくするとフォーカス枠が太くなります。

outline-offset:2px;
タブとフォーカス枠の間隔です。値を大きくするとフォーカス枠がタブから離れます。

width:20px;・height:20px;
SVGアイコンの横幅と高さです。両方の値を同じように大きくするとアイコンが大きくなり、小さくすると小さくなります。

min-height:190px;
コンテンツ部分の最小高さです。値を大きくするとコンテンツの表示領域が高くなります。

padding:24px;
コンテンツ部分の内側余白です。値を大きくすると文章と枠線の間隔が広がります。

font-size:18px;
コンテンツ内タイトルの文字サイズです。値を大きくすると「ホーム」「検索」などのコンテンツタイトルが大きくなります。

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。.icon-tab-switch_wrapへwidth:100%とmax-width:700pxを設定しているため、最大700pxを基準としながら画面幅に合わせて全体を縮小できます。各タブにはflex:1とmin-width:0を設定し、4つのタブを横一列に保ったまま利用できる横幅へ均等に調整します。

画面幅640px以下では、@media (max-width:640px)によって各サイズを調整します。全体の内側余白は24px 18px、タブの最小高さは48px、内側余白は12px 6px、文字サイズは14px、アイコンと文字の間隔は5px、タブ同士の間隔は4pxへ変更します。SVGアイコンも20pxから18pxへ縮小し、コンテンツ部分は最小高さ170px、内側余白20px 16px、タイトル17pxへ変更するため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。