レスポンシブオーサリングのブレークポイントの作成

レスポンシブオーサリングのカスタムブレークポイントを作成して、さまざまなフォームファクターにおけるページのルックアンドフィールを制御する方法について説明します。

始める前に

必要なロール：ui_builder_admin

このタスクについて

UI ビルダー は現在、次の 3 つのデフォルトフォームファクターを提供しています。

• デスクトップ (1281 ピクセル以上)
• タブレット (1280 ピクセル以下)
• モバイル (500 ピクセル以下)

最大 3 つのブレークポイントを追加します。たとえば、モバイルデバイスのデフォルトのフォームファクターは 500 ピクセル以下ですが、360 ピクセルのブレークポイントが必要な場合があります。

注:

カスタムブレークポイントは範囲を表します。800 ピクセルでブレークポイントを作成すると、すべての変更は、幅が新しいサイズ以下のデバイスに適用されます。たとえば、幅が 750 ピクセルの画面で開いたページは、750 ピクセルの別のカスタムブレークポイントがない限り、800 ピクセルの設定 (プロパティとスタイル) を使用します。

手順

1. 次のように移動する。 All (すべて) > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または [作成] > [エクスペリエンス] を選択してエクスペリエンスを作成します。
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. レスポンシブオーサリングで最初から作成した既存のページを開くか、レスポンシブオーサリングで最初からページを作成します。
   ページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
4. 3 つの [フォームファクター] アイコンの横にある [メニュー] アイコンを選択します。
   
5. [+ ブレークポイントを追加] を選択します。
   
6. 幅 (単位：ピクセル) を入力し、[追加] を選択します。
   
   新しいブレークポイントが保存され、[フォームファクター (form factor)] アイコンとして表示されます。

   

   ページをビルドする際、いずれかの [フォームファクター (form factor)] アイコンを選択して、そのサイズでページを表示および編集します。

7. カスタムブレークポイントを編集または削除するには、[メニュー] アイコンを選択し、ブレークポイント名をポイントして、[編集] または [削除] アイコンを選択します。
   

   注:

   デフォルトのフォームファクター (デスクトップ、タブレット、モバイル) は編集または削除できません。