ヘルプセンター
ヘルプセンター
入門
Tildaの仕組み
新しいページを作成する
ページをコピーする
ページを転送する
ページを並べ替える
サイト設定
ドメイン名を購入する
ドメイン名を接続する
DNS を設定する
カスタム ドメイン エラーのトラブルシューティング
ホームページ
ヘッダーとフッター
ウェブサイトのフォントを設定する
コードのエクスポート
プロジェクト譲渡
無料の tilda.ws サブドメイン
色の設定
URL リダイレクトの作成
HTTPS のセットアップ
ページ フォルダ
ページ編集
ナビゲーション メニューを追加する
アンカーと内部リンク
モバイル デバイスでの表示
HTMLコードを埋め込む
Google マップを追加
多言語ウェブサイトの作成
オンラインで公開するための画像の準備
カバーを売り込む
ノンブレークスペース&ソフトハイフン
ページの公開
フィードバック ウィジェットを追加する
Facebookでプレビュー
コメント セクションを追加する
Instagram フィードを埋め込む
投稿一覧または目次ページ
オンラインストアと支払い
オンラインストアと支払い処理
オンライン ストアに商品を追加する
ショッピング カートの設定
製品の直販
支払いシステムの割り当て
Stripeを設定する
PayPal を設定する
2Checkoutを設定する
注文通知の送信
オンライン決済システムなしで販売する
単一の製品の販売
製品バリエーションを追加
配送オプション
補完製品
プロモーション コード (割引) を作成する
フォーム
データ キャプチャ フォームの設定
データ取得フォーム
Eメール
Google Sheets
MailChimp
Google フォーム
SendGrid
センディンブルー
ユニセンダー
アモCRM
パイプドライブ
Zoho CRM
トレッロ
Telegram
Slack
ザピア
メーラーライト
Notion
Salesforce
ハブスポット
ウェブフック
カスタム スクリプト
フォームのエラーを回避する
Monday.com
分析
ウェブサイト統計の追跡
グーグルアナリティクス
Googleタグマネージャー
目標達成率を提出する
SEO
ウェブサイトをオンラインで宣伝する
Zero Block
カスタム ブロックを作成する
レスポンシブ デザイン
キーボード ショートカット リスト
アニメーション
ステップバイステップのアニメーション
Figmaからインポート
メールキャンペーンビルダー
メールの作成、編集、および送信
プランと請求
予定
価格と支払い
サブスクリプションの自動更新をキャンセルする
お支払い確認
Tildaビジネスプランへのアップグレード
特別プラン
開発者向け
HTMLコードを埋め込む
コードのエクスポート
ウェブフック
Tilda API
WordPressプラグイン
チルダヘルプセンター
Zero Block:レスポンシブデザイン
ガイドの第2部は、レスポンシブWebデザインに関連するより複雑なZero Block設定に専念しています。Zero Blockの主な設定と基本機能は、ガイド
の最初の部分
で確認されました
。
あなたはここにいる!
下にスクロールして読む
入門
パート1
に移動
レスポンシブ デザイン
パート2
に移動
キーボードショートカット
リスト
に移動
コンテナの紹介
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サイトの読み込み速度に影響を与えるため、アップロードできません。
例: フルスクリーン カバーの作成方法
次の機能を備えたカバーを作成してみましょう。
—背景画像が画面全体を占めます。
— 見出し、小見出し、ボタンは常に中央に配置されます。
— 下矢印は画面の下部に固定されています。
1
アートボード設定で背景画像をアップロードし、ウィンドウ コンテナーの高さを 100% に設定します。
2
見出し、小見出し、ボタンの原点を「中央」と「中央」に設定します。必要に応じて、Y 軸オフセットも指定します。
3
矢印のコンテナをウィンドウコンテナに設定し、原点を「中央」と「下」に設定して、70px上に移動します。このようにして、ボタンは常にブラウザウィンドウの下隅よりも70px高くなります。
取得したものを見てみましょう。背景画像が画面全体を占めています。見出し、テキスト、およびボタンは中央に配置されます。矢印は一番下。
例を表示するには、ここをクリックしてください。
入門
パート1
に移動
レスポンシブ デザイン
パート2
に移動
キーボードショートカット
リスト
に移動
作成日
Tilda