ヘルプセンター
ヘルプセンター
スタート
Tilda の仕組み
新しいページを作成する
ページをコピーする
ページを転送する
ページの並べ替え
サイト設定
ドメイン名の購入
ドメイン名の接続
DNSの設定
カスタムドメインのエラーのトラブルシューティング
ホームページ
ヘッダーとフッター
ウェブサイトのフォントを設定する
コード輸出
プロジェクト移管
無料tilda.ws サブドメイン
カラー設定
URLリダイレクトの作成
HTTPSの設定
ページフォルダー
ページ編集
ナビゲーション・メニューの追加
アンカーと内部リンク
モバイルデバイスでの視聴
HTMLコードを埋め込む
グーグルマップを追加
多言語ウェブサイトの作成
オンライン出版用の画像を準備する
カバーを投げる
ノン・ブレイキング・スペース&ソフト・ハイフン
ページ出版
フィードバック・ウィジェットを追加する
フェイスブックでプレビュー
コメント欄の追加
インスタグラムのフィードを埋め込む
投稿一覧またはインデックスページ
オンラインストアと支払い
オンラインストアと決済処理
オンラインストアに商品を追加する
ショッピングカートの設定
商品の直接販売
支払いシステムの割り当て
ストライプの設定
ペイパルの設定
2Checkoutの設定
注文通知の送信
オンライン決済システムなしで販売する
単一製品の販売
製品バリエーションの追加
配送オプション
補完製品
プロモコード(割引)を作成する
フォーム
データ取得フォームの設定
データ収集フォーム
電子メール
グーグル シート
メールチンプ
グーグルフォーム
センドグリッド
センディンブルー
セルジー
コンモ
パイプドライブ
Zoho CRM
トレロ
テレグラム
スラック
ザピア
メーラーライト
ノーティオン
セールスフォース
ハブスポット
ウェブフック
カスタムスクリプト
フォームのミスを避ける
マンデードットコム
アナリティクス
ウェブサイト統計の追跡
グーグル・アナリティクス
グーグルタグマネージャー
目標達成率の提出
SEO
オンライン・プロモーション
Zero Block
カスタムブロックの作成
レスポンシブデザイン
キーボードショートカット一覧
アニメーション
ステップ・バイ・ステップ・アニメーション
Figmaからのインポート
メールキャンペーンビルダー
電子メールの作成、編集、送信
プランと請求
プラン
価格と支払い
自動購読更新のキャンセル
入金確認
Tilda ビジネス・プランへのアップグレード
特別プラン
開発者向け
HTMLコードを埋め込む
コード輸出
ウェブフック
Tilda API
WordPressプラグイン
tilda ヘルプセンター
Zero Block:レスポンシブデザイン
このガイドの第2部では、レスポンシブ・ウェブ・デザインに関連する、より複雑なZero Block の設定について説明します。Zero Block の主な設定と基本的な機能は、
ガイドの
最初の
部分で確認しました
。
あなたはここにいる
下にスクロールして読む
はじめに
前編
こちらへ
レスポンシブデザイン
パート2
こちらへ
キーボードショートカット
リスト
こちらへ
コンテナ入門
Zero Block にはコンテナと呼ばれる2つのワークスペースがある。グリッド領域はグリッドコンテナと呼ばれ、ウィンドウコンテナはブラウザ画面の境界を示す領域である。
グリッドコンテナとそのX軸上の位置
グリッドコンテナはメインのワークスペースです。グリッドはTilda と同じ1200pxです。グリッドコンテナ内に要素を配置すると、画面サイズに関係なく12列のグリッド内に配置されます。
X軸上では、グリッドコンテナは常に中央に配置されます。
スクリーンの種類を切り替えると、グリッドコンテナの幅は980、640、480、320pxになり、固定されたまま中央に表示されます。
グリッドコンテナの高さは、アートボードの設定で設定するか、マウスでコンテナを上下にドラッグして設定できます。各解像度に固有のグリッドコンテナの高さを設定できます。グリッドコンテナの高さはブロックの高さです。
Y軸上のコンテナ同士の位置関係
Zero Block が常に画面の高さの100%を占めるようにするには、ウィンドウコンテナの高さをグリッドコンテナの高さとは異なるものに設定する必要があります。そのため、アートボード設定でウィンドウコンテナの高さを100%に設定する必要があります。
その後、画面上のグリッドコンテナの配置を選択します:Top、Center、Bottom、またはStretch。デフォルトは中央揃えです。
要素のコンテナと原点を変更する方法
コンテナの交換方法
デフォルトでは、すべての要素はグリッドコンテナに取り付けられ、原点は左上隅にあります。
グリッドにではなく、スクリーンにエレメントを取り付ける必要がある場合があります。例えば、ロゴをすべての画面で左上隅に固定したい場合です。
これを行うには、要素の設定パネルを開き、コンテナタイプをウィンドウコンテナに変更します。原点はウィンドウコンテナの左上に移動します。
これでロゴはどの画面でも左上に表示される。
例えば、右上の隅に要素を取り付けたい場合、同じ方法が使えます。「ウィンドウ・コンテナ」を選択し、要素の座標の原点を次のように設定します:X-右、Y-上。
要素座標
ワークスペース内の各要素は、X軸とY軸の原点に対する位置を示す独自の座標を持っています。
要素を選択し、Tabキーを押して設定パネルを開くと、パネルの一番上に要素の座標が表示されます。
すべての要素のデフォルトの原点は、グリッドコンテナの左上隅です。しかし、右上、左下など、矩形の9つの点のいずれかに移動して配置することができます。
原点の位置を変更するには、+Containerパネルを開きます(デフォルトでは最小化されています)。
原点を "Center Center "に設定すれば、さまざまなスクリーンに適応するバージョンを簡単に作成できる。
流体エレメントの作り方
要素のサイズもパーセントで設定できるようにしました。
例えば、画面の半分を常に黄色にしたいとします。これを行うには、シェイプを追加し、要素の設定パネルを開きます。コンテナタイプをウィンドウコンテナに設定し、幅と高さの単位をピクセルではなくパーセントに変更し、画面の幅を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オプションを選択し、変更を保存します。
この設定は、HD画面を含むあらゆる解像度にウェブサイトのデザインを適応させます。このオプションは、高解像度のスクリーンで不要な空白スペースを避けるのに役立つだけでなく、デザインのワークフローをスピードアップします - 適応レイアウトに時間を費やす必要がなくなります。
必要に応じて、特定のスクリーン幅の範囲のみを設定することで、すべてのスクリーンタイプに自動スケーリングを設定したり、モバイルデバイスのみに設定したりすることができます。デスクトップ版のコンテナは、1200pxから1920、4K、あるいは6Kまでズームします。モバイル版は320pxからズームします。
ブロックの高さはダイナミックになります:ブロックを拡大縮小すると、幅に比例して変化します。
重要:
このオプションは、Grid コンテナにアタッチされている要素に対してのみ機能し、Window コンテナにアタッチされているアイテムには影響しません。
自動スケーリングのいくつかの特徴
ボタン
ボタンをブラウザウィンドウの境界から希望の距離に保ち、異なる解像度で拡大縮小しないようにするには、ウィンドウコンテナで座標を設定します。異なるコンテナへのバインディングを使用して、同じブロック内の一部の要素を拡大縮小したり、ブラウザの端からの距離を固定したまま一部の要素のサイズを変更しないようにします。
画像:
アイコンは.svg形式のベクター画像を使用し、背景画像や写真は必要以上に大きくアップロードしてください。Tilda で、大きな画像をアップロードすると、デフォルトでは幅1680ピクセルにリサイズされますが、アップロード時に歯車のアイコンをクリックすると、幅1920pxの画像をアップロードするオプションが表示されます。1920px幅の画像アップロードを有効にする」トグルスイッチを切り替え、ファイルをアップロードしてください。1920pxを超えるサイズの画像は、ブラウザのパフォーマンスやウェブサイトの読み込み速度に影響するため、アップロードできません。
機能を説明する例
はじめに
前編
こちらへ
レスポンシブデザイン
パート2
こちらへ
キーボードショートカット
リスト
こちらへ
製造元
Tilda