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

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

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

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

さまざまなデバイスのバージョンでも同じことが起こります。画面の種類を切り替えると、グリッド コンテナーの幅は 980、640、480、320px になり、固定されたまま中央に配置されます。

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

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

その後、画面上で Grid Container の配置を選択します: 上、中央、下、またはストレッチ。デフォルトでは中央に配置されています。

デフォルトでは、すべての要素が Grid Container に接続され、原点は左上隅にあります。

場合によっては、要素をグリッドではなく画面にアタッチする必要があります。たとえば、すべての画面でロゴを左上隅に固定したいとします。

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

これで、ロゴは画面の左上隅に表示されます。

たとえば、右上隅に要素をアタッチする場合は、同じ方法を使用できます:「ウィンドウコンテナ」を選択し、要素座標の原点を次のように設定します:X-右、Y-上。

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

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

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

元の場所を変更するには、+Container パネルを開きます (デフォルトでは最小化されています)。

要素のサイズもパーセントで設定するように指定しました。したがって、ブラウザウィンドウに応じてサイズが変化する「流体」要素を作成できます。

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

ビデオは、ブロックの右側が常に画面の半分を占めていることを示しています。

デフォルトでは、すべての要素が Grid コンテナにアタッチされています。これは、デスクトップ上の幅 1200 ピクセルの長方形です。常に画面の中央に配置され、表示幅に関係なく同じサイズです。

Auto Scale を使用すると、Grid コンテナに属するすべての要素を、画面またはブラウザの幅に比例して拡大縮小できます。 Grid コンテナーは 1200 ピクセルの固定幅を占有しませんが、画面の全幅に拡張されます。追加されたすべての要素は、画面全体を占めるように比例して拡大されます。

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

この設定により、HD 画面を含むあらゆる解像度に合わせてサイトのデザインが調整されます。このオプションは、高解像度の画面で不要な空白を回避するだけでなく、デザイン ワークフローを高速化するのにも役立ちます。適応型レイアウトで時間を無駄にする必要はありません。

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

ブロックの高さは動的です。ブロックをスケーリングすると、幅に比例して変化します。

ボタン： ボタンをブラウザー ウィンドウの境界線から目的の距離に保ち、異なる解像度で拡大縮小しないようにするには、[ウィンドウ コンテナー] でボタンの座標を設定します。異なるコンテナへのバインディングを使用して、同じブロック内の一部の要素をスケーリングし、一部の要素をブラウザの端から一定の距離でサイズ変更せずに残します。

画像： 画像をアップロードするときは注意してください:大画面用にスケーリングしたときに品質が低下しないように、適切なサイズにする必要があります。

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

次の機能を備えたカバーを作成してみましょう。

—背景画像が画面全体を占めます。
— 見出し、小見出し、ボタンは常に中央に配置されます。
— 下矢印は画面の下部に固定されています。

取得したものを見てみましょう。背景画像が画面全体を占めています。見出し、テキスト、およびボタンは中央に配置されます。矢印は一番下。