Dreamweaver を使用すると、 簡単かつ効率的に文字を入力することができます。 ここでは、 実際にファイルにテ

キストを入力していきます。

LESSON_2HTML の入力

①　テキストの入力と段落 ・ 改行

②　見出しの設定

③　リストの設定

④　ページプロパティの設定

⑤　Word からの文章読み込み

テキストの入力と段落・改行2-1

LESSON

学習目標

Lesson2 では、 Dreamweaver を利用して HTML を入力する方法を学習します。

Dreamweaver の起動 (Windows)

テキストを入力する前に、 サイトの定義を行います。

ダウンロードした「dw_lesson」フォルダーの「lesson02」フォルダーをローカルサイトフォルダーに設定します。

参考見本の確認

①　サイトルート内「mihon1_1.html」を開きます。

②　これから入力するテキストの見本になります。

確認後、 ファイルを閉じておきましょう。

デザインビューを使用したテキストの入力

①　サイトルート内の「index.html」を開きます。

②　ドキュメントツールバーの「デザイン」を

クリックします。

ドキュメントウィンドウにデザインビューを表示しました。

③　mihon1_1.html と同じように文字を入力しましょう。

④　１行目

「これから作成するホームページの概要を記載していきます。」を入力します。

⑤　入力が完了したら、 キーボードの (Enter キー）を押

します。

１行空白が空き改行されました。

⑥　つづけて、「タイトル：アドバンカフェ」と入力します。

⑦　入力が完了したら、 今度はキーボードの

(Shift キー +Enter キー）を押します。

⑧　空白なしで改行されました。

⑨　つづけて、「内容：架空の喫茶店。福岡市を中心に現在 11 の支店を持つ。」と入力します。

(Shift キー +Enter キー）を押して、「コンセプト：赤と白を基調とした清潔感溢れるサイトにする。」と

入力します。

（Enter キー）を押して、

「製作者：( ご自分のお名前 )」と入力します。

⑩　全て入力したら、 記述内容を確認してみます。

ドキュメントツールバー上の「分割」をクリックします。

コードビューとデザインビューの両方表示されました。

⑪　（Enter キー）で改行した所は文字が <p> ～ </p> で

囲まれており、 (Shift キー +Enter キー）で改行した

ところは文末に <br /> が入力されていることを確認しま

しょう。

⑫　「ファイル」-「保存」をクリックし、 index.html を保存

しておきましょう。

ファイルはそのままで次のページへ進みましょう。

コードビューを使用したテキストの入力

①　引き続き「index.html」を使用していきます。

ファイルパネルから「mihon1_2.html」をダブルクリッ

クし、 今から作成する内容の見本を確認しておきましょ

う。

確認が出来たら「mihon1_2.html」は閉じておきましょ

う。

②　index.html に新たに追加された「作成開始日：～」を

コードビューを使って入力してみましょう。

ドキュメントツールバーより「コード」をクリックします。

③　「製作者：～」の文字の最後でクリックしてカーソルを

移動させ、 直接 <br /> と記入します。

※ コードビュー上で (Shift キー +Enter キー）を押しても

<br /> が挿入されます。

④　続けて「作成開始日：～」と入力します。

作成開始日には今日の日付を入力しましょう。

⑤　入力が完了したら、 ドキュメントツールバーの

「デザイン」をクリックし、「製作者：○○」の後が改

行され、「作成開始日：～」が入力されているのを確

認しましょう。

⑥　index.html を保存してファイルを閉じておきましょう。

index.html

ファイル名に使われている index.html ですが、 これは一般的にそのサイトを開いた際に最初に表示されるページと

して用いられます。 たとえば、「http://www.advan-school.jp/」のように、 HTML ファイル名を表記していない場

合に index.html が自動で開かれるように設定されています。 つまり上記 URL は「http://www.advan-school.jp/index.html」が開かれていることになります。 サイトを作成する際には一番最初のページに index.html を作成する

癖をつけておきましょう。

HTML ファイルにおいて、 見出しタグ <h1> ～ <h6> は重要な役割を果たします。

ここでは入力したテキストを見出しに変更していきます。

見出しの設定2-2

LESSON

文字を見出しに変更する

素材ファイルを開く

①　サイトフォルダーが lesson2 になっていることを確認し

ます。

サイトルート内の「index2.html」を開きます。

( 前のレッスンから連続で受講している方はそのまま

index.html を使っても構いません )

ファイルパネルから「mihon2.html」をダブルクリック

し、 今から作成する内容の見本を確認しておきます。

②　コードビューで mihon2.html を確認してみましょう。

「これから作成するホームページの概要を～」の部

分が <h1> ～ </h1>( 見出し 1) で囲まれています。

③　mihon2.html と同じように見出しの設定をしましょう。

index2.html の「これから作成するホームページの概要を～」をドラッグして選択します。

④　プロパティインスペクタのフォーマットをクリックし「見出し 1」を選択します。

⑤　選択していた段落が「見出し 1」に変更されました。

分割ビューに切り替えて、 <h1> ～ </h1> で囲まれてい

ることを確認しましょう。

⑥　保存してファイルを閉じましょう。

見出しの活用方法

見出しを使用することでその文字の重要性が強調され、 検索エンジン最適化 （SEO 対策） に効果があります。

ただし、 あまりに見出しを乱用すると逆に検索エンジンからスパム行為 ( 検索ワードと関連性がないのに意図的に検

索表示させようとする行為 ) とみなされてしまったり、 何度も見出しが出ることで、 それぞれの見出しの重要度を薄

めることにもなりかねません。

そのため、 見出しは基本的にそのページや項目のタイトルに使う程度に抑えるのが一般的です。

Dreamweaver を使用すると、 非常に効率よく箇条書きを作成することができます。

ここではテキストの一部をリスト ( 箇条書き ) に変換します。

リストの設定2-3

LESSON

リストを作成する

素材ファイルを開く

①　サイトルート内の「index3.html」と

見本データ「mihon3.html」を開きます。

②　mihon3.html を確認してみましょう。

「作成開始日：～」の後に、「作成する項目」と作成ファ

イルリストが並んでいます。

③　mihon3.html をコードビューで確認してみましょう。

作成ファイルリストの全体が <ul> ～ </ul> で、 各項目

が <li> ～ </li> で囲まれているのが分かります。

④　それでは index3.html の作成する項目をリストに変更し

ていきましょう。

index3.html をコードビューで確認すると、 各項目が段

落 (<p> ～ </p>) になっていることが分かります。

Dreamweaver でリストを設定する際は、 あらかじめ

<p> タグで分けられた段落を準備しておく必要がありま

す。

Lesson2-1 の手順であったように、 デザインビューで文

章を入力し、「Enter」キーを押すと簡単に段落が作成

できます。

⑤　デザインビューに戻り、 index.html( トップページ ) から

contact.html( 問い合わせページ ) までをドラッグで選択

しましょう。

⑥　プロパティインスペクタの「リスト」をクリックします。

⑦　選択した部分がリスト表記されました。

左側のコードビュー画面でも確認し、 保存してファイル

を閉じましょう。

Dreamweaver には WEB ページ作成の負担を軽減するような機能が豊富に準備されています。

ページプロパティもその機能の一つで、 これを使用すると簡単に基本的なページ設定などが行えます。

ページプロパティの設定2-4

LESSON

ページプロパティ

素材ファイルを開く

①　サイトルート内の「index4.html」と

見本データ「mihon4.html」を開きます。

②　mihon4.html を確認してみましょう。

背景色がオレンジ (#FFCC00)、 文字色が青 (#0000FF)、

左右の端と文字の間に隙間が空いているのが分かりま

す。

確認ができたら「mihon4.html」は閉じておきましょう。

③　それでは index4.html も同様に変更しましょう。

「ページプロパティ」をクリックし「ページプロパティ」ダイアログボックスを表示します。

④　「カテゴリ」から「外観 (HTML)」を選択ます。

背景をオレンジ「#FFCC00」テキストを青「#0000FF」左マージン「30」マージン幅「30」に設定しましょう。

⑤　「OK」をクリックしてダイアログボックスを閉じましょう。

⑥　index4.html に各種設定が適用されました。

確認できたらファイルを閉じておきましょう。

ブラウザの解釈の違いと対応

上記マージン設定で４つの項目が設定できますが、「左マージン ( 左側に隙間を空ける )」と「マージン幅（左右両方に隙間を空ける）」というのは、 実は命令が重複しています。

「上マージン（上に隙間を空ける）」と「マージンの高さ（上下に隙間を空ける）」も同様です。

これは、「左マージン」と「上マージン」がインターネットエクスプローラーに対応しており、「マージン幅」と「マージンの高さ」はネットスケープ系のブラウザに対応しています。 そのためどちらにも値を入力しておく必要があるの

です。 ページプロパティにてマージンを設定する時はどのブラウザでも正しく表示されるよう両方に記載しておくと良

いでしょう。

Dreamweaver では、 Windows 版に限り Microsoft Word/Excel で作成した文章の読み込みができます。

ここでは、 Word からの文章の読み込みの手順を学習します。

※ Office の Word がインストールされていない場合、 及び Mac ではこの機能は使用できません。

Word からの文章の読み込み2-5

LESSON

Word 文章の確認

ファイルパネルから Word ファイルを開く

①　lesson2 フォルダー内にある「gaiyou.docx」をダブ

ルクリックすると、Word が起動して内容を確認できます。

②　「これから作成するホームページ～」が見出し 1、

「コンセプト：～」が太字、「index.html( トップページ ) ～ contact.html( 問い合わせページ )」が箇条

書きで書かれていることを確認し、 ファイルを閉じてお

きましょう。

Word 文章の読み込み

素材ファイルを開く

①　サイトルート内の「index5.html」を開きます。

内容のない空白のページが開きました。

②　index5.html 内にカーソルがあることを確認し、

「ファイル」-「読み込み」-「Word ドキュメント」をクリックします。

③　「Word ドキュメントのインポート」ダイアログボッ

クスが表示されますので、 Lesson2 フォルダー内の

「gaiyou.docx」を選択し「開く」ボタンをクリックします。

④　index5.html 内に gaiyou.docx の内容が読込まれました。

「これから作成するホームページ～」が <h1>、「コンセプト」が太字、「箇条書き部分」がリストで表記さ

れていることを確認しましょう。

確認ができたら上書き保存をして、 ファイルを閉じておきま

しょう。

ペーストスペシャル

Word 文章の読み込みは直接ファイルを開く他に、 文章をコピーし Dreamweaver 上でペーストすることでも可能です。

その際に、「ペーストスペシャル」を使うと、 様々な貼り付けができるのでご紹介します。

「ペーストスペシャル」は「編集」メニューの中にあります。 ※ Mac では一部利用できない機能もあります。

A. テキストのみスタイル、 改行等すべて無視して文章のみをペーストします。

B．構造 ( 段落、リスト、テーブルなど ) 付きテキスト改行、 リスト、 テーブルなども反映してペーストします。

C．構造と基本書式 ( ボールド、イタリック ) 付きテキスト上記に加え太字、斜体の設定も反映してペーストします。 Word ドキュメントの読み込みはここの設定で行われます。

D．構造と完全な書式 ( ボールド、イタリック、スタイル ) 付きテキスト上記に加えフォントの形や色の設定など、 完全に Word の文章をコピーしたものをペーストします。

文章の入力とマークアップ

問１． lesson02 フォルダーから「kadai2.html」を開きましょう。

問２． kadai2_mihon.html を参考に、 改行 （<br />） と段落 （<p>） 分けを行いましょう。

問３．１行目「これから作成するホームページの概要を～」を見出し 1 に変更しましょう。

問４． 作成する項目 (index.html( トップページ ) ～ contact.html( 問い合わせページ )) をリストに変更しましょう。

問５． ファイルを保存し、「F12」キーを押してブラウザにて確認し、 ファイルを閉じましょう。

すべての作業が完了したら、 次の Lesson へと進んでください。

L e s s o n 2 章末課題　

Lesson2 で学習した文章入力に関する操作を行いましょう。