【Dreamweaverでwebサイトを作成する方法】HTMLコンテンツの追加

このシリーズの2番目のパートでは、webページをセットアップしてテキストの追加およびスタイルの設定をおこないます。ライブビューに直接テキストを追加し、既存の文書からテキストをコピーする方法について説明します。

注意：

このダウンロードには、このチュートリアルシリーズで使うCreative Cloudライブラリおよびプロジェクトファイル一式が含まれます。パート1で使用した開始ファイルでそのまま作成を続行するか、ダウンロードしたファイルから、前パートの完了時のファイルをご利用ください。

入門

このチュートリアルシリーズのパート2では、Dreamweaverでテキストコンテンツを追加し、HTMLのタグでマークアップする方法について説明します。パート1では、サイトを定義して2つのwebページを作成しました。この時点では、これらのページにあるのはタイトルだけです。このパートでは、サイトのホームページindex.htmlにテキストコンテンツを追加します。まずライブビューの編集モードで直接入力し、Microsoft Wordから書式設定されたテキストをコピー＆ペーストします。Wordを使用できない場合は、リッチテキストフォーマットファイルからコンテンツをペーストし、簡単な調整を加えることができます。

グラフィックデザインの経験があるユーザーであれば、なぜページのビジュアルをデザインすることから始めないのか不思議に思うかもしれません。デザインについて考慮するのは確かに優れたアイデアですが、検索エンジンは魅力的なデザインには関心がありません。検索エンジンが対象とするのは、わかりやすい見出しとリンクなどの関連性の深いテキスト情報です。

webページのコンテナの作成とスタイルシートの追加

テキストを追加する前に、忘れずにページ全体のコンテナを追加しておきましょう。これで、高解像度の画面の場合でもページのコンテンツを中央に配置することができます。同時に、外部スタイルシートをページにリンクさせます。

Bayside Responsiveサイトで、パート1で作成した空のwebページindex.htmlを開きます。sights.htmlがまだ開いている場合は閉じてください。この時点では、サイトのホームページindex.htmlに専念します。

注意：サイトのホームページにはindex.htmlを使用するのが一般的なルールです。これは、ほとんどのwebサーバーがindex.htmlまたはindex.htmをディレクトリー（フォルダー）のデフォルトページと見なすためです。このため、URLの末尾にファイル名が追加されていない場合、このページが自動的に表示されます。

ドキュメントウィンドウの上部で「分割」をクリックし、分割ビューを開きます（図1を参照）。

ライブビューの任意の場所をクリックして、フォーカスがページ本文にあることを確認します。
画面右のパネルグループでタブをクリックして「挿入」パネルを開き、パネルの左上のドロップダウンメニューで「HTML」が選択されていることを確認します（図2）。

ここには、よく使われるHTML要素をwebページに挿入するためのオプションが含まれます。

「Div」（上部の最初の項目）をクリックします。表示された「Divを挿入」ダイアログボックスでOKをクリックします。これにより、HTML要素と１行のプレースホルダーテキストが、基になるHTMLのタグの間に挿入されます。プレースホルダーテキストは、明るい青色の枠線で囲まれてライブビューに表示されます。青色の枠線には、HTML要素の名前を持つタブが表示されます（図3を参照）。このタブは、エレメントディスプレイと呼ばれます。

<div>要素は、CSSを使用してスタイルを設定できる汎用コンテナです。この要素を識別するため、IDを付ける必要があります。このdivには、すべてのページのコンテンツを格納または「ラップ（包む）」するため、「wrapper」と名づけることにしましょう。

エレメントディスプレイのプラスボタンをクリックします。これで、クラスまたはIDを要素に追加できるフィールドが開きます。フィールドに#wrapperと入力し、Tabキー、Enterキー、またはReturnキーを押して変更を確定します。

作成したばかりのIDについてスタイルルールのソースの選択を求めるポップアップパネルが、エレメントディスプレイと一緒に表示されます。ドロップダウンメニューを開き、図4に示されているように「CSSファイルを新規作成」を選択します。

新規 CSSファイルを作成ダイアログボックスが開きます。「ファイル/URL」フィールドの右側にある「参照」ボタンをクリックし、スタイルシートファイルを別名で保存ダイアログボックスを開きます。
Baysideサイトのルートにstylesという新規フォルダーを作成し、そのフォルダーに移動します。
「ファイル名」フィールドに"responsive.css"と入力し、「保存」をクリックします。「OK」をクリックして最初のダイアログボックスを閉じます。図4のポップアップがそのまま表示されている場合は、ポップアップ以外の場所をクリックして閉じます。
コードビューの<div>開始タグには次のようなID属性が含まれるようになりました。

<div id="wrapper">新規Divタグの内容がここに入ります</div>
基になるHTMLのid属性の先頭にハッシュは付きません。Dreamweaverの視覚的なインターフェイスでは、CSS構文に準拠してIDとクラスを識別します。CSSでは、IDセレクターはハッシュで始まりますが、クラスはドットまたはピリオドで始まります。
ドキュメントウィンドウの上にある、ファイル名の付いたタブと「分割」ボタンの間に新しいツールバーが表示されます（図5を参照）。これは、関連ファイルツールバーといい、現在のwebページに関連付けられたすべてのファイルが表示されます。

関連ファイルツールバーで、「responsive.css」をクリックします。ドキュメントウィンドウのコードビューの部分に、作成したばかりのスタイルシートのコードが表示されるようになります。2行目から3行目には、IDのwrapper用に空のスタイルルールが含まれています（図6を参照）。

スタイルシートのセレクターはハッシュで始まります。これは、要素のスタイルが同じIDで設定されることを示しています。wrapperの<div>に対するスタイル定義の追加は、このチュートリアルシリーズのパート4でおこない、その時にサイトのスタイル設定を開始します。

関連ファイルツールバーで「ソースコード」をクリックすると、index.htmlのHTMLに戻ります。
セクションの6行目にあるコードを確認します。コードは、次のような記述によって現在のページとスタイルシートをリンクさせています。

<link href="styles/responsive.css" rel="stylesheet" type="text/css">

どちらのファイル名にもアスタリスクが付いています。これは、変更がまだ保存されていないことを示しています。ファイル／すべての関連ファイルを保存を選択します。
「ファイル」パネルを開き、stylesフォルダーを展開してスタイルシートresponsive.cssが正しい場所に作成されていることを確認します（図7を参照）。

これは、スタイルシートをwebページに関連付ける唯一の方法ではありません。このチュートリアルシリーズの後半では、DreamweaverのメインパネルであるCSSデザイナーを使ってwebページのスタイルを設定する方法を学びます。

ライブビューでテキストコンテンツを直接追加

Dreamweaverのライブビューは、Chrome Embedded Frameworkを使用することで、ドキュメントウインドウを実際のブラウザーとして利用できます。これは編集可能なサーフェスでもあり、新しいコンテンツの追加や、既存のコンテンツを再配置することもできます。後ほど説明しますが、ライブビューにはテキストや画像をドラッグ＆ドロップ追加でき、そのボーダーをドラッグすることによってサイズの変更や配置をおこなえます。ですが、ライブビューは視覚的にレイアウトをするためのツールではありません。レイアウトおよび配置はすべてCSSによって管理されます。

パート4でスタイルを追加するまでページはかなりあっさりしているように見えます。ライブビューに直接入力することでいくつかのテキストコンテンツを実際に追加してみましょう。

関連ファイルツールバーで「ソースコード」が選択されていることを確認し、ライブビューのプレースホルダーテキスト内の任意の場所をクリックします。コードビューのテキスト内のどこかに挿入ポイント（垂直線）が表示されます。
プロパティインスペクターで、「フォーマット」ドロップダウンメニューを開き、「見出し1」を選択します（図8を参照）。フォーマットメニューが表示できない場合、プロパティインスペクターの左上にあるHTMLボタンが選択されていることを確認します。

