スタイルエディタでできること:
- ページに関連づけられているすべてのスタイルシートの閲覧と編集
- フロムスクラッチで新たなスタイルシートを作成して、ページに適用する
- 既存のスタイルシートをインポートして、ページに適用する
スタイルエディタを開くには、"Web 開発" メニュー (Mac では、"ツール" メニューのサブメニューです) で、"スタイルエディタ" を選択します。スタイルエディタをアクティブにして、ブラウザウィンドウの下部にツールボックスが現れます:
左側 (ウィンドウの幅が狭い場合は上側) に現在のドキュメントで使用しているすべてのスタイルシートの一覧を、右側 (ウィンドウの幅が狭い場合は下側) にスタイルシートペインで選択しているスタイルシートのソースを表示します。
スタイルシートペイン
ウィンドウ左側のスタイルシートペインには、現在のドキュメントで使用しているすべてのスタイルシートの一覧を表示します。スタイルシート名の左にある目玉のアイコンをクリックすると、そのスタイルシートの有効／無効を素早く切り替えることができます。一覧の各シート項目の右下にある保存ボタンをクリックすると、スタイルシートの変更内容をローカルコンピュータに保存することができます。
エディタペイン
右側はエディタペインです。ここでは選択したスタイルシートのソースの閲覧や編集が可能です。変更した内容は、ページへリアルタイムに反映します。これにより、ページの外見の実験・修正・確認がとても簡単にできます。変更内容に満足したら、シートペインの項目にある保存ボタンをクリックして、スタイルシートのコピーをローカルに保存できます。
CSS を読みやすくするために、エディタには行番号の表示や文法のハイライト機能があります。役に立つキーボードショートカットを含む、エディタそのものに関するドキュメントについてはソースエディタの使用をご覧ください。
スタイルエディタの特に役立つ機能: 最小化されたスタイルシートを検出すると、元のシートに影響がない形で自動的に最小化を解除します。これは、最適化済みのページで行う作業をより容易にします。
スタイルシートの作成とインポート
ツールバーの新規作成ボタンをクリックすると、新しいスタイルシートを作成できます。そして、新しいエディタに CSS の入力を始めて、他のシートに対する変更と同様にページへリルタイムに適用したものを確認できます。
インポートボタンをクリックすると、スタイルシートをディスクから読み込んでページに適用できます。