プロパティインスペクター(ウィンドウ > プロパティ)がまだ開いていない場合は開き、パネルの左隅にある CSS オプションを選択します。
Dreamweaver でテキストのプロパティインスペクターを使用して、HTML フォーマットまたは CSS フォーマットを適用する方法を説明します。
テキストプロパティインスペクターを使用して、HTML 書式設定またはカスケーディングスタイルシート(CSS)書式設定を適用できます。HTML 書式設定を適用すると、Dreamweaver はページの本文内の HTML コードにプロパティを追加します。CSS 書式設定を適用すると、Dreamweaver はプロパティをドキュメントのヘッドまたは別のスタイルシートに書き込みます。
CSS インラインスタイルを作成すると、ページ本文にスタイル属性コードが直接追加されます。
テキスト書式設定について(CSS と HTML の比較)
Dreamweaver でのテキスト書式設定は、標準的なワードプロセッサーの使用と同様です。テキストブロックのデフォルトの書式設定スタイル(段落、見出し 1、見出し 2 など)を設定したり、選択したテキストのフォント、サイズ、カラー、アラインメントを変更したり、太字、斜体、コード(等幅)、下線などのテキストスタイルを適用したりできます。
Dreamweaver には、CSS プロパティインスペクターと HTML プロパティインスペクターという 2 つのプロパティインスペクターが統合されています。CSS プロパティインスペクターを使用すると、Dreamweaver はカスケーディングスタイルシート(CSS)を使用してテキストを書式設定します。CSS により、Web デザイナーと開発者は Web ページデザインをより詳細にコントロールでき、アクセシビリティ機能の向上とファイルサイズの削減を実現できます。CSS プロパティインスペクターでは、既存のスタイルにアクセスしたり、新しいスタイルを作成したりできます。
CSS は、Web ページの構造を損なうことなく、スタイルをコントロールする方法です。視覚的なデザイン要素(フォント、カラー、マージンなど)をWebページの構造ロジックから分離することにより、CSSはWebデザイナーがコンテンツの整合性を損なうことなく、視覚的およびタイポグラフィ的なコントロールを可能にします。さらに、印刷上のデザインとページレイアウトを、イメージマップ、フォントタグ、テーブル、スペーサー GIF に頼ることなく、単一の明確なコードブロック内から定義することで、高速ダウンロード、合理化されたサイトメンテナンス、複数の web ページ間でデザイン属性を制御するための中央ポイントを実現できます。
CSS で作成したスタイルは、ドキュメントに直接保存することも、より高い機能と柔軟性を得るために外部スタイルシートに保存することもできます。外部スタイルシートを複数の web ページに添付すると、すべてのページにスタイルシートに加えた変更が自動的に反映されます。ページのすべての CSS ルールにアクセスするには、CSS スタイルパネル(ウィンドウ/CSS スタイル)を使用します。現在の選択に適用されるルールにアクセスするには、CSS スタイルパネル(現在のモード)または CSS プロパティインスペクターのターゲットルールポップアップメニューを使用します。
必要に応じて、HTML マークアップタグを使用して web ページのテキストを書式設定できます。CSS の代わりに HTML タグを使用するには、HTML プロパティインスペクターを使用してテキストを書式設定します。
1 つのページ内で CSS と HTML 3.2 フォーマットを組み合わせて使用できます。 これらのフォーマットは次のように優先順位を付けて適用されます。HTML 3.2 フォーマットは、外部 CSS スタイルシートによって適用されるフォーマットより優先されます。また、ドキュメントに埋め込まれた CSS は、外部 CSS より優先されます。
プロパティインスペクターで CSS ルールを編集する
- 編集するルールによって書式設定されたテキストブロック内に挿入ポイントを配置します。ルールがターゲットルールポップアップメニューに表示されます。
- ターゲットのルールポップアップメニューからルールを選択します。
- 「ルールを編集」をクリックします。
ターゲットのルール
CSS プロパティインスペクターでの編集対象となるルールを示します。 テキストに既存のスタイルが適用されている場合、ページ上のテキスト内をクリックすると、テキストの形式に影響するルールが表示されます。対象ルールポップアップメニューを使用して、新しい CSSルールや新しいインラインスタイルを作成したり、既存のクラスを選択した テキストに適用したりすることもできます。新しいルールを作成している場合は、新しい CSSルールダイアログボックスに入力する必要があります。詳細については、この トピックの最後にあるリンクを参照してください。
ルールの編集
対象 ルールのCSSルール定義ダイアログボックスを開きます。対象ルールポップアップメニューから新しいCSSルールを選択し 、ルールを編集ボタンをクリックすると、Dreamweaverは代わりに新しいCSSルール 定義ダイアログボックスを開きます。
CSS デザイナー
CSSデザイナーパネルを開き、現在のビューの対象ルールのプロパティを表示します。
フォント
ターゲットのルールで使用するフォントを変更します。
サイズ
ターゲットのルールで使用するフォントサイズを設定します。
テキストカラー
ターゲットのルールで使用するフォントカラーを指定します。 カラーボックスをクリックしてwebセーフカラーを選択するか、隣接するテキストフィールドに16進数値(例:#BB5153)を入力します。
ボールド
ターゲットのルールにボールドのプロパティを追加します。
イタリック
ターゲットのルールにイタリックのプロパティを追加します。
左揃え、中央揃え、右揃え
対象のルールを左、中央、または右に配置します。
「フォント」、「サイズ」、「テキストカラー」、「ボールド」、「イタリック」、「行揃え」の各プロパティには、ドキュメントウィンドウで現在選択されている範囲に適用されるルールのプロパティが常に表示されます。 プロパティに変更を加えると、ターゲットのルールに変更を加えることになります。
プロパティインスペクターを使用してテキストのカラーを編集
テキストに特定のルールを適用しない場合は、プロパティインスペクターで直接テキストカラーを編集できます。 次の例では、編集前のテキストカラーに注目してください。 カラーピッカーの隣のフィールドには白が表示され、カーソルを置いたテキストの色を示しています。
テキストのカラーを編集するには、編集するテキストを選択します。 カラーピッカーをクリックして、好みのカラーを選択します。 プロパティインスペクターが新しい色を表示している次の画像を参照してください。
プロパティインスペクターでHTML書式を設定
フォーマットしたいテキストを選択します。
フォーマット
選択したテキストの段落スタイルを設定します。 段落 は<p>タグのデフォルトフォーマットを適用し、 見出し1はH1タグを追加します(以下同様)。
ID
選択範囲に ID を割り当てます。 IDポップアップメニュー(該当する場合)には、ドキュメントの未使用の宣言済みIDがすべて一覧表示されます。
クラス
選択したテキストに現在適用されているクラススタイルを表示します。選択範囲にスタイルが適用されていない場合、ポップアップメニューには「CSSスタイルなし」と表示されます。選択範囲に複数のスタイルが適用されている場合、メニューは空白になります。
スタイルメニューを使用して、次のいずれかの操作を実行します:
選択範囲に適用するスタイルを選択します。
「なし」を選択すると、現在選択しているスタイルが削除されます。
「名前の変更」を選択すると、スタイルの名前を変更できます。
「スタイルシートを添付」を選択すると、外部スタイルシートをページに添付できるダイアログボックスが開きます。
ボールド
環境設定ダイアログボックスの「一般」カテゴリで設定されたスタイル設定に従って、選択したテキストに <b> または <strong> のいずれかを適用します。
イタリック
環境設定ダイアログボックスの「一般」カテゴリで設定されたスタイル設定に従って、選択したテキストに <i> または <em> のいずれかを適用します。
リスト
選択したテキストのブレットリストを作成します。 テキストが選択されていない場合は、新しい箇条書きリストが開始されます。
番号リスト
選択したテキストの番号リストを作成します。 テキストが選択されていない場合は、新しい番号付きリストが開始されます。
ブロック引用、ブロック引用を削除
blockquoteタグを適用または削除して、選択したテキストにインデントを設定または削除します。リストでは、インデントによってネストされたリストが作成され、インデントを削除するとリストのネストが解除されます。
リンク
選択したテキストのハイパーテキストリンクを作成します。 フォルダーアイコンをクリックしてサイト内のファイルを参照するか、URLを入力するか、ポイントツーファイルアイコンをファイルパネル内のファイルにドラッグするか、ファイルパネルからファイルをボックスにドラッグします。
タイトル
ハイパーテキストリンクに対するツールヒントのテキストを指定します。
ターゲット
リンクされたドキュメントが読み込まれるフレームまたはウィンドウを指定します:
_blank は、リンクされたファイルを新しい名前のないブラウザーウィンドウに読み込みます。
_parent は、リンクを含むフレームの親フレームセットまたはウィンドウにリンクされたファイルを読み込みます。リンクを含むフレームがネストされていない場合、リンクされたファイルはブラウザーウィンドウ全体に読み込まれます。
_self は、リンクと同じフレームまたはウィンドウにリンクされたファイルを読み込みます。このターゲットは暗黙的に指定されるため、通常は指定する必要はありません。
_top は、リンクされたファイルをブラウザーウィンドウ全体に読み込み、すべてのフレームを削除します。
HTML プロパティインスペクターからクラス名を変更
Dreamweaver では、HTML プロパティインスペクターのクラスメニューに、ページで使用可能なすべてのクラスが表示されます。クラススタイルのリストの最後にある「名前を変更」オプションを選択することで、このリスト内のスタイル名を変更できます。
プロパティインスペクターパネルで、[クラス]ドロップダウンリストを選択します。
表示されるリストから、リストの最後にある「名前を変更」を選択します。
「スタイル名を変更」ポップアップメニューから、名前を変更したいスタイルを選択します。