Cascading Style Sheet (CSS) Designer

CSS Designer では、スタイル・シートのソースが表示され、ユーザーは、構文の強調表示、コンテンツ・アシスト、 およびプレビュー関数の支援によってスタイルを編集できます。 HTML ファイルにスタイル・シートへのリンクがあるなら、CSS Designer で加えた変更は、 即座に Page Designer のデザイン・ページに反映されます。
このプロダクトは下記の World Wide Web Consortium (W3C) Cascading Style Sheet の標準をサポートしています。 さらに、Wireless Application Protocol (WAP) サポートもあります。
CSS Designer の「ソース」ペインおよび「プレビュー」ページで使用できる機能は、Page Designer の 3 つのページと似ています。 ただし、これらのペイン間の位置付けおよび相互作用は、CSS Designer とは少し異なります。
ソース
「ソース」ペインでは、ファイルのソース・コードを表示して直接操作することができま す。 「プロパティー」および「スタイル」ビューには、「ソース」ページを補完する機能があります。 スタイルの新規作成、スタイルの適用、プロパティーの変更、 およびスタイル・シートへのリンクの設定に関連する関数の多くは、CSS Designer の「スタイル」メニューおよび「スタイル」ビューの ツールバーの両方から使用できます。
スタイル・シート内の個々のスタイルは、通常、次のように定義されます。
selector { property : value; }
以下に、.css ファイルで実際に使われる可能性のある、段落用のスタイル定義の例を示します。
P { font-style : italic; font-size : x-small; }
プレビュー
「プレビュー」ペインは、現在定義されているスタイルが Web ブラウザーで どのように見えるかを示します。CSS Designer で作成したスタイルを 適用して表示する実際の Web ページを選択することも、定義されているスタイルの 最小限のバージョンを提供するサンプル HTML ファイルを使用することもできます。 「プレビュー」ペインには、「選択されたスタイル」領域と 「標準 HTML エレメント」領域という 2 つの領域があります。 「選択されたスタイル (Selected Style)」領域は、 カーソルが (「ソース」ペイン内で) 置かれる領域に関するスタイル定義のスタイル効果を表示するために使用されます。 「 標準 HTML エレメント」領域は、 標準 HTML エレメントに関するスタイルを表示するものであるため、カーソル位置による影響を受けません。

「ソース」ペインまたは「スタイル (Styles)」ビューを使用して .css ファイルを変更した場合、「プレビュー」ペインは自動的に更新されます。

CSS の「ソース」ペインには、次 のような数多くのテキスト編集機能があります。

表 1. CSS Designer のテキスト編集機能
機能 説明
構文の強調表示 タグ・タイプはそれぞれ個別に強調表示されるので、 特定の種類のタグを簡単に見つけて編集することができます。 さらに、構文の強調表示は構文エラーを見つけるのに役立ちます。
無制限の「元に戻す」および「やり直し」 これらのオプションによって、編集セッション全体でファイルに加えられたすべての変更を順次元に戻して、 やり直すことができます。 テキストの場合、1 つの文字または 1 度に選択された文字のセットの変更ごとに元に順次戻されます。
コンテンツ・アシスト コンテンツ・アシストは、 タグまたはコードの行を完成させてマクロを挿入するのに役立ちます。 コンテンツ・アシストのリストで選択可能な項目は、 編集中のファイルに指定されたタグ標準に基づいています。
要素選択 カーソルのロケーションに基づいて、要素選択標識は要素を含む行番号を「ソース」ページの左側にある垂直ルーラー内に強調表示します。
ポップアップ・メニュー・オプション エディターのポップアップ・メニューには、ワークベンチの 「編集」メニューで選択可能な編集オプションと同じオプションが 多数あります。

CSS エディターの「ペイン (Panes)」メニューを使用すれば、「ソース」ペインと「プレビュー」ペインの位置と相対サイズを変更できます。

関連タスク
Web サイトにページ・スタイルを定義する - 概要
スタイル・シートを作成する
スタイル・シートの編集

フィードバック