RUIN OF THE WEB DESIGNER

Webデザイナーの成れの果て

意外と知らない?Dreamweaverのショートカットキー

前回の続編で、今回は、Dw(Dreamweaver)のショートカットを紹介していきます。

これを知っているといないでは、スピードに、倍以上の差が出るんじゃないでしょうか。

キーボードの写真

まず一言、言っておきましょう。これを見れば、Dwのショートカットを完全網羅できます。!嘘じゃないです!騙されないつもりで読んでください(騙されたと思って~というフレーズは、個人的に大嫌いです)。以下、目次。

  1. HTMLで使うショートカット
  2. CSSで使うショートカット
  3. ショートカットキー完全網羅

一番使うであろうショートカット~HTML編~

さぁ、さらっと紹介していきますよー!

h1等の見出しタグを爆速作成

Dwの画面で、テキストを入力して、「ここh2にしたいなー」っていうとき、いちいち、括弧→h2→閉じ…なんて打ってたら、けっこうストレスです。そこで、画面のように、

選択

まず、選択します。そして、ctrl + 2を押します。すると、

選択後にctrl+2

はい一瞬!

例では、h2を使いましたが、各見出しと数字が対応しているので、h1ならctrl + 1、h4ならctrl + 4といった感じで、バシバシ見出しを作りましょう!選択も、Shift + 矢印キーを使いこなせるようになると、更にラクに選択できます。これについては、説明が非常に面倒なので、割愛させていただきます。

id名、class名等の選択

選択で思い出したので、豆知識コーナー的な感じで紹介ます。いくつもWebサイトを作っていると、意外と悩むのが、id名やclass名。例えば、メインコンテンツのidを、「メインコンテント」としたいとき、

  • main-content
  • main_content

まぁ、他にもmainContent等の書き方もありますが、上記2つがあるとして、あなたはどっち派ですか?

「どっちでも変わんないよ!」と思う方もいらっしゃると思いますが、これ、かなり違うんです。

何が違うのかというと、ダブルクリックで選択したときに、(ハイフン)だと、このように、

ハイフンの場合

選択範囲がそこで切れます。そして、_(アンダーバー)だと、このように、

アンダーバーの場合

半角英数字と一緒に選択されます。ちょっと見た目が違うだけで、こういった違いがあります。これを知っておくだけでも、記号の使い方がまた変わってくるんじゃないでしょうか。
話が逸れたので、本題に戻ります。

一番使うであろうショートカット~CSS編~

コーディングしていて、こんな経験っていでしょうか?

「えーと、インライン要素にしたいから、、、」

display

「よいしょ、よいしょ。」

inherit

「どぅあっー!お前じゃないよ!!!」

で、仕方ないから消してもう一回打ち直すと、コードヒントが出て来なーい!なんてフラストレーションに遭遇したことってありますよね。これ、実は、すぐに出せるんです。

コードヒント無い

画面のような状態のときに、ctrl + スペースで、いつでもどこでも、コードヒントを出すことができます。htmlでも一緒で、このキーで、途中で消えてしまったコードヒントを出すことができます。

ショートカットキー完全網羅

私は言いました。完全網羅できると。CS5以前はわかりませんが、これ実は、Dw(というか、Adobeソフト)には、とても便利な機能がありまして、
「編集」→「キーボードショートカット」というメニューがあるんです。

ショートカット

ここに全部載ってます!そして、自分で書き換えたり、追加することもできちゃうんです!
例えば、イラレとフォトショで定規を引きたい場合のショートカットキーは、ctrl + Rですが、Fireworksで、ctrl + Rを押すと、「読み込み」になってしまいます。それがうざい場合は、自分で設定を変えて、自分だけのFw(Fireworks)にしてしまいましょう。

いかがだったでしょうか。これを活用して、皆さんもショートカットマスターになってください!

では。

感想などあれば、是非!

ご一緒に、Related Potato はいかがですか?

非SNSでのコメント (2)

“意外と知らない?Dreamweaverのショートカットキー” への2件のフィードバック

  1. […] でもどこでも、コードヒントを出すことができます。htmlでも一緒で、このキーで、途中で消えてしまったコードヒントを出すことができます。効率アップ!Dreamweaverのショートカットキー […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This blog is kept spam free by WP-SpamFree.