スタイルエディター

スタイルエディターでできること:

• ページに関連づけられているすべてのスタイルシートの閲覧と編集
• フロムスクラッチで新たなスタイルシートを作成して、ページに適用する
• 既存のスタイルシートをインポートして、ページに適用する

スタイルエディターを開くには、[ウェブ開発] メニュー (Mac では、[ツール] メニューのサブメニューです) で、[スタイルエディター] を選択します。スタイルエディターをアクティブにして、ブラウザーウィンドウの下部に ツールボックス が現れます:

スタイルエディターは 3 つの主要なセクションに分かれています:

• 左側のスタイルシートペイン
• 右側のエディター
• メディアサイドバー

スタイルシートペイン

ウィンドウ左側のスタイルシートペインには、現在のドキュメントで使用しているすべてのスタイルシートの一覧を表示します。スタイルシート名の左にある目玉のアイコンをクリックすると、そのスタイルシートの有効/無効をすばやく切り替えることができます。一覧の各シート項目の右下にある保存ボタンをクリックすると、スタイルシートの変更内容をローカルコンピューターに保存することができます。

Firefox 40 より、選択したスタイルシートを新しいタブで開くことができるコンテキストメニューが、スタイルシートペインにあります。

エディターペイン

右側はエディターペインです。ここでは選択したスタイルシートのソースの閲覧や編集が可能です。変更した内容は、ページへ直ちに反映されます。これにより、実験・修正・確認がとても簡単にできます。変更内容に満足したら、スタイルシートペインの項目にある保存ボタンをクリックして、スタイルシートのコピーをローカルに保存できます。

CSS を読みやすくするために、エディターには行番号の表示や文法のハイライト機能があります。また、いくつもの キーボードショートカット をサポートしています。

最小化されたスタイルシートを検出すると、元のシートに影響がない形で自動的に最小化を解除します。これは、最適化済みのページで行う作業をより容易にします。

スタイルエディターはオートコンプリートをサポートしています。入力を始めると、候補のリストを提供します。

スタイルエディターの設定 でオートコンプリートを無効にできます。

メディアサイドバー

選択中のスタイルシートに @media 規則 が含まれている場合に、スタイルエディターの右側にサイドバーを表示します。このサイドバーは規則を一覧表示して、スタイルシートで規則が定義されている行へのリンクも提供します。項目をクリックすると、スタイルシート内で規則が存在する場所にジャンプします。現在適用していないメディアクエリー規則の条件文は、グレーアウト表示します。

メディアサイドバーはレスポンシブレイアウトの作成やデバッグにおいて、レスポンシブデザインモード と組み合わせることで特に役立ちます:

Firefox 46 より、@media 規則にスクリーンサイズの条件が含まれている場合に、条件をクリックできます。クリックするとレスポンシブデザインモードを使用して、条件に合うようにスクリーンをリサイズします:

スタイルシートの作成とインポート

ツールバーの新規作成ボタンをクリックすると、新しいスタイルシートを作成できます。そして、新しいエディターに CSS の入力を始めて、他のシートに対する変更と同様にページへリアルタイムに適用された結果を確認できます。

インポートボタンをクリックすると、スタイルシートをディスクから読み込んでページに適用できます。

ソースマップのサポート

ウェブ開発者は Sass、Less、Stylus といったプリプロセッサーを使用して CSS ファイルを作成することがよくあります。これらのツールは、リッチかつ表現性の高い構文から CSS ファイルを生成します。これを行うとメンテナンスするものが、生成された CSS ではなくプリプロセッサーの構文になりますので、生成された CSS の閲覧や編集が可能でもあまり役に立ちません。よって生成された CSS を編集してから、元のソースへどのようにして再適用するかを手作業で考えなければなりません。

ソースマップにより、生成された CSS から元の構文への対応づけをツールが行えるようになりますので、元の構文を表示して編集および保存が可能になります。Firefox 29 より、スタイルエディターが CSS ソースマップを理解します。

例えば Sass を使用すると、スタイルエディターは Sass ファイルから生成された CSS ではなく、Sass ファイルを表示して編集することが可能になります:

ソースマップが動作するための必要条件は以下のとおりです:

• Source Map Revision 3 proposal を理解する CSS プリプロセッサーを使用する。現在は Sass 3.3.0 以上または Less のバージョン 1.5.0 が該当します。他のプリプロセッサーはサポートするために作業中、またはサポートを検討中です。
• プリプロセッサーにソースマップを生成するよう指示する。例えば Sass コマンドラインツールでは --sourcemap パラメーターを与えます。

元のソースを表示

スタイルエディターの設定 で [元のソースを表示] にチェックを入れると、ルールビュー で CSS 規則の隣にあるリンクが、スタイルエディター内にある元のソースへのリンクになります。

Firefox 35 より、デフォルトで元のソースを表示します。

元のソースを編集

スタイルエディターで元のソースを編集することや、それがページへ直ちに適用された結果を見ることも可能です。これを実現するための追加作業が 2 つあります。

まずプリプロセッサーが元のソースを監視して、ソースが変更された際は自動的に CSS を再生成するようにセットアップします。Sass では --watch オプションを渡すことで可能になります:

sass index.scss:index.css --sourcemap --watch

次にスタイルエディターで、ファイル名の隣にある [保存] ボタンをクリックして元のファイルを上書き保存します。

これで、スタイルエディターでソースファイルを変更したときに CSS が再生成され、変更結果をすぐに確認できます。

キーボードショートカット

ソースエディターのショートカット

以下の表は、ソースエディターのデフォルトのショートカットの一覧です。

開発ツールのオプションの エディター設定 で、キーバインドとして Vim、Emacs、Sublime Text を選択できます。

あるいは、about:config で設定項目 devtools.editor.keymap を選択して "vim"、"emacs"、または "sublime" を設定してください。この設定によりソースエディターを使用するすべての開発ツールで、選択したキーバインドを使用します。設定を反映させるには、エディターを開き直さなければなりません。

Firefox 33 よりキーバインドの設定を開発ツールのオプションの エディター設定 に配置しましたので、about:config に代わりここで設定できます。