ライブビューで、プレースホルダーテキストが大きい太字で表示されるようになり、エレメントディスプレイはこれが<h1>要素、つまりトップレベルの見出しであることを示しています。

基になるコードで、Dreamweaverはwrapperの<div>の内部にネストされている<h1>タグのペアでプレースホルダーテキストを囲みました。（図9を参照）。

<h1>見出しを選択したままの状態で、「ライブビュー」のテキスト内の任意の場所をダブルクリックして、編集モードに入ります。青色の枠線はオレンジ色の枠線に変わり、コードビュー内で該当するコードの範囲がグレーで表示されます。
プレースホルダーテキスト全体を選択し、"Bayside Beat"と入力します。オレンジ色の枠線以外の場所をクリックして編集モードを終了します。コードビューの<h1>タグの間のテキストは、今入力した内容とまったく同じになるはずです。

編集モードですべてのプレースホルダーテキストを置き換える際に、注意しないと開始HTMLタグの直後または終了HTMLタグの直前に が追加される場合があります。これは、改行なしスペースのHTML文字エンティティです。これが追加されるのは、開始タグと終了タグの間に何らかのコンテンツが必要であるためです。 が表示された場合は、コードビューに移動し、手動でそれを削除してください。基になるコードに改行なしスペースの文字エンティティを残したままにしておくと、レイアウトの問題が発生する可能性があります。このように、コードを自分で入力しないとしても、基になるマークアップの状態を注意することが大切です。

次に、後でナビゲーションメニューとして利用する箇条書きを追加します。HTMLでは、順序のない箇条書きは、<ul>タグのペアで囲まれます。ライブビューで順序のないリストを作成するには、段落から始める必要があります。

<h1>見出しをそのままライブビューで選択した状態で、「挿入」パネルを開き、HTMLカテゴリから「段落」を選択します（上から3番目の項目）。

配置アシストダイアログ（図10を参照）が表示されるので、新しい要素を入力する場所を指定します。段落は見出しの後にくる必要があるので、「後」をクリックします。

Dreamweaverはプレースホルダーテキストを含む新しい段落を主見出しの直後に挿入します。
ライブビューで段落が選択されたままの状態で、プロパティインスペクターの順序のない「リスト」アイコンをクリックして、段落を箇条書きに変換します（図11を参照）。

ページが図12のように表示されていることを確認します。ライブビューでプレースホルダーテキストの前に箇条書き記号が表示されており、エレメントディスプレイは<li>（リスト項目）要素が選択されていることを示しています。基になるHTMLでは、単一の<li>要素が<ul>タグのペアの内部にネストされています。

ライブビューでリスト項目を選択したままの状態で、プレースホルダーテキスト内の任意の場所をダブルクリックして、編集モードに入ります。すべてのプレースホルダーテキストを選択し、"Home"に置き換えます。
編集モードのままで、EnterキーまたはReturnキーを押して"Sights"と入力します。
さらに3度同じ操作を実行し、"Dining"、"Events"、および"Lodging"を箇条書きのリストに追加します。
オレンジ色の枠線以外の場所をクリックして編集モードを終了します。ページは図13のようになります。

index.htmlを保存します。

Microsoft Wordからテキストをコピー＆ペーストする

Dreamweaverはワードプロセッサーではなくweb制作環境です。大量のテキストをライブビューに入力するのはとても面倒です。ただし、Dreamweaverは見出し、段落、箇条書き、番号付きリスト、および太字やイタリックを保持して、Microsoft Word文書を正しいHTMLに変換することができます。

これから使用するテクニックは、Microsoft Wordで文書をHTMLとして保存することとは異なります。Wordは、生成されるHTMLに独自のコードを多く追加しますが、Wordからコピー＆ペーストするときに、Dreamweaverは不要なコードをすべて削除し、HTMLをクリーンな状態に保ちます。

