Canvasの各設定について

キャンバス設定には、Webflowでのデザインプロセスを最適化し、効率と精度を向上させるためのさまざまなオプションとツールが用意されています。

上部バーのさまざまなデバイスに対応したブレイクポイントの横にあるキャンバスサイズをクリックすると、キャンバス設定を開くことができます。

‍

‍

X-ray mode

サイトのキャンバスをグレースケールで表示するもので、要素にマウスを合わせると各要素の境界線、余白、パディングが示され、要素がページ上でどのように配置されているかがより明確に表示されます。

X 線モードを有効にするには、Canvas settingを開いてX-ray modeにチェックするか、キーボードでCommand (Mac の場合) またはControl (Windows の場合) + Shift + Xを押します。

‍

‍

Ruler

キャンバス上の要素を正確に測定して配置できます。Rulerには 2 つのオプションがあります。

1. Pinned rulers- キャンバスの下部に静的な水平定規を追加します。水平測定の一定の基準点として使用できます。
2. Pinned ruler & crosshair- 水平定規と交差する動的な垂直線を追加します。これをキャンバス上で移動して、要素を水平方向と垂直方向に揃えることができます。

Rulerを有効にするには、Canvas settingsを開いてRulerを選択します。

無効にするには、[No ruler]を選択します。

キーボードのShift + Rを押して切り替えることもできます。

‍

Guide

Guide (grid overlaysと呼ばれることもあります) は、視覚的な配置ツールです。

ガイドには 2 つのオプションがあります。

1. Line guide — キャンバスに垂直線を追加します
2. Filled guide — キャンバスに陰影のある垂直線を追加します

有効にするには、Canvas settingsを開いてガイドオプションを選択します。

無効にするには、[No guide]を選択します。

キーボードのShift + Gを押してガイドを切り替えることもできます。

‍

Vision preview

Vision previewを使用すると、視覚障害を持つサイト訪問者がサイトをどのように表示するかをシミュレートし、デザインが色のみで重要な情報を伝達または示していないことを確認できます。

Vision previewの詳細については、こちらをご覧ください。

Text zoom preview

ブラウザまたはオペレーションシステムの設定でテキストズームを使用しているサイト訪問者に対してデザインがどのように見えるかをシミュレートできます。

テキスト ズーム プレビューの詳細については、こちらをご覧ください。

いかがでしたでしょうか。

Canvas settingsの各項目を使いこなして、Webflowでの制作に是非役立ててください。

‍