可変レイアウトを使用して要素を配置する

可変レイアウトを使用すると、ページのサイズや向きに応じて要素の位置関係と比率を自動的に調整して配置できます。レスポンシブドキュメントには特に可変レイアウトによるメリットがありますが、可変レイアウトは固定サイズの要素にも使用できます。

Google Web Designer ではさまざまな手法を使用して、可変レイアウトを作成できます。

割合に基づく値

要素のサイズと位置をピクセル単位ではなく割合で設定することで、要素のサイズと位置を比例した状態に保ち、相対的に整列させることができます。

ピクセルの代わりに割合を使用するには、[プロパティ] パネルのフィールドで [px] をクリックし、プルダウンから [%] を選択します。

位置とサイズの値をすべて割合に変換するには、[パーセントを使用] ボタンをクリックします。

割合に基づく値とピクセル値をドキュメント内で組み合わせて使用することもできます。

アンカーを使用すると、要素やコンテナのサイズ、パディング、枠線の幅が変更された場合でも、コンテナ内の要素を永続的に整列させることができます。設定した位置または変換のプロパティによって、アンカーポイントから要素がオフセットされます。

水平アンカリングモードと垂直アンカリングモードを選択します。デフォルトは「左上」です。

モード	効果
左	要素の左端がコンテナの左端に揃えられます。
中央	要素の水平方向の中心がコンテナの水平方向の中心に揃えられます。
右	要素の右端がコンテナの右端に揃えられます。

モード	効果
上	要素の上端がコンテナの上端に揃えられます。
中間	要素の垂直方向の中央がコンテナの垂直方向の中央に揃えられます。
下	要素の下端がコンテナの下端に揃えられます。

選択ツールが有効な場合は、[プロパティ] パネルまたはツールオプションバーでアンカリングモードを設定できます。

Flexbox（CSS フレキシブルボックスレイアウトモジュール）は、コンテナ内のアイテムを行または列内に柔軟に配置するための方法です。それぞれの項目は、指定した順序と間隔を維持しながらコンテナスペースを最適化するために、拡大または縮小できます。

Flexbox を使用し、[レスポンシブ] パネルの [Flexbox] タブで Flexbox のプロパティを構成します。Flexbox の使用について詳細をご確認ください。

改善できる点がありましたらお聞かせください。