STUDIOの公式＆非公式キーボードショートカット一覧
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 |
| グループ内の複数ボックスを順序変更 | ⌘ + 矢印 |
| 固定・絶対位置ボックスの移動距離を 10px に | Shift + 矢印 |
複数選択を使いこなすと、同じ状態を複数の要素に一回の操作で適用できるようになり、作業の効率が上がります。
また、親ボックスや子ボックスをキーボードから選択できるようになれば、レイヤーを開閉せずとも目的のレイヤーにたどり着けます。
エディタ操作
| 実行内容 | ショートカット |
|---|---|
| 戻る | ⌘ + Z |
| 進む | ⌘ + shift + Z |
| ズームイン/アウト | + / - |
| 100%表示 | ⌘ + 0 |
| コンテンツ編集モードに入る／出る | C |
何か意図しない操作をしてしまった時も、「戻る」のショートカットを使えば瞬時に一つ前の状態に戻れます。
100%表示では、実際のウェブサイトと同じ大きさでキャンバスを表示でき、見え方による印象の違いを抑えられます。
非公式のショートカット一覧
以下のショートカットは、上記の公式ショートカット一覧には載っていないものの、私が動作することを確認しているショートカットです。
ショートカットになりそうなキーをひたすら勘で押してみて発見したものです。
ボックス編集
| 実行内容 | ショートカット |
|---|---|
| 複製 | ⌘ + D |
| ドラッグ＆ドロップ先に複製 | option (alt) + ドラッグ＆ドロップ |
⌘ + D で複製
option (alt) + ドラッグ＆ドロップで複製
パネル操作
各パネルを開けます。該当パネルが開いている状態でショートカットを押すと、パネルが閉じます。
| 実行内容 | ショートカット |
|---|---|
| ページパネルを開く | ⌘ + 1 |
| レイヤーパネルを開く | ⌘ + 2 |
| スタイルパネルを開く | ⌘ + 3 |
| 追加パネルを開く | ⌘ + 4 |
| ボックス設定パネルを開く | ⌘ + 5 |
※動画収録後にスタイルパネルと追加パネルのショートカットが入れ替わりましたので操作にズレが生じています
レイヤー操作
このショートカットを知っているといないとでは作業効率がかなり変わるはず…！
レイヤーのトグル（>）を、option キーを押しながらクリックすると、配下のレイヤーが全開閉されます。
| 実行内容 | ショートカット |
|---|---|
| レイヤーを全開閉する | option (alt) + クリック |
ページ操作
エディタ上で、今開いているページの直前に開いたページに戻ったり、戻った後に進めます。
| 実行内容 | ショートカット |
|---|---|
| 前みたページに戻る | ⌘ + ← |
| 次のページに進む | ⌘ + → |
リッチテキスト操作
CMS の記事本文やリッチテキストボックス内で使えるショートカットです。下記のショートカットのほか、マークダウン記法も使えます。
| 実行内容 | ショートカット |
|---|---|
| 選択範囲を太字にする | ⌘ + B |
| 選択範囲を斜体にする | ⌘ + I |
| 選択範囲に下線をつける | ⌘ + U |
| 選択範囲に取り消し線をつける | ⌘ + shift + S |
| 選択範囲をリンクにする | ⌘ + K |
もし他にも「こんなショートカットあるよ」の情報がありましたら、ぜひご連絡ください！
Special Thanks:
いっちゃさん、右パネル＆レイヤー全開閉の情報提供ありがとうございました 🙏
おたろうさん、option (alt) + ドラッグ＆ドロップで複製できる情報提供ありがとうございました 🙏
Discussion