コンテナ要素

コンテナ要素は多くのことを達成するために使用できます。

• 要素を水平に配置する
• 追加の背景や影を追加する
• フルブリードの背景色または画像

要素を水平に配置する

列を追加して幅の比率を設定する

キャンバスにコンテナを追加すると、データ タブには1つの列しかないことがわかります。

列 をクリックして、さらに列を追加します。そして、幅の比率 を調整して、希望のレイアウトを作成します。スクリーンショットでは、左の列が右の列の2倍の幅になるように2:1の比率を設定しています。

常に水平

列は水平に配置されていますが、モバイル画面では、狭い画面に適応するために縦に配置されます。

ほとんどの場合、これは問題ありません。しかし、列を常に水平に配置したい場合は、コンテンツ タブをクリックし、タイプ フィールドを確認します。常に水平 を選択します。これにより、画面サイズに関係なく、コンテンツが水平に配置されます。

自動列幅

幅の比率 についての簡単な注意点として、幅の比率 に設定でき、列の幅が列内の要素に合わせて縮小されることがあります。例えば、アバターとモットーを設定したい場合に便利です。

単一カラム

コンテナに単一のカラムしかない場合でも、それは有用です。例えば、追加の背景や追加のボックスシャドウを加えることができます。

フルブリード背景

フルブリード背景はコンテナを使用して実現できます。形状 -> 幅を全画面幅に設定するだけです。コンテナは画面の左から右までの端に広がります。

しかし、コンテナ内のコンテンツはページ要素の幅内に制約されます。コンテンツ -> 内側の幅を100%に設定することで、コンテンツをコンテナの端まで広げることができます。

フルブリード画像

上記のスクリーンショットが示すように、画像要素の形状 -> 幅をカバーに設定すると、画像要素はコンテナの端まで広がり、コンテナやカラムのパディングやギャップを無視します。