ワンパクの「もっと使いこなしてみよう！Dreamweaver

第3回蝶のように舞い、蜂のように刺せ、ショートカットキー！

今月号の記事

株式会社ワンパクの近藤＆杉山の師弟コンビが、Dreamweaver の覚えておきたい便利な機能や、見落としていた機能などをお届けする本連載。今回取り上げるのは「ショートカットキー」です。「ソースコードの操作」「ファイルの操作」「タグなどの編集」の3つに分類して紹介します。ショートカットキーを使いこなして、作業のスピードアップを目指しましょう。そして、「杉山のこれ知ってます？」のコーナーでは、<table>に関する便利機能として、<table>のソートと表データの読み込みについて紹介します。

基本は構えから！

近藤：なっとらん！　そんな構えはまったくもって、なっとらん！

杉山：えっ…！？　構え！？！？ですか！？！？(@_@)

近藤：うむ。常に左手がWindowsならCtrlキー、MacならCommandキーに添えられているのが美しいファイティングポーズだ。

杉山：…ファイティングポーズ？…なんのためにそんな構えを！？…(?_?)

近藤：ショートカットキーを繰り出しやすいように、それらのキーのあたりに手を添えておくのだ。ショートカットキーは、WindowsならCtrlキー、MacならCommandキーを使うことが多いのですばやい反応が可能になる。そのための構えだ！

杉山：はい…(>_<)

近藤：ショートカットキーを使うメリットは何だ？

杉山：はい！　それは、作業のスピードアップにつながることと、またミスなども減らすことができ、作業効率も上がることです。

近藤：そうだ！　古来よりショートカットキーを制するものが作業を制すると言われているのだ！

杉山：古来って…いつのことだろ…(-_-;)

移動したり、たたんだり…どんなことでもショートカットキーでヒットアンドアウエー！

近藤：ショートカットキーはたくさんある。ショートカットキーの内容を「ソースコードの操作に関するもの」「ファイルの操作に関するもの」「タグなどの編集に関するもの」の3つに分類してみてみよう。さて、どんなショートカットキーを使っている？

杉山：これはDreamweaverだけではないですが、よく使うのは「Ctrl ＋ Z」(Mac: Command ＋ Z)でひとつ前の作業状態に戻ったり、「Ctrl ＋ C」(Mac: Command ＋ C)でコピーしたりですね。Dreamweaverのショートカットキーでは、コードヒントを消してしまったときにもう一度表示させる「Ctrl ＋ Space (Mac： Command ＋ Space)」なんかはよく使っています。

近藤：うむ。なかなかいいぞ。

杉山：ほかには行を指定して移動できる「Ctrl ＋ G (Mac： Command ＋ ,)」も使います。長くなったコードの下の部分を修正中に、上のほうにあるソースを見たかったら「1」と入力すれば、すぐに一番上まで移動できるので便利です。上までスクロールして戻るのは面倒ですよね(-_-)

近藤：なかなかヤルではないか。だが、タグをたたむ「Ctrl ＋ Shift ＋ J (Mac： Command ＋ Shift ＋ J)」も併用すればさらに効果的だぞ。コードの量が多くなった時、今作業している部分と関係のないコードをたたんでしまえば、長くならずすっきりして作業を進めやすいぞ。

コードをたたむ

杉山：なるほど！　たたんでしまえばいいんですね！　たたんだタグを展開する時は「Ctrl ＋ Shift ＋ E (Mac： Command ＋ Shift ＋ E)」か。覚えておかなくちゃ！　必要なところだけを表示しておけば、スクロールしながらあちこち探す、なんてことがなくなりますもんね。

近藤：ちなみに「Ctrl ＋ Shift ＋ C (Mac： Command ＋ Shift ＋ C)」では、タグという単位ではなく自分で選択した範囲でたたむことも可能だぞ。

杉山：これはHTMLだけでなく、CSSやJavaScriptでも有効ですね！　だいたい設定がかたまって頻繁に修正することがなさそうな記述の部分は、たたんでしまえば長いコードをあちこち見る必要はなくなりますね(^-^)

「ソースコードの操作」に関するショートカットキー

機能	Windows	Mac
親タグを選択
子タグを選択
インデント解除
インデント解除
インデント挿入
インデント挿入
コードヒントの表示
行を指定して移動
タグをたたむ
タグを展開
選択範囲をたたむ

ファイルの操作はスムーズに繰り出せ！

杉山：そういえば、ファイルの操作に関するショートカットキーは、使用頻度がとても高いです。作業が終わったら、PUTやチェックインを必ずしますからね。ショートカットキーを使っていなかった時は、ファイルウィンドウの中の該当ファイルをクリックして操作していました。でも、ショートカットキーを使えば、マウスにもちかえるワンクッションが減るので、すごくラクに感じます(^-^)

近藤：そうだな、コードをかいている時に、マウスにもちかえるとなると、作業の流れが止まりスキが生じるな。ここは間髪入れず、キーボードで操作すべきだな。作業の流れはスムーズでなくてはいかん。

杉山：それにサイトの規模が大きくなると、階層もファイル数も多くなります。たくさんのファイルの中から操作したいファイルを探すのも大変ですが、ショートカットキーを使えば、すでに開いて作業していたそのファイル自体に反映されるので、ファイルを探す手間が省けるのもラクですね。

「ファイルの操作」に関するショートカットキー

機能	Windows	Mac
PUT
GET
チェックイン
チェックアウト

