レスポンシブマッシュアップ
レスポンシブマッシュアップでは、高度なレイアウト設定を使用して、コンテナ内のアイテムを整列できます。これらの設定は、カスケードスタイルシート (CSS) の Flexible Box レイアウトモジュール (Flexbox) に基づいています。
Flexbox ベースのコンテナを使用して、以下を実行できます。
• コンテナ内で複数のアイテムを垂直または水平に配置する
• 空きスペースに応じて、コンテナ内でアイテムを伸ばしたりラップしたりする
• コンテナの固定高さや固定幅を設定する
• マッシュアップ内に複数のコンテナがある場合、Flexbox の拡大および縮小率を定義する
• カスタム CSS 規則を使用してアイテムを配置する
• 「スタイルプロパティ」パネルを使用して、コンテナのルックアンドフィールをカスタマイズする
コンテナを行および列として使用してマッシュアップレイアウトを構造化できます。コンテナ内のアイテムは、空きスペースに応じて拡大または縮小します。マッシュアップの作成時に、「レイアウト」パネルを使用して、コンテナ内のアイテムの向き、整列、ストレッチ、ラップなどのオプションを制御できます。マッシュアップ内の各コンテナに特定のレイアウト規則を定義できます。
レスポンシブマッシュアップの作成
1. Composer で、 > の順にクリックします。「新規マッシュアップ」ウィンドウが開きます。
2. 「レスポンシブ」を選択し、「OK」をクリックします。
3. マッシュアップの名前を入力し、「保存」をクリックします。
マッシュアップへのコンテナの追加
デフォルトでは、空のレスポンシブマッシュアップにはコンテナが 1 つあります。マッシュアップにさらにコンテナを追加するには、以下の操作を行います。
1. マッシュアップ上でコンテナを選択します。
2. 「レイアウト」パネルの「コンテナを追加」セクションで、いずれかのオプションを選択し、選択したコンテナの左、右、上、または下にコンテナを追加します。
3. 必要に応じて手順 1 と 2 を繰り返して、マッシュアップにコンテナを追加します。
「スタイル継承」オプションで、マッシュアップ内の新規コンテナにスタイルを適用する方法を選択できます。
◦ 「デフォルト」 - 選択したマッシュアップスタイルテーマに基づいてスタイルを適用します。
◦ 「マージ」 - 現在のコンテナのスタイルを新しいレイアウトの親コンテナに適用します。
◦ 「複製」 - 選択したコンテナのスタイルプロパティを複製します。
4. 「保存」をクリックします。
コンテナへのアイテムの追加
マッシュアップレイアウトを作成した後、コンテナへのアイテムの追加を開始できます。アイテムは追加された順序で並べ替えられます。アイテムを追加するには、「ウィジェット」パネルからアイテムをドラッグし、マッシュアップ内の任意のコンテナ上にドロップします。
レスポンシブウィジェットと非レスポンシブウィジェットを同じコンテナに追加できます。レスポンシブウィジェットは、空のコンテナ内のすべての使用可能なスペースを埋めます。非レスポンシブウィジェットを追加すると、レスポンシブウィジェットはデフォルトサイズに設定されます。「レイアウト」パネルを使用して、コンテナ内のアイテムの整列を制御できます。アイテムの整列の詳細については、レスポンシブコンテナ内のアイテムの配列を参照してください。
静的な配置の使用
配置が「レスポンシブ」に設定されている場合、ウィジェットはコンテナレイアウト規則に従って整列します。配置が「静的」に設定されている場合、レスポンシブレイアウト規則は無効になり、コンテナ内の任意の場所にウィジェットを配置できます。ウィジェットを配置するには、手動でウィジェットをクリックしてドラッグするか、静的レイアウトで使用可能な整列コマンドを使用します。
コンテナサイズのカスタマイズ
次のいずれかのオプションを使用して、マッシュアップ内の各コンテナのサイズを制御できます。
• 「レスポンシブ」 - コンテナをレスポンシブにします。
• 「固定サイズ」 - コンテナに固定サイズを指定します。
• 「サイズ範囲」 - 最小値と最大値で定義された範囲に従って、コンテナサイズを設定します。