💠

STUDIOの公式&非公式キーボードショートカット一覧

2022/08/11に公開約2,800字

This article is also available in English (dev.to)

STUDIOのエディタでは、キーボードショートカットが有効になっています。
キーボードショートカットを活用すると、マウスやトラックパッド操作を減らすことができ、ページを効率良く構築できます。
この記事では、公式&非公式のショートカットをご紹介します。

公式ショートカット一覧

STUDIO Uのショートカット一覧に掲載されているショートカットは下記の通りです。

ボックス編集

エディタのキャンバスやレイヤーパネル上で動作します。

実行内容 ショートカット
コピー ⌘ + C
カット ⌘ + X
ペースト ⌘ + V
削除 delete
グループ化 ⌘ + G
グループ解除 ⌘ + shift + G
リスト化 ⌘ + L
シンボル化 ⌘ + J

ボックス選択

エディタのキャンバスやレイヤーパネル上で何かの要素を選択している時に動作します。

実行内容 ショートカット
複数選択 shift + クリック
子ボックスを選択 return (enter)
親ボックスを選択 esc
次のボックスを選択 tab
前のボックスを選択 shift + tab

複数選択を使いこなすと、同じ状態を複数の要素に一回の操作で適用できるようになり、作業の効率が上がります。
また、親ボックスや子ボックスをキーボードから選択できるようになれば、レイヤーを開閉せずとも目的のレイヤーにたどり着けます。

エディタ操作

実行内容 ショートカット
戻る ⌘ + Z
進む ⌘ + shift + Z
ズームイン/アウト + / -
100%表示 ⌘ + 0
コンテンツ編集モードに入る/出る C

何か意図しない操作をしてしまった時も、「戻る」のショートカットを使えば瞬時に一つ前の状態に戻れます。
100%表示では、実際のウェブサイトと同じ大きさでキャンバスを表示でき、見え方による印象の違いを抑えられます。

非公式のショートカット一覧

以下のショートカットは、上記の公式ショートカット一覧には載っていないものの、私が動作することを確認しているショートカットです。
ショートカットになりそうなキーをひたすら勘で押してみて発見したものです。

ボックス編集

実行内容 ショートカット
複製 ⌘ + D
ドラッグ&ドロップ先に複製 option (alt) + ドラッグ&ドロップ

⌘ + Dで複製

⌘ + Dを実行している動画

option (alt) + ドラッグ&ドロップで複製

option (alt) + ドラッグ&ドロップで複製している動画

パネル操作

各パネルを開けます。該当パネルが開いている状態でショートカットを押すと、パネルが閉じます。

実行内容 ショートカット
ページパネルを開く ⌘ + 1
レイヤーパネルを開く ⌘ + 2
追加パネルを開く ⌘ + 3
スタイルパネルを開く ⌘ + 4
ボックス設定パネルを開く ⌘ + 5

パネル操作を実行している動画

レイヤー操作

このショートカットを知っているといないとでは作業効率がかなり変わるはず…!
レイヤーのトグル(>)を、optionキーを押しながらクリックすると、配下のレイヤーが全開閉されます。

実行内容 ショートカット
レイヤーを全開閉する option (alt) + クリック

レイヤー操作を実行している動画

ページ操作

エディタ上で、今開いているページの直前に開いたページに戻ったり、戻った後に進めます。

実行内容 ショートカット
前みたページに戻る ⌘ + ←
次のページに進む ⌘ + →

リッチテキスト操作

CMSの記事本文やリッチテキストボックス内で使えるショートカットです。下記のショートカットのほか、マークダウン記法も使えます。

実行内容 ショートカット
選択範囲を太字にする ⌘ + B
選択範囲を斜体にする ⌘ + I
選択範囲に下線をつける ⌘ + U
選択範囲に取り消し線をつける ⌘ + shift + S
選択範囲をリンクにする ⌘ + K

もし他にも「こんなショートカットあるよ」の情報がありましたら、ぜひご連絡ください!

Special Thanks:
いっちゃさん、右パネル&レイヤー全開閉の情報提供ありがとうございました🙏
おたろうさん、option (alt) + ドラッグ&ドロップで複製できる情報提供ありがとうございました🙏

GitHubで編集を提案

Discussion

ログインするとコメントできます