笑顔計画|デザイナー's WEB SITE

Dreamweaver編~Adobe CCになっての変化~

2019.06.13

この記事は約3分で読めます。

先日書きました、Adobe CS5からCCに変わってIllustratorでの変化を書きましたが、今回はDreamweaver編。

作業環境の大きな変化はないのですが、細かいところが変わりました。

Dreamweaverではプロパティインスペクタを使わずソースでずっと書いていたので、Dreamweaverでなくともコーディングができると言えばできるのですが、タグのミスや入れ子の閉じタグミスを防ぐのにやはり便利な機能を持つDreamweaverが作業効率的には楽なので、頼っているところが多いです。

 

Dreamweaver CCで変わったと知ったこと|目次

 

プレビュー方法が2つある。

CS5の時はブラウザプレビューというのが1つあり、設定したブラウザでプレビュー画面を開いて表示を確認するのが普通でした。CCになってからももちろんそれはあります。

開いているHTMLファイルのファイル名上で右クリックすると「ブラウザーで開く」が出ます。これがCSでのプレビューと同じ。
※例で言うなら下記のようにtop.htmlのところで右クリックです。

 

もう一つは何か。それはリアルタイムプレビューです。これを開くと修正したものが速攻プレビューに反映されます。
※例で言うなら下記右下にある、デスクトップとモバイルのアイコンのところをクリックです。

ブラウザーでプレビューとデバイスで見るためのQRコードが表示されます。

先に書いたプレビュー方法はリロードしたり場合によってはサーバにUPして確認しないといけないという手間があります。

でもリアルタイムプレビューはその手間が省けます。スマホでもQRコードを読み込めば同じようにプレビュー画面を確認できます。

 

 

 

CSSクイック編集機能でCSSファイルを開く必要がない!

CS5ではHTML記述中にCSSを変更したい場合、当然ながらCSSファイルを開いていました。

容量の小さいファイルだと探すのも容易ですが、記述が多くなると探すのも大変なので、私はそれまでChromeのデベロッパーツールを使ってHTMLの該当箇所を選択し、そこに絡むCSSのファイルと行を見つけ、ファイルを開いて編集していました。

ところがCCではHTMLのファイル内で該当箇所をクリック後、ctrl + E(macはcommand + E)とキーを押すと、該当CSSが表示される!

探す手間が省けるようになりました。
そして編集後上書き保存すれば、CSSファイルを開かなくても保存されます。便利ですね♪

 

 

複数行を同時に書けるマルチカーソル機能!

後術するEmmetを使っているので不要かもしれませんが、一応機能としてあるので書きます。

ソースを入力する箇所を複数行空けます。

空けた複数行の先頭行をクリックします。

alt(macはoption)+ shift + 下矢印キーでカーソルが縦に複数表示されます。

そのまま任意のソースを書くと、複数同時に記述できます。

 

 

ZenCodingからEmmetへ

マルチカーソル機能も便利なのですが、CS5の時代にZenCodingを利用していた私は後継のEmmetを使っています。

ZenCodingではCtrl + , (だったかな)を押せばコードが展開されましたが、EmmetはtabでOKです。
Emmetのチートシートもあります。

 

Adobe動画での紹介もありました。

カテゴリ一覧へ戻る

コメントをどうぞ

メールアドレスは非公開です。お気軽にコメントください。全項目入力必須項目です。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

プライバシーポリシー

Copyright© 笑顔計画 All rights reserved.