webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
 Sublime Text 3 ショートカットキー一覧(Windows)-1【基本版】 eyecatch画像

Sublime Text 3 ショートカットキー一覧(Windows)-1【基本版】

rss

※WEBコーディングの備忘録です。

コーディングエディタはいろいろ使ってきましたが、「Sublime Text」に落ち着いて早2年です。
コード補完機能もさることながら、ショートカットキーでの選択機能が何より使いやすい!
コーディングのスピードがとっても早くなります。

sublime3のイメージ画像


Emmetプラグインも併せてインストールした環境での、
使用頻度の高いショートカットキー覚書まとめです。
本記事【基本版】に続き、Sublime Text 3 ショートカットキー一覧(Windows)- 2【追加プラグイン版】も別記事で一覧にしています。

※Windowsショートカットキーです。
 


 


 

Sublime Text 3 ショートカットキー一覧【デフォルト+Emmet】

 

Sublime Text 3 デフォルト「ショートカットキー」一覧 

インデント
Ctrl+] & Ctrl+[ カーソルのある行のインデントをプラス & マイナス
Ctrl+Shift+V ペーストした際に移動先のインデントに合わせる
ペースト
Ctrl+K ⇒ Ctrl+V (Ctrl+Kを押した後にCtrl+V)
クリップボードの履歴からのペースト(15個まで記憶)
タグ補完
Alt+. 閉じタグ自動挿入
Alt+Shift+W タグで囲む(defaultでは<p>それを任意のタグに)
行選択
Ctrl+L 行全体を選択、もう一度押すと下の行を追加選択
Ctrl+Shift+L 複数行のそれぞれ各行を選択(各行にカーソルがある状態に)
全てに「”」をふるなどに便利
Ctrl+Shift+K 行全体を削除
Ctrl+Shift+D  行の複製
Ctrl+Enter 行の下に空行挿入
Ctrl+Shift+J 連続する同じインデントの行を全選択
Ctrl+Shift+↑& ↓ 行全体を移動
箇所選択
Ctrl+Shift+A タグの内部(子孫)を選択
Ctrl+, 選択を外側タグまで拡大(親要素全選択)、徐々に拡大
Ctrl+Shift+Space スコープの選択
クオートやタグ・ブラケットの単位で選択、徐々に拡大
Ctrl+Shift+M ブラケット(かっこ)単位で選択
Ctrl+Shift+←&→ 箇所選択拡大
Ctrl+D 同じ文字列を選択 一つずつ増えていく
Ctrl+K (Ctrl+D時) 一つスキップ
Ctrl+U 直前の操作を戻す(Ctrl+D時一つ戻る)
Alt+F3 同じ文字列を一気に選択
Ctrl+ドラッグ Ctrlを押しながらドラッグ選択中に
「”」や「’」や「(」を入力で、
選択した部分を「""」や「’」や「()」で囲む
オートコンプリート補完選択
タブ ドロップダウンの補完候補から選択
検索・置換
Crtl+F・Crtl+H 検索・置換
コメントアウト
Ctrl+/ PHP・JSでは「//」、HTMLでは「<!-- -->」
Ctrl+Shift+/ 「/* */」
 

Sublime Text 3 – Emmetプラグイン「ショートカットキー」一覧 

コード生成
Ctrl+E ※1 省略cordからコード展開 ※1
<img>タグ内で Ctrl+I 自動で画像のサイズ補完
<img src="demo.jpg" alt="" />等画像パスが入ったタグ内で
移動
Ctrl+Alt+←&→ 前&次の編集ポイントへ移動
その他
Shift+Ctrl+: カーソルのある開始タグと終了タグを削除
Ctrl+Alt+S Sublime画面のスクリーンショット

※1の「Ctrl+E」コード展開(タグ補完)は、
下記の③Emmetプラグイン Ctrl+Eのショートカットキー一覧 参照




 Sublime Text 3 – Emmetプラグイン「Ctrl+Eの省略コード」一覧

下記省略コードを入力後「Ctrl+E」でタグが展開され補完される。

タグ補完
省略コード タグ補完展開
! <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
ul+ <ul>
    <li></li>
</ul>
dl+ <dl>
    <dt></dt>
    <dd></dd>
</dl>
table+ <table>
    <tr>
        <td></td>
    </tr>
</table>
tr+ <tr>
    <td></td>
</tr>
Multiplication: *
ul>li*3
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
ナンバリング$

ul>li.item$*3
ul>li.item$$$*3
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>
ID and CLASS:

form#search.wide
p.class1.class2.class3
<form id="search" class="wide"></form>
<p class="class1 class2 class3"></p>
Form:

form:post
inp
select+
tarea
<form action="" method="post"></form>
<input type="text" name="" id="" />
<select name="" id="">
    <option value=""></option>
</select>

<textarea name="" id="" cols="30" rows="10"></textarea>
CSS補完
w100 width: 100px;
w100p width: 100%;
w100e width: 100em;
w100x width: 100ex;
 

【基本版】に続き、Sublime Text 3 ショートカットキー一覧(Windows)- 2【追加プラグイン版】も一覧にしています。
 


ページの先頭へ

rss
1件目 (1件中)