Web Design

【Dreamweaverとは】基本的な使い方と、おすすめ環境設定

2021年8月10日

【Dreamweaverとは】基本的な使い方と、おすすめ環境設定
  • 「Dreamweaverを使うにあたり、基本的な使い方を知っておきたい」
  • 「おすすめの環境設定を知りたい」

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

 本記事の内容

【Dreamweaverとは】基本的な使い方、画面の見方
Dreamweaverのおすすめ環境設定

この記事を書いている私は、現在はWebデザインの職業訓練校(6ヶ月コース)で学んでいます。
HTML、CSS、JavaScript、AdobeXD、Illustrator、Photoshopの基礎学習が終わり、今はDreamweaverを学習中。

VSCodeが使えれば特に問題はないと思いますが、あとでDreamweaverを使う機会があったときにつまずかないよう、復習メモとしてまとめました。

ファイルやフォルダの作り方、基本的なコードの書き方など、ちょっとした知識がないと調べるのに時間を失います。

そこで本記事では、初学者向けに「Dreamweaverの使い方」を解説していきます。
これからDreamweaverを学習する方の参考になればと思います。

【Dreamweaverとは】基本的な使い方、画面の見方

【Dreamweaverとは】基本的な使い方、画面の見方

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

Dreamweaverとは

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

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

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

以前はエディターの選択肢がなくて、Dreamweaverだけだったとか。
古いWeb制作会社ではDreamweaverを使っているところもあるようです。

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

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

新規作成の手順

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

なおデベロッパーにすると、よりVisual Studio Codeに近くなります。

【Dreamweaverとは】基本的な使い方、画面の見方

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

パターン1:ファイルパネル → サイトの管理 → 新規サイト
パターン2:サイト → 新規サイト ※こちらのが一気に作れる

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

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

【Dreamweaverとは】基本的な使い方、画面の見方

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

【Dreamweaverとは】基本的な使い方、画面の見方

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

サイト名 → 単なる名札なので、なんでもOK
ローカルサイトフォルダ → 重要:移動するフォルダを指定します

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

ちなみに、コピーしたものをフォルダを越えて移動しようとすると「リンクが切れるから更新しますか?」と聞いてくれます。

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

画面の見方

【Dreamweaverとは】基本的な使い方、画面の見方

上画面 → HTMLのプレビュー画面
下画面 → HTMLコードビュー画面

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

プレビュー画面上ではコードを直接書き換えられますが、やってはいけません。
勝手にコードを入れてくれますが、意図したタグになってくれないのがほとんど。
不便です。

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

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

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

【Dreamweaverとは】基本的な使い方、画面の見方

Dreamweaverのおすすめ環境設定

Dreamweaverのおすすめ環境設定

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

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

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

Dreamweaverのおすすめ環境設定

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

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

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

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

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

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

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

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

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

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

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

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

Dreamweaverのおすすめ環境設定

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

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

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

 フォルダを作りたい場合

サイトを選択して右クリック → 新規フォルダ

 ファイルを作りたい場合

ファイルを選択して新規ファイル
または
右クリックから新規ファイル

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

コードの書き方

コードの展開はTabキーです(VSCodeはEnterキー)。

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

index.html

<meta name="viewport" content="width=device-width,initial-scale=1.0">

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

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

選択して、Tabキーでまとめて右に移動
選択して、Shift+Tabキーでまとめて左に移動
Ctr+D → 1行複製できる
Shift+Enter → <br>が書ける

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

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

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

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

先生も言っていましたが「Dreamweaver以外にもコードを書くエディターがあるのであまり使わないかも」とのこと。

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

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

 Adobe CCを安く買う方法

デジハリAdobeマスター講座:39,980円(税込)
※ Adobe CC1年分+動画講座1ヶ月+課題添削2ヶ月

たのまなAdobeトレーニング講座:39,980円(税込)
※ Adobe CC1年分+動画講座1ヶ月+サポート3ヶ月

こーいちより

P.S. Adobe CCは職業訓練校に通っている間は無料でした。

関連記事【JavaScript入門】初心者向けに基礎から文法をまとめました
関連記事【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.