スタイル・シートの編集

デモの表示
スタイル・シートのある Web ページのルック・アンド・フィールをコントロールすることができます。

前提条件: スタイル・シートを作成する

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

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

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

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

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

関連概念
Cascading Style Sheet (CSS) Designer
関連タスク
Web ページに合うようにスタイルをプレビューする
Web ページにスタイル・シートを適用する
サンプルのスタイル・シートを「素材集」から Web ページに適用する
ご利用条件 | フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.
(C) Copyright IBM Japan 2005.