CSSをオンラインで編集するために必要なこと

CSSをオンラインで編集するための支援機能を考えてみよう。

1. 第一段階として、別にCSSのヘルプページを作っておく。これなら支援としては簡単にできる。属性や値を覚えておかなくても、見ながら書ける。
2. さらに、それをJavascriptで記述して、クリックすることで自動的に編集ページに書き込むようにする。こうなると、属性や値のテキストにJavascriptを設定する必要が出てくるので、手でそのスクリプトを書いていると大変だ。そのため、たとえば、Excelのようなもので属性と値の組を書いておいて、そこからテキストに書き出し、それを自動的にJavascriptのスクリプトに変換するPythonスクリプトを書いておく。プログラムを作るプログラムを作っておくのである。これはユーザーのためのプログラムではなく、プログラムを作る人(つまり自分)のためのプログラムである。
3. CSSは複数作ってもよく、またどこに置いてもいいことになっている。そこで、そのサイトのディレクトリ構造と、そのサイトに存在するCSSの場所とを一覧出来る機能があるといい。そして、そのCSSのリンクをクリックすると、既存のものを編集できるし、またディレクトリをクリックすると、そのディレクトリに新規のCSSを作るようにする。
4. これは、必要不可欠ではないが、将来的にあると便利かも知れないのは、そのサイト内で使われている全てのCSSファイルのタグの索引機能である。索引であるから、アルファベット順にならび、それがどのファイルにあるかがページ数代わりである。そのリンクをクリックすると、そのCSSを編集することが出来るようにする。その索引は、呼び出したときに、その場で作成するようにする。テキストを読み込んで整理するだけだから、時間はかからない。

こんなところかな。これをどういうスクリプトファイルにどういう機能を書き、それらがどのように連携するかを、紙の上でシミュレートしてみるといい。