DreamWeaverを使用してSASSを使ったレスポンシブデザインコーディング

私がコーディングしている際につまずいたポイントをまとめています。

つまずく度に記事更新しますが、基本的に自分用のメモなのでわかりづらい点はコメントでご指摘いただければ幸いです。

使用ソフト

Adobe DreamWeaver

HTMLの記述

htmlはemmetの記述が出来る

 ​
p.about__pic>img.about__img[src="images/kari.jpg" alt="サムネ画像"]
のような書き方→Tab展開

当たり前だが、ショートカットキーが異なるので注意

DOMパネルの有効利用

DOMパネルは便利だが、h2タグやpタグは自動入力されてしまうので、コード画面で入力→divで囲んだり、複製をDOMパネルでやると効率的

imgタグを入力すると、windowが開いて追加出来るが、html側にwidthとheightが指定されてしまうので、ドラック＆ドロップするか直接パス打ち込んだ方が良い。

SASS(SCSSについて）

SCSSの記入ミスると、エラーがコンパイルされて表示がバグります。
（CSSがえらい事になる）

修正して保存してもバグったままの事もあるので、ctrl+Zで戻して保存して、一度正常な状態に戻してから書き直した方が良いと思います。

Chromeの検証画面開いた状態で上書き保存すると、画像のようなエラー出るが、Chrome側の更新押してやればVScodeと同様に使用出来るようになります。
（最終的にはデバイスでの確認がオススメですが）