Cafi Netつながる情報技術
  1. トップ>
  2. DW CS5 の使い方>
  3. CSS スタイルパネル

Dreamweaver CS5 の CSS スタイルパネル

メニューバー「サイト」に続いて、メニューバー「ウィンドウ」の機能です。Adobe Dreamweaver CS5(アドビ ドリームウィーバー CS5)の使い方を確認します。

Adobe Dreamweaver CS5 & CS5.5 * プロパティインスペクターの使用

メニューバー「ウィンドウ」のプロパティなど

メニューバー「ウィンドウ」では、主にパネルの表示/非表示を切り替えます。

イメージや Spry の追加

挿入パネルでは、イメージや Spry など様々なオブジェクトの追加を行います。

ワークスペース「デザイナー」では、画面右側に表示されます。(パネルは切り離して使用することもできます)

オブジェクトのカテゴリは、一般/レイアウト/フォーム/データ/Spry/InContext Editing/テキスト/お気に入りに分かれています。

プルダウンメニューから切り替えると、追加できるオブジェクトが表示されます。

カラーアイコンにチェックを入れると、アイコンがカラーになります。

パネルのラベルを非表示

ラベルの非表示を選択すると、アイコンのみの表示になります。

小さなスペースに全てのアイコンを表示できます。

パネル内でのスクロールが面倒な方は、ラベルを非表示にして下さい。

プロパティインスペクター

プロパティを選択すると、画面下にプロパティインスペクターが表示されます。

プロパティインスペクターでは、選択中のページエレメントのプロパティを確認・編集します。

選択しているオブジェクトによって、表示される編集項目は異なります。

HTML コードの編集と CSS ルールの編集は、左側の HTML/CSS ボタンで切り替えます。

リンクを設定したり代替テキストを追加したりと、編集によく使用するパネルです。

番号リストやブロック引用の追加なども、プロパティインスペクターから実行できます。

CSS スタイルパネル

CSS スタイルパネルでは、CSS ルールの編集や新規作成を行うことができます。

すべて(全ドキュメントモード)には、すべての CSS ルールが表示されます。

現在(現在の選択モード)には、現在の選択範囲の CSS ルールが表示されます。

CSS ルール定義ダイアログボックスは、ルールをダブルクリックすると表示されます。

AP エレメントパネルのパネルメニュー

AP エレメントパネルでは、AP エレメントを管理します。

オーバーラップの防止や表示/非表示(目のアイコン)を切り替えることができます。

Delete キーで AP エレメントを削除することもできます。

パネルメニューからヘルプを確認できます。

マルチスクリーンプレビューパネル

マルチスクリーンプレビューを選択すると、マルチスクリーンプレビューパネルが表示されます。(ファイル/マルチスクリーンプレビューと同じです)

マルチスクリーンプレビューでは、スマートフォン(320×300 ピクセル)/タブレット(768×300 ピクセル)/デスクトップ(1126 ピクセル)でどのように見えるかプレビューできます。

ビューポートのサイズを変更することもできます。