Tilda のオートレイアウト機能Zero Block,
の使い方に関するビデオチュートリアルをご覧になるか、以下のスクリーンショット付きの詳しい説明をお読みください。
の使い方に関するビデオチュートリアルをご覧になるか、以下のスクリーンショット付きの詳しい説明をお読みください。
オートレイアウトは、レスポンシブレイアウトを作成し、グループ内の要素を効果的に配置できるツールです。
ナビゲーションメニュー、リスト、ボタン、カードなどの複雑なデザイン要素を作成する際に特に便利です。コンテンツにどのような変更を加えても、レイアウトが自動的に適応するため、手動で調整する手間が省けます。
ナビゲーションメニュー、リスト、ボタン、カードなどの複雑なデザイン要素を作成する際に特に便利です。コンテンツにどのような変更を加えても、レイアウトが自動的に適応するため、手動で調整する手間が省けます。
オートレイアウトの使い方
自動レイアウトを有効にするには、グループ設定にアクセスします。グループ化された要素が「論理」グループではなく「オブジェクト」に設定されていることを確認してください。グループ]で[オブジェクト]オプションが選択されると、[自動レイアウト]セクションが下に表示されます。
Auto Layoutセクションで、Flex設定に「Auto」を選択します。自動レイアウトを有効にすると、要素がコンテンツやサイズの変更にどのように反応し、それに応じてグループ内で整列するかを制御するさまざまな設定にアクセスできるようになります。これらの設定を調べ、カスタマイズする方法を学びましょう。
ハグの設定を使ってコンテナの高さと幅を調整する
自動レイアウトを有効にすると、グループ化された要素を持つコンテナの幅と高さを管理できる2つの新しいグループ設定があります。
デフォルトでは、Hugオプションが選択されています。これはグループサイズを柔軟にし、コンテナ内の要素のサイズとそれらの間隔に基づいて調整します。
グループのサイズを手動で変更するか、カスタム幅またはカスタム高さを設定すると、Hugは自動的に固定に切り替わります。固定オプションは、グループサイズがカスタマイズされていることを意味し、要素間の間隔やサイズを変更しても影響を受けません。
デフォルトでは、Hugオプションが選択されています。これはグループサイズを柔軟にし、コンテナ内の要素のサイズとそれらの間隔に基づいて調整します。
グループのサイズを手動で変更するか、カスタム幅またはカスタム高さを設定すると、Hugは自動的に固定に切り替わります。固定オプションは、グループサイズがカスタマイズされていることを意味し、要素間の間隔やサイズを変更しても影響を受けません。
もう1つのHug設定があることにお気づきかもしれません。有効にすると、幅と高さの値を再計算し、要素のサイズとGap設定（間隔を制御する）で設定された値を考慮して、すべての要素がぴったり収まる最小値に設定します。要素のサイズを変更すると、Hugはそれに応じて自動的に幅や高さを調整します。
ディレクション
Directionの設定は、グループ内の要素の配置を制御します。ここには3つのオプションがあります：Horizontal（ 水平）、Vertical（垂直）、Wrap（次の行に移動）の3つです。
Horizontal（水平） 方向を選択すると、すべての要素がX軸に沿って整列します。アイコンやメニューアイテム、ボタンなどの要素を一列に並べる場合に最適です。
Horizontal（水平） 方向を選択すると、すべての要素がX軸に沿って整列します。アイコンやメニューアイテム、ボタンなどの要素を一列に並べる場合に最適です。
垂直方向を設定すると、グループ内のすべての要素がY軸に沿って整列されます。これは、リストやカード要素を1つずつ下に積み重ねてデザインする場合に特に便利です。
Wrap方向が選択されると、要素はコンテナの幅に基づいて行に整列します。要素の幅が大きすぎて収まらない場合は、次の行に移動します。これは、フォトギャラリーや複数行のタグクラウド、異なる画面解像度に対応するウェブサイトの作成に特に役立ちます。
ギャップ
Gap設定は、選択された方向に従って、グループ内の要素間の間隔を制御します。水平アライメントの場合はX軸のギャップを調整し、垂直アライメントの場合はY軸のギャップを変更します。Wrap 方向が設定されている場合、両方の軸のギャップを指定できます。
選択した方向で Hug オプションが有効になっている場合、Gap を調整するとコンテナの幅または高さに影響する可能性があることに注意してください。
選択した方向で Hug オプションが有効になっている場合、Gap を調整するとコンテナの幅または高さに影響する可能性があることに注意してください。
エレメントの整列
Align Elements 設定は、選択された方向に基づいて、グループ内の要素の配置を主軸に沿って垂直または水平に調整します。
例えば、Horizontal 方向が選択された場合、要素はコンテナの中央、上部、または下部に垂直に配置されます。逆に、垂直方向が選択された場合、要素はコンテナの中央、左側、または右側に水平に整列します。ただし、Hugオプションが有効で、すべての要素の幅または高さが同じ場合は、整列は変わりません。
例えば、Horizontal 方向が選択された場合、要素はコンテナの中央、上部、または下部に垂直に配置されます。逆に、垂直方向が選択された場合、要素はコンテナの中央、左側、または右側に水平に整列します。ただし、Hugオプションが有効で、すべての要素の幅または高さが同じ場合は、整列は変わりません。
コンテンツの正当性
この設定は、軸に沿った幅または高さで Hug オプションが選択されていない場合にのみ利用可能です。この設定は、軸に沿った幅または高さに「ハグ」オプションが選択されていない場合にのみ利用できます。
基本的な中央揃えまたは横揃えに加えて、スマート整列オプションも利用できます。
「間のスペース 」オプションは、グループ内の要素を均等に配置し、要素とコンテナの間に余白を作りません。
Space Around」はグループ内で要素を均等に配置し、要素からコンテナまでの距離が要素間の間隔の半分になるようにします。
「Space Evenly 」オプションはグループ内で要素を均等に配置し、要素からコンテナまでの距離が要素間の間隔と等しくなるようにします。
基本的な中央揃えまたは横揃えに加えて、スマート整列オプションも利用できます。
「間のスペース 」オプションは、グループ内の要素を均等に配置し、要素とコンテナの間に余白を作りません。
Space Around」はグループ内で要素を均等に配置し、要素からコンテナまでの距離が要素間の間隔の半分になるようにします。
「Space Evenly 」オプションはグループ内で要素を均等に配置し、要素からコンテナまでの距離が要素間の間隔と等しくなるようにします。
コンテンツを揃える
Align Content 設定は、グループ内の要素を整列させるもので、Wrap 方向が選択されていて、コンテンツが複数行ある場合にのみ利用できます。Hug が選択されていない限り、すべての行をコンテナに垂直に揃えます。
Align Content を使用すると、行を通常どおり中央または左右に揃えることができます。前の設定と同様に、スマート整列オプション-Space Between（コンテナからの間隔なしで要素を均等に配置）、Space Around（コンテナからの間隔が要素間の間隔の半分に等しい要素を均等に配置）、Space Evenly（コンテナからの間隔が要素間の間隔に等しい要素を均等に配置）のいずれかを選択することもできます。
Align Content を使用すると、行を通常どおり中央または左右に揃えることができます。前の設定と同様に、スマート整列オプション-Space Between（コンテナからの間隔なしで要素を均等に配置）、Space Around（コンテナからの間隔が要素間の間隔の半分に等しい要素を均等に配置）、Space Evenly（コンテナからの間隔が要素間の間隔に等しい要素を均等に配置）のいずれかを選択することもできます。
