CSS ファイルのマッピングはとても便利だ 。でも、作業開始位置には注意が必用だ！

 

はじめに：

最近ちょっと理由があって、固定ページのレイアウトを『Twenty Fourteen を使って Twenty Sixteen ライクに』する計画を立てていた。

で、この記事を書きながら、そちらの方を ―― マッピング活用の実地研修を兼ねて ―― 色々いじっていたら、思いのほか短時間でテスト運用ができるまで仕上がってしまった。

今は、そのスタイルを【VST プラグイン関連のメモ帳】の 3 本のページに適用して様子を見ている。サブタイトルには、その時に、複数の CSS を処理しようとして混乱してしまった自分自身への反省の意が込められている。

1．Server CSS と local CSS ファイルのマッピング

この記事の中では local CSS と Server CSS という用語を使っている。
それぞれの意味は下のテーブルの通りだ。

記事中の用語	存在場所	説明	【検証】上での位置 付け
local CSS	クライアント	HDD などに保存されている CSSファイル。パスはファイルシステム形式（ディレクトリ）で指定される。	system resources
Server CSS	クライアント	http 応答として、外部サーバーから返されたネットワークフォルダ内の CSS ファイル。パスは URL 形式で指定される。	network resources

実際には、両方とも自分の PC などのクライアント側に存在するため、Server CSS に他の短くて意味のある名前を付けるのは難しい。

私は、サイト管理者（Administrator  =＞ Server）と閲覧者（client = ＞ local）の間の距離感を感じながら書き進めたかったので、ここはあえて英字表記で『Server』を強調することにした。
これは devtools のヘルプドキュメント風に言えば「ネットワーク フォルダ内の CSS」、または「ローカル ウェブサーバー上の CSS」ということになる。

1）Workspace にローカルフォルダを追加する（目次へ戻る）

この章では【検証】の Workspace にローカルフォルダを追加して、その中に保存されている   local CSS ファイルを、ネットワークフォルダ内の Server CSS にマッピングするところまでを説明する。

基本的には、アップロード用のファイルが入っているフォルダを追加するのだが、バックアップなしでいきなり追加するのは不用心すぎる。
作業用のコピーを作って追加するべきだろう。私は石橋を叩きまくって、コピーのコピーを使っている。

次からの説明では、図示された themes 以下のディレクトリ構成が上の例とは違っている。図が古いのでそうなったのだが、特に問題がある訳ではないのでそのまま使っている。

フォルダの追加手順：

• （1）ツールバーの Sources をクリックして Sources（ソース）タブを表示する。
• （2）ソースタブの好きなところでマウスを右クリックして「Add folder to workspace」を実行する。
• （3）ファイルダイアログで ネットワークフォルダと同じ名前のローカルフォルダを指定する。

2） local CSS ファイルを Server CSS ファイルにマッピングする（目次へ戻る）

ここでは上で例に挙げた inspector-style.css を使って手順を追ってみる。

CSS ファイルマッピングの手順：

• （1）ローカルフォルダの最下層の css フォルダを開き、inspector-style.css を右クリックして「Map to network resource…」実行する。
• （2）ファイルダイアログ上で  inspecteor-style.css を指定する。

ディレクトリ構成がネットワークフォルダの URL 構成と同じなので、一度の操作で local CSS ファイルと同名のすべての Server CSS がマッピングされる。

「Map to network resource…」は逆の道筋をたどることができる。
その場合はネットワークフォルダ側から「Map to file system resource…」を実行する。手順としては、こっちの方が簡単かも知れない。

マッピングの状態を確認する：

上の図はソースタブ上で確認した時の様子を示している。
twentyfourteen フォルダ内の style.css と、inspector-style.css と custom-style.css を格納している css フォルダが見えなくなっている。マッピングが成功するとこのような状態になる。

上の図は Settings の Workspace を確認した時の図だ。
意図した通り、D:/InspectorWork/themes/ ディレクトリ内の local CSS が、ys.moon-sky.net/wp-content/themes / 同じ名前のサブフォルダ/同じ名前の Server CSS / にマッピングされる設定になっている。

2．CSS ファイルのマッピングの使い方（目次へ戻る）

Server CSS に local CSS をマッピングすると【検証】を使った次の2 種類の作業がとても簡単になる。

まず、この二つのやり方から入って行こう。
特に難しいことはないが、事前に頭に入れておいてほしい事と気を付けなければならないことはある。

頭に入れておいてほしい事：

