Dreamweaverのおすすめ環境設定【初心者向けの使い方】

Dreamweaverを使うにあたり、おすすめの環境設定を知りたい
基本的な使い方を知っておきたい

この記事はそんな方へ向けて書いています。

本記事の内容

Dreamweaverのおすすめ環境設定
Dreamweaverの初心者向けの使い方、画面の見方

この記事を書いている私は、Webデザインの職業訓練校（6ヶ月コース）に通っています。
基礎学習（HTML、CSS、JavaScript、AdobeXD、Illustrator、Photoshop）が終わり、Dreamweaverについても学びました。

本記事では、初学者向けに「Dreamweaverのおすすめ環境設定」を解説していきます。

記事後半では、基本的な使い方（ファイルやフォルダの作り方、基本的なコードの書き方など）、ちょっとした知識がわかります。

DreamweaverはVSCodeが使えれば不要かもしれません。
ただあとでDreamweaverを使うときのために「復習メモ」として書いています。

基礎知識がないために時間を失うのはもったいないです。
これからDreamweaverを学習する方の参考になれば幸いです。

Contents

Dreamweaverのおすすめ環境設定
【Dreamweaver】初心者向けの使い方、画面の見方
まとめ：Dreamweaverとは、どんなものか知っておく価値あり

Dreamweaverのおすすめ環境設定

最初にやっておく環境設定【プレビューの方法】

使いやすように環境設定を変更します。

コードフォーマットの変更

Win → 編集から環境設定 → コードフォーマット
Mac → Dreamweaverメニューから環境設定 → コードフォーマット

上記画像のとおり、最初の2行にチェックを入れます（タブキーで半角4文字、進むようにするため）。

フォントサイズを変える方法

環境設定 → フォント → コードビューでフォントサイズ変更可

半角スペースに・・・をつける方法

表示 → コードビューオプション → 非表示の文字のチェックをはずす

コードの自動改行を消す方法

表示 → コードビューオプション → ワードラップのチェックをはずす

プレビューによく使うブラウザを指定する方法

環境設定 → リアルタイムプレビュー → ブラウザ一覧が出てくるので主に使いたいブラウザを選択 → プライマリブラウザにチェックを入れる
※プライマリブラウザとは「よく使うブラウザ」のこと。

リアルタイムプレビューとは、VScodeのliveサーバーと同じ機能です。
コードを訂正して保存したら、勝手にプレビューも変えてくれます。

下画像のボタンをクリックで、立ち上がります。

※読み込みエラーが出る場合
「環境設定 → リアルタイムプレビュー → 静的ブラウザープレビューを規定値に設定にチェック」で読み込みエラーがなくなります。
直接ファイルから開くようになるからです。
ただし、リアルタイムで自動に保存が反映されなくなります（解決策はリロード）。

※環境設定をしたい場合
ショートカットキーなど環境設定をしたい場合は「Dreamweaver CC 2014 スーパーリファレンス for Windows&Mac OS」が参考にします。Dreamweaverの本は少なく、職業訓練校でも参考書はなかったです。「VSCodeが使えれば書籍がなくても問題ない」と感じました。