Dreamweaver入門 第7回 コードビューの設定やスニペットは強い味方
Dreamweaver入門
本連載では、「サイト設定」からはじまって「リンク設定」まで、Dreamweaverの基本的な使い方を解説してきました。最終回は「さらに知ってるとなんかいい感じ」なDreamweaverの使い方や設定方法などを解説します。
※サンプルファイルとして、本連載を通して解説するテクニックを使って制作できるWebサイトの例（完成例）と、本記事の内容を試すための素材データを用意しています。ダウンロードしたサイトフォルダーを、まず「サイト設定」をしてからご利用ください。サイト設定の詳細については、「第1回 サイト設定がDreamweaverのカナメです」を参考にしてください。
ビューの使い分け
Dreamweaver CC 2014.1には［コードビュー］［分割ビュー］［ライブビュー/デザインビュー］の3つがあります。
3つのビュー ［コードビュー］ HTMLなどのコードが表示されます。HTMLタグやCSSのスタイルを直接編集するときなどに使います。 ［分割ビュー］ ［ライブビュー/デザインビュー］を分割して表示し、［ライブビュー/デザインビュー］で編集した内容を［コードビュー］でソースコードを確認しながら作業することができます。 ［ライブビュー/デザインビュー］ 【ライブビュー】
Webブラウザーで見たときの表示に近い形で、ページ編集を行うことができます。CSSの設定など、ブラウザーの見た目を調整するときに使いやすくなっています。
【デザインビュー】
［ライブビュー］よりはブラウザー表示と誤差がありますが、文章の修正やHTMLの調整、画像の挿入など、HTMLファイルの作業のときに使いやすくなっています。
［分割ビュー］には4パターンあります
Dreamweaver CC 2014.1の初期設定では、［分割ビュー］は上に［ライブビュー/デザインビュー］、下に［コードビュー］に分かれています。［表示］メニューで、［左右に分割］したり、［ライブビュー/デザインビュー］と［コードビュー］の上下、左右を変えることができます。
［コードビュー］の設定
［コードビュー］のフォントサイズを変更できます
最近、ディスプレイ（モニター）の表示解像度が高くなって、Dreamweaverの［コードビュー］に表示される文字が小さく感じる方も少なくないんじゃないでしょうか？（加齢のせいだけじゃないはず！） もちろん、［コードビュー］のフォントサイズを変更できます。
［編集］メニュー（Mac OS Xは［Dreamweaver］メニュー）→［環境設定］でダイアログボックスを開きます。［フォント］カテゴリをクリックし、［コードビュー］のサイズからフォントサイズを変更できます。
終了タグの表示方法もいくつかあるんです
［コードビュー］で直接HTMLタグを入力するときに面倒なのが「終了タグの入力」。毎回、開始タグをコピー＆ペーストしたあと「/（スラッシュ）」を追加している方もちらほら見かけます。
Dreamweaverならもっと簡単にできます！ 開始タグを入力後、「</」を入力すると、あら不思議！ そのまま閉じタグが挿入されます。
これはDreamweaverの初期設定なんです。ちなみに私は別の設定にしています。［編集］メニュー（Mac OS Xは［Dreamweaver］メニュー）→［環境設定］でダイアログボックスを開きます。［コードヒント］カテゴリ内の［終了タグ］にある［開始タグの”>”の入力後］にチェックを入れて、ダイアログボックスの［OK］ボタンをクリックします。
もう一度［コードビュー］でHTMLの開始タグを入力してみてください。なんと、「</」を入力せずとも、自動的に終了タグが挿入されます。
複数のサイト設定ができるんです
もう1つ（いくつでも大丈夫）別のWebサイトをDreamweaverで作成したり管理したりするときも、やはりまずは「サイト設定」を行います（「第1回 サイト設定がDreamweaverのカナメです」を参考にしてください）。
設定済みの別のWebサイトのWebページを作成したり管理したりしたいときはどうするの？
［ファイル］パネルの左上にあるプルダウンメニューから、作業したいサイト名を選択すると、［ファイル］パネルの表示がそのサイトの内容に変更されます。
これでいろんなWebサイトの制作も管理もDreamweaverで簡単に行えますね！
Webブラウザーでのプレビューも大事
Dreamweaverの［デザインビュー］や［ライブビュー］では結構いい感じに表示してくれますが、やはりWebブラウザーでちゃんと表示できているかの確認は必須です。
DreamweaverからWebブラウザーを起動して表示確認をしてみよう
Webブラウザーで表示確認（以降プレビュー）をするためには、まずプレビューしたいHTMLファイルや関連するCSSファイルを保存しておきます。
［ドキュメントツールバー］の中にある［ブラウザーでのプレビュー／デバッグ］ボタン（長いので以降［地球］ボタンと呼びます）をクリックします。そして、プルダウンメニューからプレビューしたいWebブラウザー名をクリックします（みなさんのパソコン環境によって、表示されるWebブラウザーの種類は異なります）。
プレビューしたいWebブラウザーを追加するには？
［地球］ボタンをクリックしたときに表示されるWebブラウザー一覧に、別のWebブラウザーを追加することももちろんできます。
- ［編集］メニュー（Mac OS Xは［Dreamweaver］メニュー）→［環境設定］でダイアログボックスを開き、［ブラウザーでプレビュー］カテゴリをクリックします。
- ［ブラウザー］の［＋］マークをクリックすると、［ブラウザーの追加］ダイアログボックスが表示されます。
- ［名前］ボックスに「ブラウザー名」を入力したあと、［アプリケーション］ボックスの右の［参照］ボタンをクリックします。
- 追加したいWebブラウザーのexeファイル（Mac OS Xはappファイル）を探して［開く］ボタンをクリックします。Webブラウザーによってexeファイルの保存場所が違うのでここでは説明を省略します。すいません。
初期設定でショートカットキーを使いこなせ！
［ブラウザーでプレビュー］カテゴリの［初期設定］には、よく使うWebブラウザーを指定します。プライマリブラウザーとは「一番よく使うWebブラウザー」、セカンダリブラウザーとは「2番目によく使うWebブラウザー」のことです。
この設定をすると、［地球］ボタンをクリックしなくてもショートカットキーで設定したWebブラウザーを開くことができます。
意味 Windows Mac OS X プライマリブラウザー 一番よく使うWebブラウザー ［F12］キー ［Option］+［F12］ セカンダリブラウザー 2番目によく使うWebブラウザー ［Ctrl］＋［F12］、もしくは［Shift］＋［F12］ ［command］＋［F12］
［一時ファイルを使用してプレビュー］って何？
そして、ナゾに思われがちの［一時ファイルを使用してプレビュー］チェックボックス。
［一時ファイルを使用してプレビュー］の役割 チェックボックスにチェックが入っていない場合 ［地球］ボタンからブラウザープレビューをしたとき、編集中のファイルを直接Webブラウザーで表示します。 チェックボックスにチェックが入っている場合 ［地球］ボタンからブラウザープレビューをしたとき、「プレビューするためだけのファイル」を［サイトフォルダー］に一時的にDreamweaverが自動的に作って、そのファイルをブラウザーで表示します。
【どういうときにチェックを入れるの？】
チェックを入れると、［地球］ボタンをクリックするたびにDreamweaverが「プレビューするためだけのファイル」を作るので、編集中のファイルを保存していなくても、最新の編集状態をWebブラウザーで表示確認することができます。
先ほど「まずプレビューしたいHTMLファイルや関連するCSSファイルを保存しておきます」と記述しましたが、制作環境や「サイトフォルダー」の設定先の都合でしょっちゅう保存を繰り返すのはちょっと…という方もいらっしゃるかもしれません。そんなときに「一時ファイルを使用してプレビュー」が活躍します。
また、ルート相対パスや絶対パスで指定した画像ファイルやCSSファイルは、基本的にはブラウザープレビューをしても表示されません。ですが、「一時ファイルを使用してプレビュー」にチェックを入れておくと、ルート相対パスで指定した画像が表示され、CSSのスタイルも適用されます。
スニペットを味方につけろ！
DreamweaverでHTMLやCSSのソースコードの追加や編集をするとき、毎回同じコードを入れることがあります。その際に、別のファイルからソースコードをコピー＆ペーストしている方をよく見かけます。
そんなときは「スニペット」に登録しておけば、使いたいときにクリックひとつでソースコードを追加することができます。
［スニペット］パネルにソースコードを登録しよう
［スニペット］パネルを開くには、［ウィンドウ］メニューから［スニペット］を選択します。パネルの下部にある［新規スニペット］ボタンをクリックし、登録したいコードを追加します。
スニペットを追加しよう
登録したスニペットを使うときは、使いたい場所にカーソルをおいてから、［スニペット］パネルで該当のスニペットを選択し、パネル下部の［挿入］ボタンをクリックします（ダブルクリックでもOK）。
スニペットは自分自身でカスタマイズしていくので、「あ、これよく使うな」というものをコツコツ貯めていくと、さらに効率よくDreamweaverで作業することができます。
この連載もこれで終わりです。そしてこの連載にある機能を使いこなせるようになったら初心者から卒業です。
Dreamweaverは効率的にWebサイトを制作したり管理したりする機能がもっともっとあります。ぜひ、これを機会にWebサイト制作をもっと楽しんでください。