カラー関連の情報を CSS 内に記述

CSS ファイル内に Color Glossary を記述しておくってのは、複数人で CSS を管理する際はもちろん、自分にとっても明快なんで、とても良いアイデアだと思う。

Glossary をもとに CSS ファイル内を検索・置換で色の変更なんかも簡単にできるし、メンテナンス性が高まるのは言うまでもない。こういった記述は、自分(またはグループ)が分かりやすいように関連づけて明記しておくのが良いと思う。例えば、ヘッダの色とか、見出しの色とかのパーツ単位でも構わないんじゃないかと。

んでもって、ウチの場合はちょっと拡張して、CSS 内に下記のようにカラーネーム、Hex 値と RGB 値の記述をしている。

/*================ColorScheme================*/
/*                                                                                         */
/*  MainColor => honeydew3 = #C1CDC1 = rgb(193,205,193)   */
/*  SubColor =>  honeydew4 = #838B83 = rgb(131,139,131)   */
/*  BalanceColor => honeydew  = #F0FFF0 = rgb(240,255,240) */
/*                                                                                        */
/*================ColorScheme-END============*/

部分的にデザイン変更で Photoshop 使って材料を作ろうってときでも、上記情報があれば「あの色はなんだっけ?」なんて悩むこともない。もちろん、色情報以外にも、目次を作っておくとか、入れ子の階層構造を明示しておくとか、ちょっとした事だけどやっておくと楽になるって事は結構ある。色々と試行錯誤して自分なりの工夫を探してみると、あとあと助かるかも知れない。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/26

fami-note - CSSをおこす時の工夫 (2006年6月21日 19:39)

自分はテーブルレイアウトをしなくなってからもう2,3年経ちますが、どうもコーデ... 続きを読む

hxxk.jp - CSS の色指定に関するメモと、 JIS 慣用色の一覧表 (2006年6月22日 19:12)

カラー関連の情報を CSS 内に書くというアイデアをもらって、慣用色の一覧を作ってみました。「○○なイメージに合う色」を一覧から探して CSS 内に記録し... 続きを読む

Stop’n Listen - [CSS]CSSの管理 (2006年7月11日 21:46)

CSSを書くこと自体は誰にとってもそう難しい事ではないし 実務をこなすと数ヶ月でプロと言って充分な実力もつけられる。 しかししかしなかなか完璧な解決が見... 続きを読む

Hato-Style - CSS作業効率向上うんぬん (2006年7月15日 03:18)

CSSによるレイアウトでサイトを構築する場合の話。そういう場合は前提として(X)HTMLの中にレイアウトのための視覚的な指定や要素・属性を使用しない訳なの... 続きを読む

Comments

あや said:

e-luckさんこんばんわ。
私もCSSの書き方をもっと意識しようと思ってたところで、これはピュアにイケてるアイデアだと思いました!ちょっとしたメモ書き程度に思えても、後で断然わかりやすくなったりするものですよね。私の場合、1から書いてる時は夢中になっちゃってるから、後のことを考えなくなりがちなんですが、もっと工夫しようと思います。

それとちょっと話題がそれてしまって申し訳ないのですが、最近やっと初めて自分のブログを作ったんです。それでこの件についてショボいながら意見を書いたので、Lucky bagさんにトラックバックを送ってみたんですが、「HTTP error: 403 Throttled」になってしまいました(>_<)。私はMT 3.3b2-jaを使っているのでベータだからダメなのかなぁとかも思ったんですけど、一応、他に同じようにLucky bagさんにトラックバックが送れない人が居るかもだから報告した方がいいかもと思って書きました。これからもたのしいエントリ期待してます~!

e-luck said:

あやさん、ありがとうございます。
こういったちょっとしたアイデアってのは、結構助かるもんです。
何か面白いアイデアあったら、フィードバックして頂けると嬉しいっす :-)

>「HTTP error: 403 Throttled」になってしまいました
あー、スイマセン。ちょっと対処してみました。
よろしかったら、再度トラックバック送って頂けますでしょうか?

あや said:

レス&対処ありがとうございます。今トラックバックをもう一度やってみたら無事、受け付けてもらえたみたいです!ググってみたらMT3.2のバグか何かだったみたいですね、よく調べずにスミマセン。けど直ってよかったです!e-luckさんの記事はとても好きでしょっちゅう読んでるのでまた何か書いたら送らせて頂きます(^▽^)ノ

tonta said:

こんばんわ。e-luckさん初めまして!
tontaと申します。実は以前からweb制作の仕事に興味があり、今年から制作会社に就職しました。
会社の主幹はDTP関係なのですが近年web部門にも力を入れているので私自身も早く戦力になるべく為にCSSについて勉強しようとおもいググッたところ、e-luckさんのページを発見しお邪魔させて頂きました!
前置きが長くなってしまいましたが、初回の記事からすべて拝見させて頂き、大変勉強になりました。
またe-luckさんが「悪評高いB型」であるという事を知り
同じB型の僕も自信をつけさせて頂けました(笑)
これからもちょこちょこお邪魔させて頂くと思うので
宜しくお願いします!

e-luck said:

tonta さん、どうもです。
少しはお役に立てたようで、なによりです。
こちらこそ、宜しくお願いします :-)