HTML CSSで作成したレスポンシブ対応のテーブル

レスポンシブテーブルの練習で コードエディタ のショートカットをまとめた表を作成しました。

2025年05月09日追記(赤字部分)

5年前は、Adobe の Brackets を使用していましたが、現在は Visual Studio Code をメインに使用しているので修正予定です。

brackets ほど使用していませんが、vs code も使っていますので、bracketsのショートカットに対応する物があれば、追記していこうと思って項目を作っています。

現時点では、vs code のショートカットは、bracketsと同じ場合は「○」、調査していない場合は「ー」と付けただけの状態です。

「プラグイン」の列は、ショートカットを使用するのに必要なプラグインを明記しています。

以下が練習で作成したサンプルになります。

ショートカット (Brackets and VS code)
動作 brackets vs code プラグイン
Brackets vs code
END(Brackets and vs code)
移動 単語の先頭、最後に移動(前後の区切りに移動) Ctrl + (← →)
行頭、行末に移動(タグとスペースを飛び越える) Alt + (← →)
行頭、行末に移動(タグを飛び越える) Home or End
行に移動(数値を入力し、指定行に移動) Ctrl + G
行を上下に移動 Ctrl + Shift + (↑ ↓) Alt + (↑ ↓)
空タグに移動 Ctrl + Alt + (← →)
開始タグ、閉じタグの間を移動 Ctrl + Shift + T emmet
選択 すべて選択 Ctrl + A
行を選択 Ctrl + L
単語を選択(連続して押すことで、同じ単語を複数選択) Ctrl + B ( Ctrl + U で取消 )
同じ単語をすべて選択 Alt + F3
行頭、行末まで選択 Alt + Shift + (← →)
単形選択 Alt + 左クリック
領域を選択(連続して押すことで範囲拡大、縮小) Ctrl + Shift + Alt + B Shift + Alt + (← →) emmet
次のアイテム(要素、属性など)選択 Ctrl + Shift + . (ドット) emmet
前のアイテム(要素、属性など)選択 Ctrl + Shift + , (カンマ) emmet
追加 現在の業の上、下にカーソル追加 Alt + Shift + (↑ ↓)
行を追加 Ctrl + D Ctrl + Shift + Alt + (↑ ↓)
タグ 展開 全てのコード Alt + Shift + 1
現在のコード Ctrl + Alt + ]
折りたたみ 全てのコード Alt + 1
現在のコード Ctrl + Alt + [
タグを追加する Ctrl + Shift + A emmet
タグを更新する Ctrl + Shift + I emmet
タグを削除する Ctrl + Shift + K emmet
ライブプレビュー プレビュー実行 Ctrl + Alt + P
プレビューをリロードBrackets Ctrl + dhift + R
選択箇所をハイライト Ctrl + Shift + C
検索、置き換え 検索 開いているのページ Ctrl + F
ファイルを横断 Ctrl + Shift + F
置換 開いているのページ Ctrl + H
ファイルを横断 Ctrl +Shift + H
クイックオープン(ファイル検索) Ctrl + Shift + O
表示 サイドバー Ctrl + Alt + H Ctrl + B
フォントの拡大、縮小 Ctrl + ( + - )
フォントサイズを元に戻す Ctrl + 0
特殊文字一覧 Alt + C Special Html Characters
編集 クイック編集 Ctrl + E
Beautify Ctrl + Alt + B F1 + Beautifyを選択 Beautify Beautify
コメント コメント Ctrl + /
ブロックコメント Ctrl + shift + / Ctrl + shift + A
ファイル操作 ファイルを閉じる 編集中のファイル Ctrl + W
開いている全てのファイル Ctrl + Shift + W
編集中のファイルを切り替える Ctrl + (PageUp or PageDown)
^