2005年 11月 27日

NULL::colors いろいろアップデート

color web design javascript

NULL::colors2 飽きるまでいぢる。

とりあえず、クッキーからの自動復帰を適当に実装。無駄に JSON 使ってる。このへん実装しなおすかもしれない。

んで URL のハッシュからの復帰を実装。TCS のターゲット色と、プレビューエリアの4箇所8色 (前景・背景) を保存する。Result をクリックした後でてくる Static Link にリンクを貼ってある。要 UI 改良。ハッシュから復帰すると問答無用で Cookie がリセットされるのは挙動としてどうなんだ。

あとは、気に入った配色ができたら保存して、サムネイル付で読み込みできるようなのが欲しい。ついでに、コレ！ってのができたらサーバー上に保存しておくとか、そういうの。

Cookie ってどれぐらいの大きさまでいけるのかなぁ。

クッキーの最大サイズ制限について

関連エントリー

NULL::colors 色セットの保存

color web design javascript

NULL::colors2 飽きるまでいぢる。

でもってプレビューつきセーブ・ロードを実装。スロット9箇所。クッキーサイズが 2k ぐらいになるので調度よさげ。

Firefox 1.5 で outline が使えるようになったので使ってみた。既に Firefox 1.0.7 とか過去のもの扱い。だんだん俺の俺による俺のためのカラージェネレータに。最初はてきとーに作って放置する気だったけど微妙に自分でも使おうという気になってきた。

Result で明度差・色差と、WCAG1.0 による判定を表示するように。

上から3番目がコンテンツ本文なので、それが false でなければ気にしなくてもいいと思う。

関連エントリー

2005年 11月 26日

NULL::colors2 D&D

color web design javascript

NULL::colors2 をさらにいぢくる。ドラックアンドドロップで色の変更できるようにしてみたり。やばい楽しい。でも気がつくとクロスブラウザのこと考えて鬱になる。「ああーこのコード IE じゃ動かないな」「Opera はちゃんと解釈するんだろうか」「opacity とか Gecko でしか使えないじゃん」っていう自動的思考。微妙に病的。そして考えてから、Firefox で動けばいいんだった！と気づいて晴れやかな気分に。やりたい放題というのはすばらしい。

カラーコードがコピペできんな。どうしよ。

プレビューの色をクッキーに保存させたい (さらに URL からも復元したい) んだけど、いまいちうまいやりたかがない。

前景色と背景色を一部決めうちにしているんだけど、なんかいい方法ないかなぁ。D&D したときスムーズにやりたいからダイアログとかは嫌だしなぁ。

関連エントリー

2005年 11月 25日

NULL::colors

web css design

NULL::colors の外観

NULL::colors Firefox Only. カラージェネレータ

こういうツールは IE に対応させても嬉しくないので IE にはハナから対応させる気がありません。(IE コンパチじゃない、すなわちオリジナルの Triangle Color Selector を微妙に改良したのを使用) Opera には対応させようと思ったんだけど、なんかいろんな処理がいちいち4回走ってうざいのでやめた。

色の計算式はソレっぽくなるのを試行錯誤してみた。これから変わるかもしれない。処理自体はごく単純。

むしろ俺が色の計算式を変えて遊ぶのが楽しい。だからユーザが動的に計算式変えられるようにしたら面白いのかもしれない。とりあえずめんどっちいのでアイデアだけメモ。

クリック＆ドラッグがうまくいかなかったのは preventDefault() をやってなかったからだった。

ロード直後の真っ白なパレットに、TCS をクリックすることにより色がドバっと発生する、この瞬間が萌えませんか？　お前だけだよってか。

dump でコンソール流れまくります。

関連エントリー

NULL::colors2

web css design

NULL::colors の外観

セクション分ける必要があるのか微妙。NULL::colors2

もう少し実用的かつ美しくしてみる。カラフルなのは楽しい。

