Zero Block:レスポンシブデザイン

Zero Block にはコンテナと呼ばれる2つのワークスペースがある。グリッド領域はグリッドコンテナと呼ばれ、ウィンドウコンテナはブラウザ画面の境界を示す領域である。

グリッドコンテナはメインのワークスペースです。Tilda と同じグリッドを持っています。グリッドコンテナ内に要素を配置すると、画面サイズに関係なく12列のグリッド内に配置されます。

X軸上では、グリッドコンテナは常に中央に配置されます。

スクリーンの種類を切り替えると、グリッドコンテナの幅は980、640、480、320pxになり、固定されたまま中央に表示されます。

グリッドコンテナの高さは、アートボードの設定で設定するか、マウスでコンテナを上下にドラッグして設定できます。各解像度に固有のグリッドコンテナの高さを設定できます。グリッドコンテナの高さはブロックの高さです。

Zero Block が常に画面の高さの100％を占めるようにするには、ウィンドウコンテナの高さをグリッドコンテナの高さとは異なるものに設定する必要があります。そのため、アートボード設定でウィンドウコンテナの高さを100%に設定する必要があります。

その後、画面上のグリッドコンテナの配置を選択します：Top、Center、Bottom、またはStretch。デフォルトは中央揃えです。

デフォルトでは、すべての要素はグリッドコンテナに取り付けられ、原点は左上隅にあります。

グリッドにではなく、スクリーンにエレメントを取り付ける必要がある場合があります。例えば、ロゴをすべての画面で左上隅に固定したい場合です。

これを行うには、要素の設定パネルを開き、コンテナタイプをウィンドウコンテナに変更します。原点はウィンドウコンテナの左上に移動します。

これでロゴはどの画面でも左上に表示される。

例えば、右上の隅に要素を取り付けたい場合、同じ方法が使えます。「ウィンドウ・コンテナ」を選択し、要素の座標の原点を次のように設定します：X-右、Y-上。

ワークスペース内の各要素は、X軸とY軸の原点に対する位置を示す独自の座標を持っています。

要素を選択し、Tabキーを押して設定パネルを開くと、パネルの一番上に要素の座標が表示されます。

すべての要素のデフォルトの原点は、グリッドコンテナの左上隅です。しかし、右、上、左下など、矩形の9つの点のいずれかに移動して配置することができます。

原点の位置を変更するには、+Containerパネルを開きます（デフォルトでは最小化されています）。

要素のサイズもパーセントで設定できるようにしました。

例えば、画面の半分を常に黄色にしたいとします。これを行うには、シェイプを追加し、要素の設定パネルを開きます。コンテナタイプをウィンドウコンテナに設定し、幅と高さの単位をピクセルではなくパーセントに変更し、画面の幅を50%、画面の高さを100%に設定します。軸の値をパーセントで設定することもできます。要素が常に画面の右半分を占めるようにしたい場合は、X軸の値を50%に設定します。

ビデオを見ると、ブロックの右側が常に画面の半分を占めている。

デフォルトでは、すべての要素はGridコンテナにアタッチされます。これはデスクトップ上では幅1200ピクセルの長方形です。

Auto Scaleを使うと、Gridコンテナに属するすべての要素を、画面やブラウザの幅に比例して拡大縮小することができます。グリッド・コンテナは1200ピクセルの固定幅ではなく、画面の幅いっぱいに拡大されます。

自動スケーリングを有効にするには、アートボードの設定を開き、「グリッドコンテナをスケール」オプションを見つけます。Autoscale to Window Widthオプションを選択し、変更を保存します。

この設定は、HD画面を含むあらゆる解像度にサイトデザインを適応させます。このオプションは、高解像度画面での不要な空白スペースを避けるのに役立つだけでなく、デザインのワークフローをスピードアップします - 適応レイアウトに時間を費やす必要がなくなります。

必要に応じて、特定の画面幅の範囲のみを設定することで、すべての画面タイプに対して自動スケーリングを設定できます（例：モバイルデバイスのみ）。デスクトップ版のコンテナは1200pxから1920、4K、あるいは6Kにズームします。モバイル版は320pxから大きくなります。

ブロックの高さはダイナミックになります：ブロックを拡大縮小すると、幅に比例して変化します。

ボタンボタンをブラウザウィンドウの境界から希望の距離に保ち、異なる解像度で拡大縮小しないようにするには、ウィンドウコンテナで座標を設定します。異なるコンテナへのバインディングを使用して、同じブロック内の一部の要素を拡大縮小したり、ブラウザの端からの距離を固定したまま一部の要素のサイズを変更しないようにします。

画像： 画像をアップロードするときは注意してください。大きな画面用に拡大縮小しても画質が落ちないように、適切なサイズにする必要があります。

アイコンには.svg形式のベクター画像を使用し、背景画像や写真は控えめに読み込みましょう。大きな画像をアップロードすると、デフォルトでは横幅が1680ピクセルにリサイズされますが、アップロード時に歯車のアイコンをクリックすると、1920ピクセルの大きな画像をアップロードするオプションが表示されます。1920pxまでのアップロードを許可する」トグルスイッチを切り替えて、ファイルをアップロードしてください。1920px以上の画像は、ブラウザのパフォーマンスやウェブサイトの読み込み速度に影響するため、アップロードできません。

- 背景画像が画面全体を占める。
- 見出し、小見出し、ボタンが常に中央に配置される。
- 下向き矢印が画面下部に固定される。

背景画像は画面全体を占め、見出し、テキスト、ボタンは中央に配置され、矢印は一番下にある。