スタイルエディタ

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

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

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

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

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

スタイルシートペイン

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

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

エディタペイン

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

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

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

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

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

メディアサイドバー

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

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

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

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

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

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

ソースマップのサポート

Web 開発者は 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 に代わりここで設定できます。