表示されているパレット 6x3 のうち、プレビューに使われるのは一番左の2列だけです。

今のアルゴリズムだと彩度低くて明度高いとイマイチ。

関連エントリー

2005年 11月 23日

暇つぶし。色、いろいろ

web script javascript

色 : ランダムにてきとーな色を発生させるだけのブックマークレット。長時間連打すると眼が疲れる。Firefox でしか見てない。

さぁ！　これで新しい色との出会いを体験してみませんか☆

出会い系スパム、のように。

関連エントリー

2005年 11月 21日

俺的 XHTML 構造

sw web csS

だいたい決まった構造の HTML を書くようになってきたので、俺の場合を紹介してみる。body 以下を書く。

  1. body
    1. (div#all)
      1. h1#top
        1. a
      2. div.section#navigation
        1. h2
        2. (p#skip-to-main-content)
          1. a
        3. map
          1. ul
            1. li#navigation-home
              1. a
            2. 以下似たようなのが続く
      3. div.section#content
        1. div.section
          1. h2
          2. 内容
        2. 以下似たような（ｒｙ
      4. div.section#footer
        1. address

おおむね上のような感じ。っていうか ol, li で書くとすげぇ大変なんですが！！

これはもちろん現実的にこうなっただけであって、いろんな妥協に溢れている。

body 直下の div#all なんてもちろんいらない要素だけど、実際問題 CSS 書くときに、これがあるだけで、クロスブラウザ用の無駄にややこしいハックを減らせるので、安全になる。幅も広がる。

div#navigation map なんて、パっと見変な風に見えないかもしれないけど、ぶっちゃけた話、こじつけられた div 要素みたいなもの。意味的には問題ないので、使ってみると結構便利。ただし display: block を書かないとハマるときがある。こいつには一枚多く背景に画像突っ込めるわけだ。あと実は p#skip-to-main-content も、アクセシビリティの配慮とか、そういうの関係なく、あると便利な要素の一つ。サイトによっては書かなかったり (そもそもナヴィゲーションがないとか) するけど。

できるだけ意味をこじつけて、div じゃない要素を使おうとしているだけ。いろいろ置換してけば div 厨になるんです。なんでもいいけど、悪いのは微妙な仕様の CSS と、その CSS に対応してない IE なんですよ！！　俺は悪くない！　放せ！

関連エントリー

CSS 本来の力・XHTML のあるべき姿

web sw

上のセクションに続き (とはいえ書いたのはこっちが先だ。つまり、まだ今「上のセクション」はない) 割と理想的な XHTML の姿と、CSS 2.0 の本来の姿。 True Power of CSS

body 直下に h1 を置き、サイト名やら、文書タイトルを書き直すのはバカらしい。既に title 要素を書いているのだから、それを利用すべき。これで hn の数字が全体的に一個減る。

本当はフッタ情報 (書いた人やら、連絡先やら) も body 内に書くものじゃない気がする (どっちかといえばメタデータなはず) けど、とりあえず仕方ないので address 要素置いてる。CSS からリンクは作れないし、フッタっぽく表示させるのは困難。

関連エントリー

2005年 11月 19日

Opera のフルスクリーンモード

web browser

Opera のフルスクリーンモード (F11) は media が projection 扱いみたい。知らなかった。media="screen,tv,projection" と書くことにしよう

Opera のフォント設定をヒラギノにしてサイズも大きめにしているんだけど、これでたまにフルスクリーンにしてウェブ見ると気持ちいい。

関連エントリー

border-collapse: collapse;

css web

Gecko で border-collapse: collapse; つかうとバグるような。padding がシカトされる。

collapse ってデフォルト値なんだけどなぁ。

だめだわけわからん。テーブルの右マージンがシカトされる。意味わからん。テーブル周りの CSS 嫌いだ。IE はこんなところでもゴーイングマイウェイってるっし。うざ。

関連エントリー