DreamWeaverで私がよく使っているキーボードショートカットの話

2021年2月3日

はじめに

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

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

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

よく使うショートカット一覧

  • <h1>~<h6>を書くショートカット
  • 1行コピー&ペーストしたい時のショートカット
  • 後からclassを追加したい時のショートカット
  • インデントを調整したい時のショートカット
  • 行ごと一発で削除したい時のショートカット

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

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

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

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

ショートカット

Ctrl + 1 <h1></h1>
Ctrl + 2 <h2></h2>
Ctrl + 3 <h3></h3>
Ctrl + 4 <h4></h4>
Ctrl + 5 <h5></h5>
Ctrl + 6 <h6></h6>

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

1行の内容をまるまるコピー&ペーストしたい時、ショートカットを使わない場合は、「範囲選択をする」「コピーする」「ペーストする」の3ステップの作業が必要です。

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

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

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

ショートカット

Ctrl + d カーソルのある(範囲選択した)行の内容をコピー&ペースト

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

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

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

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

Ctrl + t 選択した範囲の前後にタグ(テキスト)を追加

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

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

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

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

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

tab インデントを挿入
Shift + tab インデントを削除

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

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

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

「3つのキーを押す」と若干面倒なのが難点ですが、私は多ボタンマウスの1つにこのショートカットを割り当て、ワンクリックで行削除ができるようにしました。めちゃくちゃ便利です。

ctrl + shift + d 選択した行全体を削除