レスポンシブオーサリングのレイアウトの調整

さまざまなフォームファクターのレスポンシブオーサリングを使用してページを作成する際は、レイアウトを調整して、小さいサイズでページのルックアンドフィールを向上させる方法を説明します。

始める前に

必要なロール：ui_builder_admin

このタスクについて

ページの使いやすさを向上させる方法は、ブレークポイント間でレイアウトを調整してコンポーネントを調整することです。レイアウトを調整するためのオプションは多数あります。この手順では、モバイルフォームファクターのタブコンポーネントのレイアウトを調整します。

プロパティペインのほとんどの列レイアウトオプションは、さまざまなフォームファクターに合わせて編集できます。ただし、次のオプションには、フォームファクター間でグローバルな値があります。

• 列数
• [下に列をスタック (ピクセル)] オプション
• [アクセシビリティ] のすべてのオプション

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または [作成] > [エクスペリエンス] を選択してエクスペリエンスを作成します。
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. レスポンシブオーサリングでページを最初から作成します。
   ページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
4. 上部にある [デスクトップフォームファクター (desktop form factor)] アイコンが選択されていることを確認します。
   
5. ステージで、[+ コンテンツを追加] を選択します。
6. [レイアウト] タブで、[単一列] を選択します。
7. タブコンポーネントを追加します。
   1. ステージの列の中央にある [+] アイコンを選択します。
   2. [コンポーネント] タブで、[タブ] コンポーネントを見つけて選択します。
   3. [保存] を選択します。
8. 構成パネルの [構成] タブで、[編集] アイコンを選択して、最初のタブの名前を編集します。
   
9. [タブラベル] に Tab 1 と入力します。
10. [タブ ID] に tab_1 と入力します。
11. [保存] を選択します。
12. 2 つ目のタブを追加します。
    1. [構成] タブで、[タブ] の横にある [+ 追加] を選択します。
    2. [空のコンテナから開始] を選択して [次へ] をクリックします。
    3. [タブラベル] に Tab 2 と入力します。
    4. [タブ ID] に [tab_2] が自動的に入力されていることを確認します。
       
    5. [作成] を選択します。
13. 手順 12 を繰り返して 3 番目のタブを追加し、12c でタブに Tab 3 という名前を付けます。
14. コンテンツツリーとページが正しいことを確認します。
    
15. [タブレットフォームファクター (tablet form factor)] アイコンを選択します。

    

    タブの間隔と位置は、タブレットの幅に合わせて適切に表示されます。

16. [モバイルフォームファクター (mobile form factor)] アイコンを選択します。

    

    小さいサイズでは、タブがより多くのスペースを取ります。

    

17. モバイルサイズに合わせてタブのレイアウトを変更します。
    1. コンテンツツリーで [列レイアウト 1] の下の [列 1] を選択します。
    2. 構成パネルの [方向] で、[行] アイコンを選択します。

       

    3. [保存] を選択します。
    ステージが自動的に更新され、タブ 1 が表示され、新しいドロップダウンメニューが表示されます。

    

18. [プレビュー] を選択します。
19. [More] を選択します。
    他の 2 つのタブを使用できます。

    

20. [デスクトップフォームファクター (desktop form factor)] アイコンと [タブレットフォームファクター (tablet form factor)] アイコンを選択して、[その他] ドロップダウンが表示されないことを確認します。
21. [X] を選択して [プレビュー] オーバーレイを閉じます。