Webflowのホットキー

デザイナーには、デザインプロセスを高速化するための多数のホットキーが用意されています。デザイナーのすべてのホットキーの完全なリストをすばやく表示するには、 シフト + /このリストは、 ヘルプメニュー デザイナー インターフェースの左下隅にあります。

このチュートリアルでは以下について説明します。

1. 一般的なクイックコマンド
2. 画面コマンド
3. 左側のツールバーのショートカットコマンド
4. 右側のタブのクイックコマンド
5. コピーと貼り付けのコマンド
6. 元に戻すとやり直しのコマンド
7. さまざまなデバイスコマンドのオプションの表示
8. スタイルパネルのコマンド
9. その他のさまざまなクイックコマンド
10. コマンドの検索
11. 要素の移動コマンド
12. Markdownの使用に特化したショートカット
13. Flex およびグリッドレイアウトに固有のキーボードショートカット

リマインダー： 面白いキーボードショートカットの提案があれば、 我々に教えてください追加することを検討します。

一般的なホットキー

• ホットキー参照を表示: シフト + /
• スナップショットとして保存: シフト + コマンド + S (Mac) または シフト + コントロール + S （ウィンドウズ）
• 要素の選択を解除または終了: ESC
• 要素を削除: 消去
• 公開ダイアログを表示: シフト+P
• エクスポートコードダイアログを表示: シフト+E
• 要素を編集: 入力

画面コマンド

• プレビューモード： シフト + コマンド + P (Mac) または シフト + コントロール + P （ウィンドウズ）
• ガイドオーバーレイ: シフト + コマンド + G (Mac) または シフト + コントロール + G （ウィンドウズ）
• 要素のエッジを表示: シフト + コマンド + E (Mac) または シフト + コントロール + E （ウィンドウズ）
• X線モード: Shift + コマンド + X (Mac) または シフト + コントロール + X （ウィンドウズ）

左側のツールバーのショートカット

• 追加パネルを表示: あ
• ナビゲーターパネルを表示: ず
• ページパネルを表示: ポ
• コンポーネント パネルを表示: シフト+A
• 選択した要素をコンポーネントに変換します。 コマンド + シフト + A (Mac) または コントロール + シフト + A （ウィンドウズ）
• アセットパネルを表示: J
• ネストされたすべてのページ フォルダーを展開/折りたたみます。 オプション + シフト + クリック (Mac) または 代替 + シフト + クリック （ウィンドウズ）
• すべてのページを展開/折りたたむ: オプション + クリック (Mac) または 代替 + クリック (Windows) 任意のページセクションヘッダー
• すべてのフォルダを展開/折りたたむ: オプション + クリック (Mac) または 代替 + クリック (Windows) 任意のフォルダ

右側のタブのコマンド

• スタイルパネルを表示: ス
• 要素設定パネルを表示: だ
• スタイル マネージャー パネルを表示: グ‍
• インタラクション パネルを表示: H

ホットキーのコピーと貼り付け

• コピー： コマンド + C (Mac) または コントロール + C （ウィンドウズ）
• カット： コマンド + X (Mac) または コントロール +X （ウィンドウズ）
• ペースト： コマンド + V (Mac) または コントロール +V （ウィンドウズ）
• 重複： コマンド + D (Mac) または コントロール + D （ウィンドウズ）
• 重複： オプション+引っ張る (Mac) または Alt + ドラッグ （ウィンドウズ）

元に戻すとやり直しのホットキー

• 元に戻す: コマンド + Z (Mac) または コントロール + Z （ウィンドウズ）
• やり直し: Shift + コマンド + Z (Mac) または Shift + コントロール + Z （ウィンドウズ）

デバイスビューのコマンド

• デスクトップ： 1
• タブレット： 2
• 電話（横向き）: 3
• 電話番号（縦）: 4

スタイルパネルのホットキー

• 余白/パディング（すべての辺）: Shiftキーを押しながらドラッグ
• 余白 / パディング (上 + 下または左 + 右): Altキーを押しながらドラッグ
• 選択した要素にクラスを追加します: コマンド + Enter (Mac) または コントロール + エンター （ウィンドウズ）
• 選択した要素の最後のクラスの名前を変更します: コマンド + シフト + エンター (Mac) または コントロール + シフト + エンター （ウィンドウズ）

…続きリストは元のコンテンツどおりに変更されません。(たとえば、Slider マスクを Slider ラッパーの外側に再配置すると)、親ノード全体 (たとえば、Slider ラッパー) が移動します。

Markdownクイックキー

これら マークダウン クイック キーを使用すると、キーボードのみを使用して、リッチ テキスト コンポーネントおよびリッチ テキスト フィールド内のテキストのスタイル設定 (強調、斜体、ハイパーリンクの追加など) やブロック要素 (タイトル、リストなど) を行うことができます。

• テキストを斜体にする: *文章* または _文章_
• 太字： **文章** または __文章__
• テキストを斜体および太字にする: ***文章*** または ___文章___
• ハイパーリンクを追加: [ハイパーリンクテキスト](https://www.url.com)
• 見出し1を挿入: # + 空間
• 見出し2を挿入: ## + 空間
• 見出し3を挿入: ### + 空間
• 見出し4を挿入: #### + 空間
• 見出し5を挿入: ##### + 空間
• 見出し6を挿入: ###### + 空間
• 引用を挿入: > + 空間
• 順序なし（つまり、箇条書き）リストを挿入します。 - + 空間‍
• 順序付き（番号付き）リストを挿入します。 1. + 空間

フレックスとグリッドレイアウトのクイックキー

次のクイック キーと配置ボックスを活用して、フレックスとグリッドの子孫を親ノード内ですばやく配置するオプションがあります。

フレックスクイックキー

• ジャスティフィケーション（justify-content）を次のように設定します。 間のスペース: 配置ボックスをダブルタップ 細胞 または 指示 (Macの場合) または コントロール (Windowsの場合) + 配置ボックスをタップ 細胞
• 配置（またはalign-items）を次のように設定します ストレッチ: オプション (Macの場合) または 代替 (Windowsの場合) + 配置ボックスをタップ 細胞

フレックス子孫の調整に関する詳細な情報を入手します。

グリッドクイックキー

• 位置揃え（またはjustify-items）を ストレッチ: 配置ボックスをダブルタップ 細胞 または 指示 (Macの場合) または コントロール (Windowsの場合) + タップ 整列ボックス 細胞
• 配置（またはalign-items）を次のように設定します ストレッチ: オプション (Macの場合) または 代替 (Windowsの場合) + 配置ボックスをタップ 細胞

グリッド子孫の整列について詳しく説明します。

‍