必ず覚えておかなければならないのは、【検証】起動直後の作業開始位置と作業内容の関連だ。ソースペインに local CSS が開いている場合、作業内容は最初の一手で決まる（※）。テーブルの最終行は上 2 行との対比用と思って頂きたい。

作業開始位置	loca CSS の読み込み	作業内容
スタイルペイン	あり	Server CSS の変更と保存。 画面レイアウトには Server CSS が適用される。
ソースペイン （コードエディタ）	あり	local CSS の変更と保存。 画面レイアウトには local CSS が適用される。
スタイルペイン	なし	画面レイアウトの変更のみ。

これは作業途中で新たな local CSS を別タブに読み込んだ時も同様だ。

読み込んだ直後の一手で、マッピングで連結された二つの CSS ファイルに関する作業内容が決まるのだ。単純だがとても要な事実だ。
私は 2 個以上のファイルを開いて作業していて、時々状況を見失うことがあった。

※一手とは変更・編集のことだ。タブ切り替えとリンク押しによるファイルの読み込みは一手に数えない。

下の囲みは上のテーブルの背景となる事実関係の説明なので、読み飛ばしても全然かまわない。

1）Server CSS をローカルフォルダに保存する（目次へ戻る）

これは、今ソースペイン上で開いている local CSS を、Server CSS ファイルの内容で上書きして自動保存する操作だ。一見『Server CSS に名前を付けて local に保存』しているように見える。

保存自体が目的ならば、やることはこれだけだ。

local CSS は保存したくなった時に読み込めば良い。当然開きっぱなしにしておく必要もない。私はこの自動保存は余計な機能だと思っていたが、今は結構重宝して使っている。

スタイルの新規挿入は、何もしないで自動保存という訳にはいかないので、次の項を説明した後であらためて説明する。

2）local CSS ファイルのスタイルを現在の画面構成に適用する（目次へ戻る）

これは、現在スタイルペインに読み込まれているServer CSS ファイルを、local CSS の内容で上書きする操作だ。一見『 Server CSS ファイルを local CSS ファイルに差し替えた 』かのように見える。

操作はこれだけだ。この操作を実行したら loacl CSS を開いておく必要はなくなる。
ただし、閉じる時は必ず Save をクリックしてからにする。そうしないと画面のレイアウトが崩れてしまうことがある。

変更を逐次 local CSS ファイルに保存するならば開きっぱなしにしておけば良いし、どこかのタイミングでまとめて保存するならば、その時に再度読み込めば良い。私はこの機能がとても気に入っている。

ソースペインで作業を終了した場合は、Save で明示的にファイルを保存する必要がある。Save しないでソースペインを閉じようとしたら、ちゃんとメッセージが出てくれるので安心だ。

3）CSS スタイルの新規挿入（目次へ戻る）

スタイルペインの  [＋]（プラス）ボタンを使ってスタイルを新規に作成すると、そのスタイルは【検証】のデフォルトの CSS、 inspector-stylesheet に挿入される。

また、ソースペインのコードエディタにまったく新しいクラス型スタイルを書き込んでも、そのスタイルをスタイルペイン上で見ることはできない。

次の手順を踏めば、新しいスタイルをマッピングの連携の中で扱えるようになる。

4）Server CSS の保存例のアニメ（目次へ戻る）

Server CSS の保存例をアニメにしてみたので、チラッと見ておいて頂きたい。
1 回のプロパティ操作で TwentySixteen の style.css の完コピが手に入る様子は、中々衝撃的だ。

色々なサイトを訪問して、色々なことを試すのは良いが（私は少しやってみた）、あまり危ないことはしない方が良いだろう・・・というか、やったらダメだからね。

あとがき：

Google Chrome のデベロッパーツール【検証】で CSS のスタイルを作ったのは、この記事でサンプルとして使っている inspector-style.css が初めてだ。

その時は【検証】のデフォルトの CSS、inspector-stylesheet の中にスタイルを作ったので、inspector-stylesheet を Save as でファイルにして、コピペで色々寄せ集め、Save で上書き保存する・・・というような、まぁ、初心者なりのやり方をしていたワケだ。

そうこうしているうちに「保存している CSS ファイルを直接画面構成に反映できれば良いのに」という考えが浮かんで、探し当てたのが今回説明した『Workspace を使って CSS をマッピングする』という機能だ。

WordPress のテーマ Twenty Fourteen のコンテントエリアを広げるのに使っている custom-style.css は、local host を使ってもっと面倒なやり方で作った。その時に【検証】をまともに使えていたら・・・と、今頃そう思っている。