汎用デザインテンプレート

テンプレート化

正直、HPは統一したデザインになりがちです(それは良いことなのですが)。その場合、色以外にも同じ様なシートを書いている場所が多い事にある日気づきました。

これを上手く利用できないかと思った時に、自分なりの解決方法は、小さなテンプレートのシートを部品化しておく方法でした。

そして必要なときに、@import文でデフォルトのスタイルシートをオーバーライドして、デザインの微調整を行います。@import文を一行加えるだけでデザインが完了しますから、完成が非常に早いです。

例えばです、思い出してみてください。サイト全体の案内を行うメニューですが、実は一部の例外を除くと、縦方向のリストか横方向のリストでしか作成されていません。

例えばですよ、サイトのタイトルを表示する時って、サイトの上にぴっちりにくっつけて背景色指定するか、画像を使ってタイトルにしてしまうかで、ほとんど決まっていたりします。

正直、洗い出したら幾つ出てくるのか分かりませんが(人によって違うと思います)、何故かみな、部分的に同じ様なデザインをする所があったりします。テンプレートとして作っておくべきなのは、そういう物だったりします。

ちなみにテンプレートを作るときは、CSSのセレクタを有効利用すれば、クラスの名前でデザインの位置を指定することは、かなり避けられます(かなりであって全てではありません。IEがここらへん弱いので、今は現実的な方法ではないのですが…)

テンプレート一覧

自分が、これはテンプレートになるだろうと思って作り貯めている物をタグとセットにして一覧にしておきます。

正直、経験値足りないので、テンプレ化出来る物も多くは見つけられていませんし、CSSの実装がもっと進めば増えても来るでしょうから、時期を見て増やしていきます。

あと、ここのサンプルはセレクタを有効活用する必要があるので、IEでは正常に表示されません。MozillaかOperaの出来るだけ最新版をご用意下さい

確認環境は

となっております

クリエイティブ・コモンズ・ライセンス

このworkは、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。