Microsoft Wordを所有していない場合は、サンプルファイルにはリッチテキスト形式（RTF）のテキストコンテンツも含まれています。このセクションの後で、RTFファイルを使用するための手順について説明します。Wordの代わりに、Open OfficeまたはLibre Officeを使用することはしないでください。OpenDocument形式からペーストすると、除去するのが難しい不要なコードが追加されてしまいます。

ファイルパネルで、contentフォルダーを展開し、index.docxをダブルクリックして、ファイルをMicrosoft Wordで開きます。
Copyrightの末尾までのすべてのテキストを選択し、それをクリップボードにコピーします。
Dreamweaverに戻り、順序なしリスト（リスト項目1つだけでなく）がライブビューで選択されていることを確認します。要素全体を選択するには、図14に示されているように、リスト内の任意の場所をクリックしてから、ドキュメントウィンドウ最下部のタグセレクターで「ul」をクリックします。

編集／ペーストスペシャルを選択するか、キーボードのショートカットCtrl+Shift+V（Windows）またはCmd+Shift+V（macOS）を使用します。これでペーストスペシャルダイアログボックスが表示されます（図15を参照）。

3番目のラジオボタン「構造と基本書式（ボールド、イタリック）付きテキスト」を選択し、「Word の段落スペースのクリーンアップ」というラベルの付いたチェックボックスが選択されていることを確認します。「OK」をクリックします。

Dreamweaverは、選択した要素（順序なしリスト）の後ろにテキストをペーストし、適切なHTMLタグを使用して段落および見出しをフォーマットします。

注意：同じ色およびフォントを使用する場合でも、完全な書式設定をペーストするための4番目のラジオボタンは絶対に選択しないでください。これをおこなうと、大量のMicrosoft独自のコードがHTMLページにコピーされ、CSSを使用してページをスタイル設定するのが非常に難しくなります。

ライブビューでテキスト内の任意の場所をクリックして、最初の段落（"Bayside Beat keeps you"で始まる）を選択します。エレメントディスプレイは、これが<p>要素（段落）であることを示しています。コードビューで、テキストは<p>タグのペアで囲まれています。

ペーストされたテキストにエレメントディスプレイがなく、基になるコードにタグが存在しない場合、Word文書からコンテンツをペーストしたときにコードビューにカーソルがあったことを意味します。Ctrl+Z（Windows）キーまたはCmd+Z（macOS）を押して、ペースト操作を取り消します。次に、ライブビューで順序なしリストを選択してから、ペーストします。

テキスト内の任意の場所をクリックして、最初の見出し"Ride the Cable Cars"を選択します。エレメントディスプレイにこれが<h2>要素（第2レベルの見出し）であることが示され、基になるコードでテキストは<h2>タグで囲まれています（図16を参照）。

見出しはWordで「見出し2」としてスタイル設定されていたため、Dreamweaverは対応するHTMLタグを自動的に適用しました。

Copyright のテキスト内の任意の場所をクリックします。図17で示されるように、これはページの最後の段落であり、段落であることを示すエレメントディスプレイが表示されます。

エレメントディスプレイ表示されない場合は、コードビューでCopyright のテキストを選択して書式設定を調整する必要があります。下の図18に示されているように、プロパティインスペクターの「フォーマット」ドロップダウンメニューから「段落」を選択します。

これが起きる理由は、DreamweaverがWordから段落、見出し、その他のテキスト要素をペーストする際、改行までを含んで選択していたかどうかを判断するからです。Word文書でテキストを選択する場合は、行末尾の段落記号まで選択してください。図19に示されているように、通常、テキストの最後の部分の後には改行情報を持つ編集記号が存在します。

index.htmlを保存します。

この方がライブビューにすべてのテキストを直接入力するよりもかなり簡単であることに気づくでしょう。Dreamweaverはペーストスペシャルダイアログボックスの設定を記憶するので、その後は通常のキーボードショートカットCtrl+V（Windows）およびCmd+V（macOS）を使用してライブビューに直接ペーストできます。ライブビューにペーストする前に、新しいコンテンツの直前の要素を選択してください。

