使い回せるCSSを作れたら

　これまで、CSSを使うべきだと力説してきたが、実際にきちんとCSSを使ったページを作ったことはこれまでなかった。出来る限りCSSを使うようには心がけているが、その時々の必要に応じてページを作っていると、大抵時間がなくて、いそいでその場しのぎの対処ですませてきた。ないしは、極めて単純なデザインですませてきた。

　事実、Wikiはほとんどデザインを変更する余地はなく、このブログもたまに、インラインのstyle属性を使って装飾をするくらいだ。後は自分のホームページだが、これがメニューを除く大部分は、もともと配布プリント用にTeXで書き、それをPDFにも変換し、またtex2pageという変換ツールでHTMLにも変換して作っているので、そもそもHTMLをきちんと書いてはいないのである。

　TeXからHTMLに変換したものは、メニューへのリンクを付け足す以外には何も変更を加えていないので、そこで使われるhタグやpreタグ、箇条書き、背景色などを一つにスタイルシートにまとめておき、それを全部に共通に読み込ませている。全部に共通だから、ある意味ではサイト全体の統一感はあるが、そのデザインそのものは、ほとんど試行錯誤もせずに、場当たり的に作ったままで、何の変更も加えていない。

　で、実際に、CSSでレイアウトやデザインの微調整をしながらページを作ったが、これが結構時間のかかる作業だった。一つ一つのタグを一からデザインしていくのが大変だった。これを何とか解消できないだろうか。

　CSSには、何段階かのレヴェルがある。

1. まず、必ず何らかの編集をした方がいいもの。使うとすれば必ず手を入れる必要のあるもの。定型的なものとしては、文書のタイトルや著者、更新日付、クレジット、メニューへのリンクなどである。また、テキストの行間も150%〜160%位には設定しておきたい。これらについては、よく考えたスタイルを予め定義しておく。いくつかのパターンがあってもいいが、それほど多様性はないかもしれない。もちろん、使う人がデフォルト以外のデザインにしたいのなら、それはそれでいい。
2. 変更する可能性は高いが、どのように変えるかは、作る人のデザインのコンセプトによるもの。一番は背景色や基本的な文字の色、テーブルのデザインなどである。これらは、いくつかのひな形を用意しておいて、選択できるようにするとよい。どういうデザインを用意するかは、各種のサイトを見て、そこから一般的なパターンをいくつか選定すればいいだろう。
3. クラスを作る必要がある場合。それぞれ意味によってクラスを作る必要があるので、最初から用意しておくのは難しい。クラスの作成は、そのページの内容に大きく依存しているからである。ただ、たとえばemタグのように「強調」という意味が決まっている場合には、最初から用意しておくのもいいだろう。

このように、いろいろなレヴェルがあるので、それを一つのファイルで提供するのは難しい。そこで、部品に分けておき、必要に応じて選択して読み込むようにしたらいいのではないかと思う。ただし、種類が多すぎると、探したり覚えたりするのが大変になり、結局は使わないことになってしまう。この辺りは、適当なバランスを考えないといけない。試行錯誤が必要となるだろう。

また、ひな形をもとにある程度サイト全体の統一的なCSSが出来てきたら、それを一つのファイルに統合してもよい。オリジナルのひな形そのものは編集させないようにして、それのコピーに手を加えていくようにしよう。試行錯誤しているうちに、結局もとのものがいいということになるのは、よくあることだ。

　どうも抽象的な話になってしまった。実際にどのようなCSSのひな形を用意しておくのがいいか、それをどのように分割し、またどのように利用させるようにしたらいいのか、これらはそう簡単に答えが出ることではない。ただ、必要だ、ということに気付いたことだけを書き留めておく。