ヘルプセンター

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

ガイドの2番目の部分は、レスポンシブWebデザインに関連するより複雑なZero Block設定に特化しています。Zero Blockの主な設定と基本機能は、ガイドの最初の部分で確認されました。

入門

コンテナの紹介

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

グリッドコンテナとその X 軸上の位置

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

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

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

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

Y 軸上のコンテナ間の位置

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

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

要素のコンテナーと原点を変更する方法

コンテナの変更方法

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

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

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

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

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

要素座標

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

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

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

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

原点を「センターセンター」に設定すると、さまざまな画面用のアダプティブバージョンを簡単に作成できます。

流体要素の作成方法

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

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

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

黄色の四角形の設定: コンテナ - ウィンドウコンテナ、幅 - 50%、高さ - 100%、X 軸オフセット - 50%。

画面の幅に合わせて要素をスケーリングする

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

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

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

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

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

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

重要な注意: このオプションは、Grid コンテナーにアタッチされている要素に対してのみ機能し、Window コンテナーにアタッチされている項目には影響しません。

自動スケーリングの一部の機能

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

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

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

例: フルスクリーンカバーの作成方法

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

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

アートボード設定で背景画像をアップロードし、ウィンドウコンテナーの高さを 100% に設定します。