この文書は、Dreamweaver CS4/CS5/CS5.5 の基本的な使用方法を分かりやすく図解した内容となっています。

HTML ドキュメントにテキストを入力してみましょう。ここでは、Dreamweaver CS4/CS5/CS5.5 のデザインビューおよびコードビューでテキストを追加する方法と、追加したテキストにフォーマットスタイルを設定する方法を続けて解説します。

ドキュメントウィンドウのビューの切り替えについて

ドキュメントウィンドウのドキュメントは、コードビュー、デザインビュー、またはコードビューとデザインビューの両方を表示する分割ビューで表示できます。ドキュメントツールバー上の [コード]、[分割] または [デザイン] をクリックしてビューを切り替えます。

 デザインビューでテキストを入力してみよう

デザインビューで、HTML ドキュメントにテキストを入力します。

[ようこそ] 画面で [開く] をクリックして任意の HTML ドキュメントを開くか、[HTML] をクリックして新規 HTML ファイルを作成します。

ドキュメントツールバーの [デザイン] をクリックします。

テキストを入力します。

テキストが入力されました。

次に、テキストにフォーマットを設定してみましょう。フォーマットを設定するテキストをドラッグして選択します。

ワークスペースの下部にある[プロパティインスペクタ] の [フォーマット] ポップアップメニューから、目的のフォーマットスタイルを選択します。

※ ここでは例として、[見出し 1] を設定します。

プロパティインスペクタの表示

プロパティインスペクタが表示されていない場合は、[ウィンドウ] メニューの [プロパティ] をクリックして表示します。

 

テキストにフォーマットが適用されました。

 コードビューでテキストを入力してみよう

 コードビューで HTML ドキュメントにテキストを入力します。

任意のHTML ドキュメントを開くか、または新規 HTML ファイルを作成してドキュメントツールバーの [コード] をクリックします。

<body> と </body> タグの間にカーソルを置きます。

テキストを入力します。

テキストが入力されました。

ドキュメントツールバーの [デザイン] をクリックし、デザインビューでの表示を確認してみましょう。



分割ビューでの表示も確認してみよう

分割ビューを使用すると、コードビューとデザインビューの両方の結果を同時に表示することができて便利です。

 

次に、テキストにフォーマットスタイルを設定してみましょう。フォーマットを設定するテキストにタグを挿入します。

※ ここでは例として、[見出し 1] を設定します。[見出し 1] を表すタグは <h1> です。

フォーマットを設定するテキストの先頭に <h1>、最後に </h1> タグを入力します。

テキストにフォーマットが適用されました。ドキュメントツールバーの [デザイン] をクリックし、デザインビューでの表示を確認してみましょう。

 

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー