タブのスタイル設定

タブのスタイル設定

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。


Info概要
タブのスタイル設定では、外側のコンテナーや、アクティブなタブのコンテンツを表示するパネルなど、タブ要素内の各レイヤーの外観を調整できます。外側のコンテナーでは、タブ項目を配置するヘッダーと、タブ項目自体のデフォルト、ホバー、アクティブの各状態に関するスタイルプロパティも設定できます。

1. 説明

タブ要素*タブ要素のドキュメントへのリンク*は、4つの異なるスタイルレイヤーで構成されています。各レイヤーは、［プロパティ］ペインの［スタイル］タブから個別にカスタマイズできます。

  

タブレイヤー スタイルの適用対象
コンテナー タブ要素全体の最も外側の領域です。
タブヘッダー すべてのタブ項目を配置する領域です。
タブ項目 タブヘッダー内の個々のタブです。ラベルのみ、またはアイコンとラベルを表示できます。
タブパネル タブがアクティブなときに表示されるコンテンツ領域です。

2. スタイルプロパティ

タブで共通して使用できるスタイルプロパティは次のとおりです。
  1. ［レイアウト］*リンク*
  2. ［タブの種類］ - 必要に応じて、タブを［水平］（タブ項目を横一列に配置）または［垂直］（タブ項目を縦一列に配置）に変更します。
  3. ［配置］*リンク*
これらに加えて、タブ要素の各レイヤーには固有のスタイルプロパティが用意されており、タブ全体のデザインを詳細に調整できます。

2.1. コンテナー

コンテナーはタブ要素全体を囲み、最も外側の外観を制御します。

  1. ［背景と画像］*リンク*
  2. ［枠線］*リンク*
  3. ［マージン］*リンク*
  4. ［パディング］*リンク*
  5. ［角の丸み］*リンク*
  6. ［影］*リンク*

2.2. タブヘッダー

タブヘッダーは、すべてのタブ項目を配置する領域です。この領域の外観は、内部の項目とは別に設定できます。

  1. ［背景と画像］*リンク*
  2. ［枠線］*リンク*
  3. ［間隔］*以下のリンク*
  4. ［マージン］*リンク*
  5. ［パディング］*リンク*
  6. ［角の丸み］*リンク*
  7. ［影］

タブヘッダーには、このレイヤー固有の次のプロパティもあります。

プロパティ 説明
［間隔］ ヘッダー内で隣り合うタブ項目間の間隔を調整します。定義済みの間隔、または任意のpx値を指定できます。
Notesメモ：タブヘッダーのレイヤーでは影を設定できません。影は、コンテナーレイヤーを通じてタブ要素全体に適用されます。

2.3. タブ項目

タブ項目は、ヘッダー内にある選択可能な個々のラベルです。各タブ項目には、［デフォルト］、［ホバー］、［アクティブ］の3つの操作状態に応じたスタイルを設定できます。これらの状態は、［スタイル］ペインの［タブ項目］セクション上部にある操作状態タブから選択できます。3つの状態すべてで同じプロパティを使用でき、それぞれに異なる外観を設定できます。

状態ごとのスタイルは、コンポーネント内のすべてのタブ項目に一律で適用されます。個々のタブ項目に異なるスタイルを設定することはできません。

  1. ［フォント］*リンク*
  2. ［アイコン（サイズ、スタイル、色）］*リンク*
  3. ［背景と画像］*リンク*
  4. ［枠線］*リンク*
  5. ［マージン］*リンク*
  6. ［パディング］*リンク*
  7. ［角の丸み］*リンク*
  8. ［影］*リンク*

タブ項目には、このレイヤー固有の次のプロパティもあります。

プロパティ 説明
［間隔］ 1つのタブ項目内にあるアイコンとラベルテキストの間隔を調整します。定義済みの間隔、または任意のpx値を指定できます。
Notesメモ：アイコンのプロパティは、タブ要素で選択したプリセットのタブ項目が［アイコンとテキスト］の形式の場合にのみ使用できます。ラベルの種類が［テキストのみ］の場合、［タブ項目］セクションにアイコンの行は表示されません。

2.4. タブパネル

タブパネルは、対応するタブがアクティブになったときに表示されるコンテンツ領域です。タブ要素の他の部分とは別に選択し、スタイルを設定できます。ビルド画面でタブパネルを選択する方法については、セクション4を参照してください。

  1. ［背景］*リンク*
  2. ［枠線］*リンク*
  3. ［マージン］*リンク*
  4. ［パディング］*リンク*
  5. ［角の丸み］*リンク*
  6. ［影］*リンク*
Notesメモ：タブパネルのレイヤーでは、背景画像をアップロードできません。背景画像は、コンテナー、タブヘッダー、タブ項目の各レイヤーで使用できます。

3. タブのスタイルを設定するには

タブ要素とそのタブパネルは、ビルド画面上で個別に選択してスタイルを設定します。タブのコンテナー、タブヘッダー、タブ項目には、タブ要素の［スタイル］ペインからアクセスできます。

  1. ビルド画面でタブ要素を選択し、表示されるツールバーの三点リーダーをクリックして、右側に［プロパティ］ペインを開きます。
  2. ペイン上部の［スタイル］タブをクリックします。
  3. ［スタイル］ペインには、次のセクションが表示されます。
    1. ［レイアウトとタブの種類］
    2. ［コンテナー］
    3. ［タブヘッダー］
    4. ［タブ項目］
      各セクションをクリックして展開し、プロパティを設定します。
  4. タブ項目の状態別スタイルを設定するには
    1. ［タブ項目］セクションを展開します。
    2. ［デフォルト］、［ホバー］、または［アクティブ］をクリックして、状態を切り替えます。
    3. 各状態に必要なプロパティを個別に設定します。
  5. タブパネルのスタイルを設定するには
    1. ビルド画面で、タブヘッダーの下にあるコンテンツ領域（パネル領域）を直接クリックします。キャンバス上部のパンくずリストが更新され、［タブパネル］と表示されます。
    2. ［プロパティ］ペインが更新され、使用可能なプロパティを含むタブパネルの［スタイル］ペインが表示されます。各セクションをクリックして展開し、プロパティを設定します。
  6. 変更内容を保存するには、右上の［保存］をクリックします。
Notesメモ：［レイアウト］と［タブの種類］（方向と配置）は、タブ要素を選択したときに［スタイル］ペインの上部で設定します。これらは外観ではなくコンポーネントの構造を制御し、すべてのタブレイヤーの配置に影響します。

4. 適用可能な要素

タブのスタイルは、次の要素で設定できます。

  1. タブ
Notesメモ：タブパネル内に配置した要素は、タブ要素のスタイルとは別に、要素固有のプロパティを使用してスタイルを設定できます。

5. 注意点

  1. タブ項目の状態別スタイル設定：タブ項目のスタイルは、個別ではなく、すべての項目に一括で適用されます。ただし、デフォルト、ホバー、アクティブの各状態には、個別にスタイルを設定できます。
  2. 階層によって異なる間隔の用途：タブヘッダーでは、間隔によってタブ項目間のスペースを調整します。タブ項目では、1つのタブ項目内にあるアイコンとラベルテキストの間隔を調整します。

その他のプロパティ

  1. 配置
  2. レイアウト
  3. パディング
  4. マージン
  5. フォント
  6. 背景
  7. 角丸
  8. 枠線
  9. 影
  10. 不透明度
  11. 画像（塗りつぶし/Fit/Stretch)
  12. アイコン（サイズ、スタイル、色）
  13. 重ね順