コードビューだけじゃない！　デザインビューからもタグ編集！

近藤：ソースコードの操作に関するもの、ファイルの操作に関するものとみてきたが、タグなどの編集に関するショートカットキーもしっかり覚えておかないとな。

杉山：はい！　タグ編集のショートカットキーだと、見出し・段落・改行・テーブルの挿入などがありますが、これらの要素は使用する頻度が高いものですから、その度にわざわざ記述していたら面倒ですもんね。

近藤：うむ。その辺りのショートカットキーは基本中の基本だから、覚えていないとまずいな。タグなどの編集に関するショートカットキーはデザインビューでもコードビューでもどちらでも使用できるものが多いぞ。

杉山：ライブビューなんかもありますから、前よりデザインビューをひらいている人が増えたんじゃないかなぁ…。

近藤：ただひらいたままにしておくんじゃなく、デザインビューでもショートカットキーを繰り出し有効活用するのだ！

杉山：はい！　デザインビューでのタグ編集と言えば、「Ctrl ＋ T (Mac： Command ＋ T)」から開くことができる「クイックタグ編集」をよく使っています。デザインビュー・コードビューともに、テキストを選択した状態で「Ctrl ＋ T」を押すと「折り返しタグ」を挿入できて便利なんですよね。デザインビューでは、さらに連続で「Ctrl ＋ T」を押すことで、「HTMLの挿入」と「タグの編集」の切り替えもできるから、これは重宝しています！(^-^)

クイックタグ編集

近藤：うむ。「クイックタグ編集」はまぁまぁ使えているようだな。

杉山：画像を選択して「Ctrl ＋ T」から「クイックタグ編集」をひらくと、「タグの編集」ができる状態でひらかれるので、altの修正をしたりしています。プロパティインスペクタの「代替」のエリアだと入力内容が見切れてしまうことがありますが、「クイックタグ編集」を使えばそんなこともありませんからね。

altの修正

近藤：他のデザインビューからも使用できるショートカットキーとして、ペーストスペシャル「Ctrl ＋ Shift ＋ V (Mac： Command ＋ Shift ＋ V)」もあるぞ。

杉山：ペーストスペシャル！？(?_?)

近藤：他のアプリケーションからコピーしたテキストをDreamweaverにペーストするときに、テキストのフォーマットを選択できるのだ。例えば、クライアントからの原稿をMicrosoft Word ドキュメントで受け取ったときに、デザインビューへコピー＆ペーストするとWordで設定している書式設定をDreamweaverは引き継ぐが、ペーストスペシャルを使用してペーストすれば、書式設定を引き継ぐのか、テキストだけペーストするのかなどを選択できるのだ。

ペーストスペシャル

杉山：ペーストして不要なタグが挿入されてしまったらその都度削除していました…(-_-) ペーストスペシャルを使えば、デザインビューからもプレーンなテキストだけペーストすることができるんですね！　これは便利～(^-^)

「タグなどの編集」に関するショートカットキー

機能	Windows	Mac
見出しの挿入(<h1>～<h6>)
段落の挿入(<p>)
改行の挿入(<br />)
Tableの挿入
Italicの挿入(<em>)
Boldの挿入(<strong>)
画像の挿入
半角コードの挿入( )
編集可能領域の挿入
折り返しタグの編集
ペースト形式を選択して貼り付け
ズームイン
ズームアウト

ショートカットキー制覇を目指して！

杉山：やっぱり、ショートカットキーを使う・使わないでは、作業スピードが全然違いますね！

近藤：時間の短縮だけではなく、記述ミス自体も減らすことができるしな。ちなみにショートカットキーを使いこなしているとカッコよく見えるという効果もあるな。

杉山：はい！　カッコはともかく…今回紹介したもの以外にも、まだ他のショートカットキーもありますよね。作業内容に応じて、使ったら便利なショートカットキーはどんどん取り入れていこうと思います。それに、使用するソフトはDreamweaverだけではないので、他のソフトでもショートカットキーをばんばん活用したいと思います(^-^)/

【今回紹介したショートカットキーはDreamweaver CS4で使用できるショートカットキーです。使用しているDreamweaverのバージョンによっては、ショートカットキーが異なる場合もあります。】

杉山の「これ知ってます？　<table>まわりの便利機能」

杉山：<table>のデータを入力した後、「やっぱり年齢順に並べ替えたい」「受付日順に並べ替えたい」などデータの順番を入れ替えたい場合にDreamweaver上で簡単にソートすることができますよ。アルファベット順か番号順、もしくは、ひらがなかカタカナであればソートの順序を「番号順」に設定すれば「あいうえお順」にソートすることができます。

テーブルのソート

1.ソートしたい<table>を選択した状態で[コマンド]→[テーブルのソート]をクリックします。
2.ソートの基準とする列と順序(アルファベット順 or 番号順 / 昇順 or 降順)を設定しOKをクリックします。

杉山：続いて、「表データの読み込み」についてです。WordやExcel内の表組みをコピー＆ペーストでDreamweaverへ挿入できますが、それ以外にもcsvやtsvのデータも表組みのフォーマットでDreamweaverへ挿入することができます。csvやtsvはコピーでは表組みとしてペーストはできないので、データを読み込みます。

表データの読み込み

1. [ファイル]→[読み込み]→[表データ]をクリックします。
2. 読み込みたいデータを参照してOKをクリックします。