スタイル・シートの編集

スタイル・シートのある Web ページのルック・アンド・フィールをコントロールすることができます。
前提条件: スタイル・シートを作成する

ページのリンク先である外部スタイル・シートを編集するには、次のようにします。

  1. 「プロジェクト・エクスプローラー」ビュー内で編集したいファイルをダブルクリックして、.CSS ファイルを開く。 スタイル・シートが編集域に開きます。
  2. スタイルを編集するには、「プレビュー」ペイン内でスタイルを選択して「選択されたルールの編集」アイコンをクリックする。 ファイルのソース・バージョンを編集する場合、ソース・ペインにスタイル定義を入力することができます。
    ヒント: Page Designer のデザイン・ペイン内の要素を右クリックして、「スタイル」 > 「スタイル・ルールの編集」を選択することにより、開かれている Web ページ上のスタイルも編集することができます。
  3. 「スタイル・プロパティーの設定」ダイアログ・ボックスで、 フォント、背景効果、レイアウト位置、リスト形式などに関するスタイルを設定できる。 「OK」をクリックする。 スタイル定義を更新すると、スタイルの変更は Web ページの「デザイン」ページ・バージョンに即時に適用されます。 更新されたスタイルを CSS Designer の「プレビュー」ペインに表示することもできます。

    「ペイン (Panes)」 > 「ソースの最大化 (Maximize source)」 または「ペイン (Panes)」 > 「プレビューの最大化 (Maximize preview)」を 選択して、各ペインの表示/非表示を切り替えることができます。

  4. 個々のタグと属性のペアを編集するには、まずそれを「スタイル」 ビューで選択して、ポップアップ・メニューから「編集」を選択するか「選択されたルールの編集」ツールバー・ボタンを選択する。「スタイルの編集」ダイアログ・ボックスで、 編集したいスタイルの要素を選択して「OK」をクリックする。
    注: 既存のスタイルの HTML タグがない場合は、「新規」または 「新規スタイル・ルール」を代りに選択します。
    ユーザーは、CSS Designer のポップアップ・メニュー、または「デザイン」ページ内の Page Designer のポップアップ・メニューからもスタイルの編集ができます。
  5. OK」をクリックして、更新を保管し、 スタイルを現行ページに適用する。

    プレビュー」ペインを使用することにより、更新されたスタイルが Web ブラウザーでど のように表示されるかを確認することができます。 HTML ファイルを実際に開かなくても、「プロジェクト・エクスプローラー」ビューから 「プレビュー」ペインへ HTML ファイルをドラッグ・アンド・ドロップするだけで、スタイル効果が表示されます。 「ブラウズ」ボタン、または「プレビュー」ペイ ンの上にある「プレビュー対象 (Preview with)」 リストを使用して、HTML ファイルを指定することもできます。

関連概念
Cascading Style Sheet (CSS) Designer
関連タスク
Web ページに合うようにスタイルをプレビューする
Web ページにスタイル・シートを適用する
サンプルのスタイル・シートを「素材集」から Web ページに適用する

フィードバック