![](https://cdn.prod.website-files.com/5ffc142379487efdb0e5c552/6677915756953a6f9c526874_Canvas%E3%81%AE%E5%90%84%E8%A8%AD%E5%AE%9A%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6.webp)
キャンバス設定には、Webflowでのデザインプロセスを最適化し、効率と精度を向上させるためのさまざまなオプションとツールが用意されています。
上部バーのさまざまなデバイスに対応したブレイクポイントの横にあるキャンバスサイズをクリックすると、キャンバス設定を開くことができます。
サイトのキャンバスをグレースケールで表示するもので、要素にマウスを合わせると各要素の境界線、余白、パディングが示され、要素がページ上でどのように配置されているかがより明確に表示されます。
X 線モードを有効にするには、Canvas settingを開いてX-ray modeにチェックするか、キーボードでCommand (Mac の場合) またはControl (Windows の場合) + Shift + Xを押します。
キャンバス上の要素を正確に測定して配置できます。Rulerには 2 つのオプションがあります。
Rulerを有効にするには、Canvas settingsを開いてRulerを選択します。
無効にするには、[No ruler]を選択します。
キーボードのShift + Rを押して切り替えることもできます。
Guide (grid overlaysと呼ばれることもあります) は、視覚的な配置ツールです。
ガイドには 2 つのオプションがあります。
有効にするには、Canvas settingsを開いてガイドオプションを選択します。
無効にするには、[No guide]を選択します。
キーボードのShift + Gを押してガイドを切り替えることもできます。
Vision previewを使用すると、視覚障害を持つサイト訪問者がサイトをどのように表示するかをシミュレートし、デザインが色のみで重要な情報を伝達または示していないことを確認できます。
Vision previewの詳細については、こちらをご覧ください。
ブラウザまたはオペレーションシステムの設定でテキストズームを使用しているサイト訪問者に対してデザインがどのように見えるかをシミュレートできます。
テキスト ズーム プレビューの詳細については、こちらをご覧ください。
いかがでしたでしょうか。
Canvas settingsの各項目を使いこなして、Webflowでの制作に是非役立ててください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営