基になるHTMLをコードビューで詳しく見ると、’という記述がいくつかあることに気づくでしょう。Word文書のテキストでで用いられていたシングルクオートをDreamweaverはシングルクオートを表すHTML文字エンティティに変換しました。

Microsoft Wordからコンテンツをペーストした場合でも、次のセクションはテキスト要素のエレメントディスプレイを使用してフォーマットを変更する方法について説明しているので、是非お読みください。

クイックプロパティインスペクターを使用してテキスト要素をフォーマットする

Microsoft WordまたはWord Viewerを持っていない場合、リッチテキストフォーマットファイルからテキストコンテンツをコピー＆ペーストしてから、見出しをフォーマットする必要があります。これは、すべてのテキストが段落としてフォーマットされるからです。

ファイルパネルでコンテンツフォルダーを展開し、index.rtfを右クリックします。コンテキストメニューからエディターを指定して開く／参照を選択し、適切なテキストエディター（TextEditなど）を選択します。

ファイルにはindex.docxと同じコンテンツが含まれますが、それぞれの段落と見出しの後ろには余分な空白行があります。これは、Dreamweaverでテキストを段落として正しくフォーマットするために必要です。

ファイルの先頭からCopyright の次の行までのすべてのテキストを選択します。選択したテキストをクリップボードにコピーします。
Dreamweaverに戻り、順序なしリストがライブビューで選択されていることを確認します。これをおこなう方法がわからない場合は、前のセクションのステップ3および図14を参照してください。
編集／ペーストスペシャルを選択するか、キーボードのショートカットCtrl+Shift+V（Windows）またはCmd+Shift+V（macOS）を使用します。これでペーストスペシャルダイアログボックスが開きます。Microsoft Wordからのペーストではないため、図20で示されているように、最後の2つのラジオボタンおよび2番目のチェックボックスは無効になります。

2番目のラジオボタン「構造（段落、リスト、テーブルなど）付きテキスト」が選択されていることを確認します。さらに、「改行の保持」というラベルが付いたチェックボックスを選択解除します。次に、「OK」をクリックして、Dreamweaverに段落としてフォーマットされたすべてのテキストをペーストさせます。

リッチテキストフォーマットからペーストする場合、見出しは認識されません。このため、"Riding the Cable Cars"という段落の任意の場所をクリックします。
図21で示されているように、エレメントディスプレイの左にあるハンバーガーアイコンをクリックしてクイックプロパティインスペクターを開き、フォーマットドロップダウンメニューから「h2」を選択します。これで、段落が第2レベルの見出しに変換されます。

2番目の見出し"Cable Car Tips"についても前のステップを繰り返します。
ページの下部にあるCopyright を選択して、それが段落としてフォーマットされていることを確認します。必要に応じて、前のセクションのステップ9で説明されているようにフォーマットを調整します。

リッチテキストフォーマットファイルからのテキストコンテンツのコピー＆ペーストは簡単です。重要なポイントは次のとおりです。

それぞれの段落または見出しの間には2つの空白行が存在する必要があります。
最後の段落の後ろの空白も含め、行全体をコピーしてください。
必ず「編集」>「ペーストスペシャル」を使用するか、Ctrl+Shift+V（Windows）またはCmd+Shift+V（macOS）を使用して、「改行の保持」チェックボックスを選択解除します。Dreamweaverは設定を記憶しますが、Ctrl+VまたはCmd+Vを使用してリッチテキストフォーマットからペーストすると、基になるHTMLに余分な改行が追加されます。
エレメントディスプレイのハンバーガーアイコンをクリックすることによりクイックプロパティインスペクターにアクセスして、段落をHTMLの見出しに変換します。

これで、Bayside Beatのホームページにすべてのテキストコンテンツが含まれるようになりましたが、あっさりしすぎしているように見えます。ブラウザーでページをロードすると、段落はビューポートいっぱいに広がります。CSSを使用すればこれを整えることができますが、他のHTML構造要素も追加して、スタイルを設定するためにページを論理グループに分割する必要があります。