個別記事

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

この記事が属するカテゴリー
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 使って材料を作ろうってときでも、上記情報があれば「あの色はなんだっけ?」なんて悩むこともない。もちろん、色情報以外にも、目次を作っておくとか、入れ子の階層構造を明示しておくとか、ちょっとした事だけどやっておくと楽になるって事は結構ある。色々と試行錯誤して自分なりの工夫を探してみると、あとあと助かるかも知れない。

2006-06-20T19:33:09+09:00 | コメント (5) | トラックバック (4) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/385

このリストは、次のエントリーを参照しています: カラー関連の情報を CSS 内に記述:

fami-note さんからのトラックバック
CSSをおこす時の工夫
自分はテーブルレイアウトをしなくなってからもう2,3年経ちますが、どうもコーデ... [続きを読む]
2006年06月21日 19:39
hxxk.jp さんからのトラックバック
CSS の色指定に関するメモと、 JIS 慣用色の一覧表
カラー関連の情報を CSS 内に書くというアイデアをもらって、慣用色の一覧を作ってみました。「○○なイメージに合う色」を一覧から探して CSS 内に記録し... [続きを読む]
2006年06月22日 19:12
Stop’n Listen さんからのトラックバック
[CSS]CSSの管理
CSSを書くこと自体は誰にとってもそう難しい事ではないし 実務をこなすと数ヶ月でプロと言って充分な実力もつけられる。 しかししかしなかなか完璧な解決が見... [続きを読む]
2006年07月11日 21:46
Hato-Style さんからのトラックバック
CSS作業効率向上うんぬん
CSSによるレイアウトでサイトを構築する場合の話。そういう場合は前提として(X)HTMLの中にレイアウトのための視覚的な指定や要素・属性を使用しない訳なの... [続きを読む]
2006年07月15日 03:18

コメント

あや さんからのコメント

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

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

2006年06月20日 23:59
e-luck さんからのコメント [TypeKey Profile Page]

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

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

2006年06月21日 12:56
あや さんからのコメント

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

2006年06月21日 19:47
tonta さんからのコメント [TypeKey Profile Page]

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

2006年07月16日 23:59
e-luck さんからのコメント [TypeKey Profile Page]

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

2006年07月19日 16:48

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)