オブジェクト：タブ

概要 #

タブオブジェクトは、複数のコンテンツをひとつの領域にまとめ、切り替えて表示できる便利なパーツです。
情報量の多いページでも、分類・整理して表示できるため、閲覧者のストレスを軽減し、コンパクトで見やすい構成にすることができます。
タブ名・アイコン・デザインは自由にカスタマイズでき、プロフィール情報や商品説明、設定項目など、さまざまな用途で活用できます。

タブの説明 #

タブオブジェクトの追加方法 #

タブオブジェクトは、複数の情報をひとつのエリアにまとめ、切り替えて表示できるパーツです。コンテンツの整理や比較、分類に適しています。

1. 左側の「オブジェクト」セクションから 「タブ」（カレンダーのようなアイコン）を選びます。
2. 「タブ」ボタンをクリック、またはドラッグ＆ドロップでキャンバス上に配置します。
3. 配置後、タブが初期状態で2つ以上表示されます。各タブに対して以下の編集が可能です：
   • タブ名の編集：任意のラベル名に変更できます（例：「概要」「仕様」「FAQ」など）
   • 内容の追加：それぞれのタブ内にテキストや画像などのオブジェクトを配置可能
   • タブの追加・削除：自由に増減できます

タブを使うことで、ページの情報量を整理しつつ、ユーザーにとっても閲覧しやすい構成を実現できます。

  #

タブの選択画面の説明 #

タブ選択画面について #

「タブ」オブジェクトをキャンバスにドラッグ＆ドロップすると、自動的に「タブ選択」画面が表示されます。ここでは、用途に応じてデザイン済みのタブスタイルを選択できます。

• 左側：「すべて」や「タブ」カテゴリで絞り込みが可能
• 中央エリア： 以下のようなスタイルから選択できます：
  • タブ（アイコンスタイル）：タブにアイコンが付属
  • タブ（アンダーライン）：下線付きで切り替え表示
  • タブ（スタイリッシュ1・2）：影付きや枠デザインなど装飾重視
  • タブ（デフォルトスタイル1・2）：最もシンプルで汎用性が高い
• 選び方： 任意のデザインをクリックするだけで、対応するタブコンポーネントがキャンバスに追加されます。

この画面を利用することで、タブの外観をすばやく決定でき、情報整理やレイアウト設計が効率化されます。

タブの設定項目説明 #

タブオブジェクトの設定項目について #

タブオブジェクトを選択すると、右側の設定パネルで表示スタイルや内容を編集できます。主な項目は以下の通りです。

1. タイトル
   タブ名とアイコンの設定ができます。「+項目を追加」をクリックすると新しい項目を追加できます。
   編集ボタン（✎）で内容の修正、ゴミ箱アイコンで削除が可能です。
2. メインカラー
   選択中のタブのカラーや強調表示部分の色を設定します。
   ブランドカラーやデザインに合わせた色調整が可能です（例：#1C64F2）。
3. タブフォント
   タブのテキストに使用するフォントを指定できます。サイト全体のデザインに合わせて統一感を持たせる際に便利です。

この設定を活用することで、見た目と操作性の両面で、ユーザーにとって使いやすく魅力的なタブインターフェースを構築できます。

操作説明 #

タブを挿入したい位置へドラッグ&ドロップで貼り付けることができます。

タブ選択 #

タブのスタイルを選択します。

タブを選択すると右上にサブメニューが表示されます。

1. クリックしながらドラッグ&ドロップで任意の場所へ移動できます。
2. タブを複製します。
3. タブを削除します。
4. ブロックに保存します。

タブ #

1. 各項目の順序を変更したり内容の編集ができます。
2. タブのメインカラーを設定します。
3. タブのサブカラーを設定します。
4. タブのフォントを設定します。

アイコン #

• アイコンを選択します。
• アイコンカラーを選択します。
• アイコンのサイズを設定します。

テキスト #

1. サンプルテキストからスタイルを選択します。
2. フォント形式を変更します。
3. フォントの種類を変更します。
4. テキストカラーを変更します。
5. テキスト背景カラーを変更します。
6. フォントサイズを変更します。
7. 行間を変更します。
8. 文字間を変更します。
9. 配置を変更します。
10. 全ての書式を初期状態に戻します。

デザイン #

デザインの項目を変更することでタブのデザインを変更できます。

1. 背景を画像、単色、グラデーションの3つから選択できます。
2. 背景設定で選択した背景情報がレイヤーとして表示されます。
3. ボーダー設定はなし、実線、点線の3つから選択でき、線の太さを設定することができます。
4. ボーダーコーナーはボーダーの丸みを設定できます。
5. シャドウ設定ではインナー、ドロップ、テキストの3つから選択でき、それぞれシャドウの詳細な設定ができます。

レイアウト #

レイアウトの項目を変更することでタブのレイアウトを変更できます。

1. Margin & Paddingの設定をすることで余白の設定ができます。
2. 横幅を固定から、最小、最大とそれぞれ設定できます。
3. 高さを固定から、最小、最大とそれぞれ設定できます。
4. 水平方向の項目を変更することでタブの水平方向の配置を変更できます。
5. 垂直方向の項目を変更することでタブの垂直方向の配置を変更できます。
6. Z-indexを設定することでタブの重なり順を設定することができます。

表示設定 #

表示設定を変更することでタブを表示したり非表示にする条件を設定できます。

1. レスポンシブの項目を変更することでデスクトップのみやモバイルのみに表示することができます。
2. アンカーリンクを設定することができます。
3. ログインユーザーのみ表示したり、さらにタグで絞りこんで条件表示することができます。

その他 #

1. CSS IDを設定できます。
2. CSS Classを設定できます。
3. メモを書いておくことができます。