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

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

 本記事の内容

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

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

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

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

Dreamweaverのおすすめ環境設定

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

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

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

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

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

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

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

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

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

下画像の画面みたいなボタンをクリックすると立ち上がります。

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

※さらに環境設定をしたい場合
ショートカットキーなどさらに環境設定をしたい場合は「Kindle Unlimited」で無料の下記本が参考になります。Dreamweaverの本は多くは出版されていません。実際、職業訓練校でもテキストや参考書は渡されませんでした。「VSCodeが使えれば書籍がなくても問題ない」と感じました。
»『Dreamweaver CC 2014 スーパーリファレンス for Windows&Mac OS』

フォルダ、ファイルの作り方

 フォルダを作りたい場合

 ファイルを作りたい場合

ファイルは名前をつけた拡張子に依存するので、何を選んでもOKです。

コードの書き方

コードの展開はTabキーです（VSCodeはEnterキー）。

DreamweaverではHTMLのビューポート、メタネームを作ってくれないため、自分で書きます。

コードの見栄えを整理するには、左バーに「ソースフォーマットの適用」をクリックすると整理されます。
間隔を詰めるだけなので、あまり使いません。

 便利なショートカットキー

【Dreamweaver】初心者向けの使い方、画面の見方

Dreamweaverは、Adobe CCから発売されているWebデザイン・アプリデザインのためのソフトです。

Dreamweaverとは

簡単に言えば、Webサイトを作るためのソフトです。

なお、Adobe CCの正式名称はAdobe Creative Cloudです。
クラウド上にAdobe製品のすべてのソフトが存在しており、その中から必要なソフトをインストールして利用します。

DreamweaverはAdobe製品のソフトのひとつです。
Dreamweaverは、Visual Studio Codeを使うようにコードエディターとして使えます。

• Dreamweaverならではの
• Dreamweaverでなくてはできない

そんな機能もいくつかあります。

新規作成の手順

Dreamweaverを立ち上げると、スタート画面になります。
右上の「標準」または「デベロッパー」を変えられますので「標準」にします。

 新規ファイルの作成方法は2パターン

どちらでもOKです。
画面は以下のとおり。

✔︎ パターン1：ファイルパネル → サイトの管理 → 新規サイト

✔︎ パターン2：サイト → 新規サイト ※こちらのが一気に作れる

「新規サイト」をクリックしたら、決めることは2つだけです。

※注意点
フォルダの場所を移動するとエラーが出ます。
解決策は、元に戻すか、再度フォルダの場所を指定すればOKです。

Dreamweaverで覚えるのは、これだけです。
あとはHTMLを書くだけです。

画面の見方

基本的には、HTMLコードビュー画面にしています。
なぜなら、コードが長く見れたほうが便利だからです。

どのみちブラウザで確認しますので、わざわざプレビュー画面にする意味はありません。

画面が真っ暗になってしまったら

環境設定 → フォント → コードビュー項目の「Source Han Code JP（源ノ角ゴシック Code JP）」から別フォントの「Source Code Pro」に変更すると解消されます（以下画像）。

まとめ：Dreamweaverとは、どんなものか知っておく価値あり

本記事では、職業訓練校で学んだDreamweaverについてまとめました。

職業訓練校では、トータル18時間ほど学びました。
授業内容は本記事以外に、DreamweaverにHTML・CSSをアウトプットの練習です。

ただ、もちろん就職先や取引先で使っているなら覚えなくてはなりません。
Dreamweaverとは、どんなものか知っておく価値はあります。

最後に、Adobe CC（年間72,336円）を安く買う方法をまとめておきます。
Adobe社認定スクールで「動画講座付き」でAdobe CCが購入できます。
※動画講座は見る、見ないは自由です。

 Adobe CCを安く買う方法

他サイトになりますが、下記記事が参考になりました。
» 参考：2021年最新版！Adobe CCを安く買う方法 まとめ＜社会人可！講座付き＞

ちなみに職業訓練校がAdobeの認定校の場合、卒業までにAdobeに登録すると1年間は学生料金（月2,178円税込）で使えます（登録しました）。

以上です。

関連記事【JavaScript入門】初心者向けに「基礎文法」を完全まとめ
関連記事【職業訓練Webデザイン】40代、未経験でも慣れてきた3つの理由