blog

coding

コーディングの作業効率を上げる! 知っておくと便利なショートカット

PC上での作業をより効率良くしてくれるショートカットキー。普段、コーディングをする時にも大変役に立っています。そこで今回は、【Photoshop】【Dreamweaver】【FTPクライアント】のコーディング時に知っておくと便利なショートカットをご紹介します!

Photoshop】 【Dreamweaver】 【FTPクライアント

Photoshop

1.ツール

まずは、基本的なショートカットキーからご紹介します。

Photoshopツール

※()内、太字の項目は初期設定で選択されているものです。
また、()内のどれを選択しているかによって機能が異なります。
()内は、Shift+そのツールのキーで切り替えられます。

入力モードが半角英数字の時に、のキーを押すとツールが切り替わります。
また、個人的に以下の3つは頻繁に使用するオススメキーです。
※Macの場合、Ctrlは⌘

  • Space・・・手のひらツール
  • Space+Ctrl・・・拡大
  • Space+Ctrl+Alt・・・縮小

2.スライスデータのコピー

スライス時に便利な機能をご紹介します。

Alt+ドラッグ

スライスデータのコピー

図のように、同じ大きさの画像が複数ある場合、1つ1つスライスしていくのはなかなか根気がいる上に、時間もかかってしまいます。こういう時に便利なのが「スライスのコピー」です。

スライスを選択した状態で、Altを押すと②のようなカーソルに変わります。この状態でスライスをドラッグすればコピーできます。

マウスカーソル

また、ファイル名も一緒にコピーされるので、最初に作成したスライスに「test01」のような連番のファイル名を付けておけば、2つ目以降は連番の数字を変更するだけでOKです!これだけでもかなりの時間短縮になると思います。

Dreamweaver

1.デフォルトショートカット

デフォルトで設定されているもので便利なものをご紹介します。

Ctrl+1

これは、見出しタグを挿入するショートカットです。
<h1></h1>
このように挿入してくれます。見出しを入力する時に便利ですね。
同様に、Ctrl+2、Ctrl+3、Ctrl+4・・・で、
<h2></h2>、<h3></h3>、<h4></h4>・・・のように表示してくれます。

Ctrl+Alt+T

テーブルタグの挿入です。テーブルタグは個人的に地味に手間のかかるタグだと思います。このショートカットを使えば、ある程度の形まで記述してくれるので、あとは目的の形に修正するだけでテーブルが作れます。

テーブルタグ

その他タグ挿入に関するショートカット
結果 キーボード操作(※Macの場合、Ctrlは⌘)
改行タグ<br /> Shift+Enter
段落タグ<p> Ctrl+Shift+P
クイックタグ編集(選択範囲を囲むようにタグを挿入) (任意の範囲を選択して)Ctrl+T
タグ挿入以外のショートカット
結果 キーボード操作(※Macの場合、Ctrlは⌘)
検索 / 置換ダイアログを開く Ctrl+F
環境設定ダイアログを開く Ctrl+U
左or右のパネルを非表示にする F4

2.自作ショートカット

Dreamweaverでは、ショートカットを自分で設定することができます。
[編集]→[キーボードショートカット]
から、好きなショートカットを作成するだけなので簡単です。
今回は、HTMLコメントアウトのショートカットを作成しました。
作成方法を簡単に説明します。

1.キーボードショットカットを表示させたら、セットの複製をします。

キーボードショートカット01

2.コマンドを選びます。

今回はコメントアウトですので、そのコマンドを選択します。
(メニューコマンド:[表示]→[ツールバー]→[コーディング])

3.[キー]をアクティブにした状態で、好きなショートカットキーを選択します。

今回は、Ctrl+Kに設定しました。選択後、[OK]をクリックしたら設定完了です。

キーボードショートカット02

このように、好きなショートカットを作成して、使いやすいようにカスタマイズしていくと、より便利になりますね。

FTPクライアント

コーディングに欠かせないFTPソフト。その中でも個人的に使用するFileZillaとWinSCPのショートカットをご紹介します。

1.FileZilla

動作 キーボード操作(※Macの場合、Ctrlは⌘)
サイトマネージャを開く Ctrl+S
更新 F5
ディレクトリを作成 右クリック→C
名前の変更 F2

2.WinSCP

動作 キーボード操作(※Macの場合、Ctrlは⌘)
新しいセッション Ctrl+S
更新 F5
ディレクトリを作成 F7
名前の変更 F2

まとめ

いかがでしたでしょうか?ショートカットキーは、慣れるまでは、逆に時間のロスになってしまうかもしれませんが、慣れればかなり効率が上がると思います。
また、こちらの記事では、Photoshopでの自作ショートカット作成方法をご紹介していますのでぜひご覧ください。

Photoshopのショートカットカスタマイズで作業効率をアップさせよう!