Webflow のホットキーを活用してワークフローの効率を最適化します。
デザイナーには、デザインプロセスを高速化するための多数のホットキーが用意されています。デザイナーのすべてのホットキーの完全なリストをすばやく表示するには、 シフト + /このリストは、 ヘルプメニュー デザイナー インターフェースの左下隅にあります。
このチュートリアルでは以下について説明します。
- 一般的なクイックコマンド
- 画面コマンド
- 左側のツールバーのショートカットコマンド
- 右側のタブのクイックコマンド
- コピーと貼り付けのコマンド
- 元に戻すとやり直しのコマンド
- さまざまなデバイスコマンドのオプションの表示
- スタイルパネルのコマンド
- その他のさまざまなクイックコマンド
- コマンドの検索
- 要素の移動コマンド
- Markdownの使用に特化したショートカット
- 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の場合) + 配置ボックスをタップ 細胞
グリッド子孫の整列について詳しく説明します。
Ewan Mak による最新の投稿 (すべてを見る)
- ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
- センタリングボックスの概要 - 2024年4月15日
- 将来の参照用にサイトを保存する - 2024年4月15日