目次

• 複数のサイト設定ができるんです
• Webブラウザーでのプレビューも大事
• コードビューの設定

本連載では、「サイト設定」からはじまって「リンク設定」まで、Dreamweaverの基本的な使い方を解説してきました。最終回は「さらに知ってるとなんかいい感じ」なDreamweaverの使い方や設定方法などを紹介します。

複数のサイト設定ができるんです

もう1つ（いくつでも大丈夫）別のWebサイトをDreamweaverで作成したり管理したりするときも、やはりまずは「サイト設定」を行います（「第1回 サイト設定がDreamweaverのカナメです」を参照してください）。

設定済みの別のWebサイトのWebページを作成したり管理したりしたいときはどうするの？

［ファイル］パネルの左上にあるプルダウンメニューから、作業したいサイト名を選択すると、［ファイル］パネルの表示がそのサイトの内容に変更されます。

これでいろんなWebサイトの制作も管理もDreamweaverで簡単に行えますね！

Webブラウザーでのプレビューも大事

Dreamweaverのデザインビューやライブビューでは結構いい感じに表示してくれますが、やはりWebブラウザーでちゃんと表示できているかの確認は必須です。

DreamweaverからWebブラウザーを起動して表示確認をしてみよう

Webブラウザーで表示確認（以降プレビュー）をするためには、まずプレビューしたいHTMLファイルや関連するCSSファイルを保存しておきます。

［ドキュメントツールバー］の中にある［ブラウザーでのプレビュー／デバッグ］ボタン（長いので以降［地球］ボタンと呼びます）をクリックします。そして、プルダウンメニューからプレビューしたいブWebブラウザー名をクリックします（みなさんのパソコン環境によって、表示されるWebブラウザーの種類は異なります）。

プレビューしたいWebブラウザーを追加カスタマイズ！

［地球］ボタンをクリックしたときに表示されるWebブラウザー一覧に別のWebブラウザーを追加することももちろんできます。

1. ［編集］メニュー（Mac OSは［Dreamweaver］メニュー）→［環境設定］でダイアログボックスを開き、［ブラウザーでプレビュー］カテゴリをクリックします。
2. ［ブラウザー］の［＋］マークをクリックすると、［ブラウザーの追加］ダイアログボックスが表示されます。

3. ［名前］ボックスに「ブラウザー名」を入力したあと、［アプリケーション］ボックスの右の［参照］ボタンをクリックします。
4. 追加したいWebブラウザーのexeファイル（Mac OSはappファイル）を探して［開く］ボタンをクリックします。Webブラウザーによってexeファイルの保存場所が違うのでここでは説明を省略します。すいません。

初期設定でショートカットキーを使いこなせ！

［ブラウザーでプレビュー］カテゴリの［初期設定］には、よく使うWebブラウザーを指定します。プライマリブラウザーとは「一番よく使うWebブラウザー」、セカンダリブラウザーとは「2番目によく使うWebブラウザー」のことです。

この設定をすると、［地球］ボタンをクリックしなくてもショートカットキーで設定したWebブラウザーを開くことができます。

［一時ファイルを使用してプレビュー］って何？

そして、ナゾに思われがちの［一時ファイルを使用してプレビュー］チェックボックス。

★どういうときにチェックを入れるの？
チェックを入れると、［地球］ボタンをクリックするたびにDreamweaverが「プレビューするためだけのファイル」を作るので、編集中のファイルを保存していなくても、最新の編集状態をWebブラウザーで表示確認することができます。

先ほど「まずプレビューしたいHTMLファイルや関連するCSSファイルを保存しておきます」と記述しましたが、制作環境や「サイトフォルダー」の設定先の都合でしょっちゅう保存を繰り返すのはちょっと…という方もいらっしゃるかもしれません。そんなときに「一時ファイルを使用してプレビュー」が活躍します。

また、ルート相対パス（絶対パス）で指定した画像ファイルやCSSファイルは、基本的にはブラウザープレビューをしても表示されません。ですが、「一時ファイルを使用してプレビュー」にチェックを入れておくと、ルート相対パスで指定した画像が表示され、CSSのスタイルも適用されます。

コードビューの設定

コードビューのフォントサイズを変更できます

最近、ディスプレイ（モニター）の表示解像度が高くなって、Dreamweaverのコードビューに表示される文字が小さく感じる方も少なくないんじゃないでしょうか？（加齢のせいだけじゃないはず！）　もちろん、コードビューのフォントサイズを変更できます。

［編集］メニュー（Mac OSは［Dreamweaver］メニュー）→［環境設定］でダイアログボックスを開きます。［フォント］カテゴリをクリックし、［コードビュー］のサイズからコードビューに表示するフォントサイズを変更できます。

終了タグの表示方法もいくつかあるんです

コードビューで直接HTMLタグを入力するときに面倒なのが「終了タグの入力」。毎回、開始タグをコピー＆ペーストしたあと「/（スラッシュ）」を追加している方もちらほら見かけます。

Dreamweaverならもっと簡単にできます！　開始タグを入力後、「</」を入力すると、あら不思議！　そのまま閉じタグが挿入されます。

これはDreamweaverの初期設定なんです。ちなみに私は別の設定にしています。［編集］メニュー（Mac OSは［Dreamweaver］メニュー）→［環境設定］でダイアログボックスを開きます。［コードヒント］カテゴリ内の［終了タグ］にある［開始タグ">"の入力後］にチェックを入れて、ダイアログボックスの［OK］ボタンをクリックします。

もう一度コードビューでHTMLの開始タグを入力してみてください。なんと自動的に終了タグが挿入されます。

この連載もこれで終わりです。そしてこの連載にある機能を使いこなせるようになったら初心者から卒業です◎

Dreamweaverは効率的にWebサイトを制作したり管理したりする機能がもっともっとあります。ぜひ、これを機会にWebサイト制作をもっと楽しんでください。