はじめに

（たまにはhtmlとCSS以外の事も書きたかったので。）

日々コーディングを行っていると、それは集中力との戦いであり、煩雑なタイピングあるいはちょっとしたタイプミスで、やる気と集中力が失われてしまっています。

「できるだけ効率化できる所は効率化したい！」という思いでよく使っているキーボードショートカットを紹介します。

目次

<h1>～<h6>を書くショートカット

見出しタグ<h1>～<h6>を入力するキーボードショートカットはCtrl+1～6です。

例えば、Ctrl+1を押すと<h1></h1>が入力されます。

同様にCtrl+2で<h2></h2>、Ctrl+3で<h3></h3>が入力されます。

1行コピー&ペーストしたい時のショートカット

1行の内容をまるまるコピー&ペーストしたい時、ショートカットを使わない場合は、「範囲選択をする」「コピーする」「ペーストする」の3手のキーボード操作が必要ですが、次に説明するキーボードショートカットを使うと、これが1手で完了します。

Ctrl+dのショートカットを使うことで、カーソルがある行の内容がコピー&ペーストされます。

また、ドラッグで範囲選択をすると選択された範囲がコピー&ペーストされます。

注意点としては、範囲選択していない場合だと、すぐ下の行に内容が挿入されますが、範囲選択した場合は、カーソルのすぐ後ろ（同じ行）に挿入されるので、いったん空白の行を作って空白行ごと範囲選択すると作業がスムースかもしれません。

後からclassを挿入したい時のショートカット

例えば、テキストを先に流し込んで、強調したい箇所など後から<span></span>タグを部分的に追加したい時、追加したいタグを範囲指定してctrl+tのショートカットを使うことで、選択範囲の前後に任意のタグ（テキスト）を挿入できます。

Ctrl+tを押すとダイアログが表示され、span class="***"と入力すれば、選択範囲が<span class="***"></span>で囲まれます。

若干の注意点は、コードヒントが働くため、入力中にEnterを押すとヒントのタグが自動挿入されます。これはEnterではなくtabを押せば回避できます。

インデントを調整したい時のショートカット

ファイル全体のインデント調整についてはDreamweaverのインデント処理を効率化したくて覚えた設定とショートカットで説明しましたが、今回は部分的にインデントを調整したい時になります。

1行あるいは範囲選択をしてtabを押すとインデントが1つ分挿入されます。

同様にShift+tabでインデントが1つ分削除されます。

CSSの内容をコピー&ペーストした際、インデントがずれる時によく使用しています（「範囲選択」「Shift+tabで行頭までインデントを削除」「tabでインデントを挿入」、というような使い方）。

• 関連記事
• Dreamweaverのインデント処理を効率化したくて覚えた設定とショートカット
• https://www.ws-pilgrimage.jp/webcreate/598/

行ごと一発で削除したい時のショートカット

私が一番よく使っているショートカットかもしれません。
ctrl+shift+dを押すことで、カーソルのある行が、行ごと削除されます。

1行丸々削除したい時、例えばBackspaceを押すだけだとインデントが1つずつしか削除されず、また、ドラッグで範囲選択をしても選択範囲外の内容は削除されませんが、ctrl+shift+dだと行の途中から範囲選択しても、その行ごと削除されます。

「3つのキーを押す」と若干面倒なのが難点ですが、私は多ボタンマウスの1つにこのショートカットを割り当て、ワンクリックで行削除ができるように設定しました。コーディング作業中に時短になっている事を実感し、めちゃくちゃ便利です。