Dreamweaver入門 第2回 効率的にテキスト原稿やオフィス文書を利用してHTMLファイルを作成する方法
Dreamweaver入門
DreamweaverでWebページを作成するときは、Webページごとに掲載したい文字原稿（テキスト原稿やオフィス文書）をあらかじめ用意しておき、［デザインビュー］にコピー＆ペーストする方法が効率的です。なぜなら、ペーストした文字原稿に対して、Dreamweaverが自動でHTMLマークアップを行ってくれるからです！
原稿のファイル形式によってDreamweaverが行うHTMLマークアップが変わります
文字原稿を作成するアプリケーションソフトの種類によって、Dreamweaverが行うHTMLマークアップが異なります。今回は、テキストエディター／Microsoft Word／Microsoft Excelで作成した文字原稿に対して、DreamweaverがどのようなHTMLマークアップを行うかを解説します。それぞれの特徴を把握して、原稿データを使い分けると、作業もより一層はかどるでしょう
※サンプルファイルとして、本連載を通して解説するテクニックを使って制作できるウェブサイトの例（完成例）と、本記事の内容を試すための素材データを用意しています。ダウンロードしたサイトフォルダーを、まず「サイト設定」をしてからご利用ください。サイト設定の詳細については、第1回：サイト設定がDreamweaverのカナメですの「Dreamweaverで作業する前に準備しておくこと」を参考にしてください。
Dreamweaver CC 2017で作業する前に
ワークスペースの確認
作業前に**ワークスペースが「標準」**になっていることを確認しましょう。
画面の右上のプルダウンメニューから［標準］を選択します。
［デザインビュー］＋［分割ビュー］に切り替える
原稿挿入やHTMLのマークアップ作業するときは［デザインビュー］＋［分割ビュー］の表示にすると効率よく作業をすることができます。
ドキュメントツールバーで［デザイン］［分割］を選択します。
［分割ビュー］にはいろいろ種類がある
［分割ビュー］には
- 上下に分割
- 左右に分割
に切り替えることができます。モニターのサイズや作業内容によって適宜切り替えて利用するとさらに効率よく作業できるのでおすすめです。
［プロパティインスペクター］を表示させる
Dreamweaver CC 2017の初期設定では［プロパティインスペクター］が表示されていません。［プロパティインスペクター］を表示させるためには、［ウィンドウ］メニュー→［プロパティ］をクリック（もしくはCtrl（command）＋F3）します。
［プロパティインスペクター］をドッキングさせる
［プロパティインスペクター］パネルの上部をドキュメントウィンドウの下にドラッグすると青い線が出てきたときにドロップすると、ドキュメントウィンドウにドッキングできます。
1 テキストエディターで作成したデータをコピー＆ペーストする
Dreamweaverの［ファイル］パネル内にあるテキストファイル（.txt）をダブルクリックすると、Dreamweaverでテキストファイルを開くことができます。もちろん、テキストエディターで開いても大丈夫です。
テキストデータ内の必要な箇所を選択・コピーします。続いて、Dreamweaverの［デザインビュー］にペーストします。すると、［デザインビュー］に文字原稿がペーストされるだけでなく、［コードビュー］には「段落（<p>タグ）」もしくは「強制改行（<br>タグ）」が自動的に設定されます。
テキストデータにヒミツがある
テキストエディターでの改行方法と、それを［デザインビュー］にペーストした際のHTMLマークアップの関係は、以下のようになっています。
文と文との間に空行を入れてペーストした場合
空行から空行までの文が「段落」として扱われます。［コードビュー］では、段落を意味する<p>タグで囲まれます。
普通に（空行を入れずに）改行した場合
空行のない普通の改行の場合は「強制改行」として扱われます。 ［コードビュー］では、エディターで改行した位置に<br>タグが挿入されます。
https://blog.adobe.com/media_34c4b74042f6a22931e3ca20390364bf9f4815a8.gif
※エディターソフトの種類によって<p>タグの入り方が違う場合があります。
2 Microsoft Wordで作成したデータをコピー＆ペーストする
DreamweaverはMicrosoft Word（以降Word）で作成したデータにも対応しています。Wordで文字原稿を作成するときは、あらかじめ文書構造（見出しやリストなど）を指定しておきます。
［ファイル］パネル内にあるWord（.docx）ファイルをダブルクリックすると、Wordが起動します（PC内にアプリケーションがインストールされている場合）。Wordの文字原稿をコピーして、Dreamweaverの［デザインビュー］にペーストすると、［コードビュー］では、Word側であらかじめ指定した文書構造に応じたHTMLマークアップが行われているのが確認できます。
環境設定にヒミツがある
Dreamweaverの環境設定（Windowsは［編集］メニュー、Mac OS Xは［Dreamweaver］メニュー）→［コピー/ペースト］カテゴリーを開きます。初期設定では「構造と基本書式（ボールド、イタリック）付きテキスト」が選択されています。_
この設定がされているので、Wordの文書をDreamweaverの［デザインビュー］にペーストすると、Wordで指定した文書構造に応じたHTMLマークアップが行われます（<strong>タグや<em>タグなども自動的に設定されます）。
ちなみに私は、インラインのHTMLタグ（強調を意味する<strong>タグや、リンクの<a>タグなど）は自分で設定したいので、基本書式を無視してくれる「構造（段落、リスト、テーブルなど）付きテキスト」を利用しています。
3 Microsoft Excelで作成したデータをコピー＆ペーストする
Dreamweaverは、Microsoft Excel（以降Excel）で作成した表組みにも対応しています。
［ファイル］パネル内のExcel（.xlsx）ファイルをダブルクリックすると、Excelが起動します（PC内にアプリケーションがインストールされている場合）。Excelで作成したデータの中で利用したい範囲のセルを選択・コピーして、Dreamweaverの［デザインビュー］にペーストすると、HTMLのテーブルが作成されます。
Excelのデータをペーストしたときの注意点
ExcelのデータをDreamweaverにペーストすると、セルの高さは無視されますが、セルの幅はDreamweaverに引き継がれます。ですが、横幅の数値はCSSで指定するほうが望ましいので、この数値は削除します。
列幅の削除
セルの列幅の数値を削除するには以下の方法が便利です。
- ［デザインビュー］でセル内をクリック
- 次に［タグセレクタ］で<table>タグをクリックして選択
- ［プロパティインスペクター］の［列幅をクリア］をクリック
不要なコードも削除
また、［コードビュー］内の<table>タグのすぐ下にある「<col width=”*” />」と書かれた全ての行も必要ないので、［コードビュー］上で削除します。
番外編：追加したデータに段落や改行を追加する
あらかじめ文字原稿を準備していたとしても、あとで文字を追加したり整えたりすることはよくあることです。そのときは、Dreamweaverの［Enter（return）］キーがカナメになります。
Enterキーでタグを追加
段落（<p>タグ）を追加したい場合は、［デザインビュー］上で<p>タグを追加したい場所にカーソルをおき、［Enter（return）］キーを押します。
Shiftキー＋Enter（return）キーで タグを追加
段落内で改行（<br>タグ）を追加したい場合は、［デザインビュー］上で<br>タグを追加したい場所にカーソルをおき、［Shift］キー＋［Enter（return）］キーを押します。この操作は［コードビュー］上でも適用されます。
「Enter（return）キー」と「Shiftキー＋Enter（return）キー」の操作は、Dreamweaverでの操作の大きなポイントのひとつなので、覚えておくことをおすすめします。
［ライブビュー］でも使えます
［ライブビュー］でも「Enter（return）キー」と「Shiftキー＋Enter（return）キー」で<p>タグ・<br>タグの操作ができます。
ポイントはHTML エレメントをダブルクリックしてカーソルを表示させてから「Enter（return）キー」もしくは「Shiftキー＋Enter（return）キー」の操作をします。このままでは<p>タグはまだ追加されません。そのあと［ライブビュー］のなにもないところをクリックすると、新しい<p>タグのHTML エレメントが追加されます。
Dreamweaverは「Enter（return）キー」ひとつで、HTMLのソースコードが変わってしまうので、大事な文字情報はあらかじめテキストエディターなどでしっかり準備し、何度も校正してから最後にDreamweaverにペーストすると、より正確なHTMLファイルを効率よく作成することができます。