Zero Block:レスポンシブデザイン
このガイドの第2部では、レスポンシブ・ウェブ・デザインに関連する、より複雑なZero Block の設定について説明します。Zero Block の主な設定と基本的な機能は、 ガイドの 最初の部分で確認しました 。
あなたはここにいる
下にスクロールして読む
コンテナ入門
Zero Block にはコンテナと呼ばれる2つのワークスペースがある。グリッド領域はグリッドコンテナと呼ばれ、ウィンドウコンテナはブラウザ画面の境界を示す領域である。
グリッドコンテナとそのX軸上の位置
グリッドコンテナはメインのワークスペースです。グリッドはTilda と同じ1200pxです。グリッドコンテナ内に要素を配置すると、画面サイズに関係なく12列のグリッド内に配置されます。
X軸上では、グリッドコンテナは常に中央に配置されます。
X軸上では、グリッドコンテナは常に中央に配置されます。
The same happens with the versions for different devices: when you switch between screen types, the width of the Grid Container becomes 980, 640, 480, 360px, it remains fixed and centered.
You can set the Grid Container's height in the Artboard Settings or by dragging the container up/down with your mouse. You can set a unique Grid Container's height for each resolution. The Grid Container's height is the block's height.
You can set the Grid Container's height in the Artboard Settings or by dragging the container up/down with your mouse. You can set a unique Grid Container's height for each resolution. The Grid Container's height is the block's height.
Y軸上のコンテナ同士の位置関係
Zero Block が常に画面の高さの100％を占めるようにするには、ウィンドウコンテナの高さをグリッドコンテナの高さとは異なるものに設定する必要があります。そのため、アートボード設定でウィンドウコンテナの高さを100%に設定する必要があります。
その後、画面上のグリッドコンテナの配置を選択します：Top、Center、Bottom、またはStretch。デフォルトは中央揃えです。
要素のコンテナと原点を変更する方法
コンテナの交換方法
デフォルトでは、すべての要素はグリッドコンテナに取り付けられ、原点は左上隅にあります。
グリッドにではなく、スクリーンにエレメントを取り付ける必要がある場合があります。例えば、ロゴをすべての画面で左上隅に固定したい場合です。
これを行うには、要素の設定パネルを開き、コンテナタイプをウィンドウコンテナに変更します。原点はウィンドウコンテナの左上に移動します。
これを行うには、要素の設定パネルを開き、コンテナタイプをウィンドウコンテナに変更します。原点はウィンドウコンテナの左上に移動します。
これでロゴはどの画面でも左上に表示される。
例えば、右上の隅に要素を取り付けたい場合、同じ方法が使えます。「ウィンドウ・コンテナ」を選択し、要素の座標の原点を次のように設定します：X-右、Y-上。
要素座標
ワークスペース内の各要素は、X軸とY軸の原点に対する位置を示す独自の座標を持っています。
要素を選択し、Tabキーを押して設定パネルを開くと、パネルの一番上に要素の座標が表示されます。
要素を選択し、Tabキーを押して設定パネルを開くと、パネルの一番上に要素の座標が表示されます。
すべての要素のデフォルトの原点は、グリッドコンテナの左上隅です。しかし、右上、左下など、矩形の9つの点のいずれかに移動して配置することができます。
原点の位置を変更するには、+Containerパネルを開きます（デフォルトでは最小化されています）。
原点を "Center Center "に設定すれば、さまざまなスクリーンに適応するバージョンを簡単に作成できる。
流体エレメントの作り方
要素のサイズもパーセントで設定できるようにしました。
例えば、画面の半分を常に黄色にしたいとします。これを行うには、シェイプを追加し、要素の設定パネルを開きます。コンテナタイプをウィンドウコンテナに設定し、幅と高さの単位をピクセルではなくパーセントに変更し、画面の幅を50%、画面の高さを100%に設定します。軸の値をパーセントで設定することもできます。要素が常に画面の右半分を占めるようにしたい場合は、X軸の値を50%に設定します。
例えば、画面の半分を常に黄色にしたいとします。これを行うには、シェイプを追加し、要素の設定パネルを開きます。コンテナタイプをウィンドウコンテナに設定し、幅と高さの単位をピクセルではなくパーセントに変更し、画面の幅を50%、画面の高さを100%に設定します。軸の値をパーセントで設定することもできます。要素が常に画面の右半分を占めるようにしたい場合は、X軸の値を50%に設定します。
ビデオを見ると、ブロックの右側が常に画面の半分を占めている。
黄色の矩形の設定：コンテナ-ウィンドウコンテナ、幅-50%、高さ-100%、X軸オフセット-50%。
例フルスクリーンカバーの作成方法
- 背景画像が画面全体を占める。
- 見出し、小見出し、ボタンが常に中央に配置される。
- 下向き矢印が画面下部に固定される。
1
アートボード設定で背景画像をアップロードし、ウィンドウコンテナの高さを100％に設定します。
2
見出し、小見出し、ボタンの原点を "Center" と "Center" に設定する。必要に応じて、Y軸オフセットも指定します。
3
矢印のコンテナをWindow Containerに設定し、原点を "Center "と "Bottom "に設定し、70px上に移動します。こうすると、ボタンは常にブラウザ・ウィンドウの下角より70px高くなります。
背景画像は画面全体を占め、見出し、テキスト、ボタンは中央に配置され、矢印は一番下にある。
画面の幅に合わせて要素を拡大縮小する
デフォルトでは、すべての要素はGridコンテナにアタッチされます。これはデスクトップ上では幅1200ピクセルの長方形です。
Auto Scaleを使うと、Gridコンテナに属するすべての要素を、画面やブラウザの幅に比例して拡大縮小することができます。グリッド・コンテナは1200ピクセルの固定幅ではなく、画面の幅いっぱいに拡大されます。
自動スケーリングを有効にするには、アートボード設定を開き、グリッドコンテナのスケールオプションを見つけます。Autoscale to Window Widthオプションを選択し、変更を保存します。
Auto Scaleを使うと、Gridコンテナに属するすべての要素を、画面やブラウザの幅に比例して拡大縮小することができます。グリッド・コンテナは1200ピクセルの固定幅ではなく、画面の幅いっぱいに拡大されます。
自動スケーリングを有効にするには、アートボード設定を開き、グリッドコンテナのスケールオプションを見つけます。Autoscale to Window Widthオプションを選択し、変更を保存します。
This setting will adapt the website design for any resolution, including HD screens. The option will help to avoid unnecessary empty space on high resolution screens, as well as speed up the design workflow — you won't have to waste time on the adaptive layout.
If necessary, you can set automatic scaling for all screen types or, e.g., only for mobile devices, by setting up only a certain screen width range. The container of the desktop version zooms from 1200px to 1920, 4K, or even 6K. The mobile version zooms from 360px.
The block height will be dynamic: it will change in proportion to the width when you scale the block.
If necessary, you can set automatic scaling for all screen types or, e.g., only for mobile devices, by setting up only a certain screen width range. The container of the desktop version zooms from 1200px to 1920, 4K, or even 6K. The mobile version zooms from 360px.
The block height will be dynamic: it will change in proportion to the width when you scale the block.
重要：このオプションは、Grid コンテナにアタッチされている要素に対してのみ機能し、Window コンテナにアタッチされているアイテムには影響しません。
自動スケーリングのいくつかの特徴
ボタンボタンをブラウザウィンドウの境界から希望の距離に保ち、異なる解像度で拡大縮小しないようにするには、ウィンドウコンテナで座標を設定します。異なるコンテナへのバインディングを使用して、同じブロック内の一部の要素を拡大縮小したり、ブラウザの端からの距離を固定したまま一部の要素のサイズを変更しないようにします。
画像：
アイコンは.svg形式のベクター画像を使用し、背景画像や写真は必要以上に大きくアップロードしてください。Tilda で、大きな画像をアップロードすると、デフォルトでは幅1680ピクセルにリサイズされますが、アップロード時に歯車のアイコンをクリックすると、幅1920pxの画像をアップロードするオプションが表示されます。1920px幅の画像アップロードを有効にする」トグルスイッチを切り替え、ファイルをアップロードしてください。1920pxを超えるサイズの画像は、ブラウザのパフォーマンスやウェブサイトの読み込み速度に影響するため、アップロードできません。
画像：
アイコンは.svg形式のベクター画像を使用し、背景画像や写真は必要以上に大きくアップロードしてください。Tilda で、大きな画像をアップロードすると、デフォルトでは幅1680ピクセルにリサイズされますが、アップロード時に歯車のアイコンをクリックすると、幅1920pxの画像をアップロードするオプションが表示されます。1920px幅の画像アップロードを有効にする」トグルスイッチを切り替え、ファイルをアップロードしてください。1920pxを超えるサイズの画像は、ブラウザのパフォーマンスやウェブサイトの読み込み速度に影響するため、アップロードできません。
