カスタマイズ

タブの色を変更する

概要

タブのラベル部分の背景色・文字色を変更します。

使い方

タブグループにタブを追加する」で追加したタブをのラベル部分の色を変更できます。

変更できるのは通常状態時の背景色と文字色、およびタブ選択状態時の背景色と文字色です。

変更した色を元に戻す機能はありません。色を戻すには、元の色と同じ色を指定して「タブの色を変更する」を行ってください。なお元の色は、HTML,CSSで使われる16進数(HEX)カラーコードで表現すると以下のようになります。

  • 非選択時の背景色… #F7F9FA
  • 非選択時の文字色… #3498DB
  • タブ選択時の背景色… #3498DB
  • タブ選択時の文字色… #FFFFFF

設定するパラメーター

「タブ」「非選択時の背景色」「非選択時の文字色」「タブ選択時の背景色」「タブ選択時の文字色」を設定します。

タブ

色を変更したいタブを、「タブグループにタブを追加する」をセットしたアクションから選びます。

複数選択可能です。複数選択した場合、それらのタブ全てが、指定した同じ色になります。

非選択時の背景色

タブが非選択状態の場合の背景色を選択します。

非選択時の文字色

タブが非選択状態の場合の文字色を選択します。

タブ選択時の背景色

タブが選択状態の場合の背景色を選択します。

タブ選択時の文字色

タブが選択状態の場合の文字色を選択します。

注意事項

タブグループにタブを追加する」のドキュメントで、上級者向け情報としてCSSでスタイルをカスタマイズする方法が紹介されています。

このCSSを使ってタブの色を変更する方法と、「やること」の「タブの色を変更する」を用いる方法を同時に使用した場合、どちらの指定色が優先されるかは定まっていません。意図しない色がセットされてしまう原因にもなりますので、どちらか1つの方法に統一するようにしてください。

制限事項

  • タブをクリックした状態や、タブの上に合わせた状態のときの色は変更できません。

関連記事