2005年 11月 25日

NULL::colors

NULL::colors の外観

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

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

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

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

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

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

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

NULL::colors2

NULL::colors の外観

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

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

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

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

2005年 11月 23日

中央メニュー

pixceldiva

かっこいいなぁ。すごいなぁ。

2005年 11月 21日

俺的 XHTML 構造

だいたい決まった構造の 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. 以下似たような(ry
      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 なんですよ!! 俺は悪くない! 放せ!

2005年 11月 19日

border-collapse: collapse;

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

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

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

2005年 11月 18日

他人の CSS なんて読むものじゃない

セレクタの最後にはスペース入れようよ。ルールセットの中はインデントしようよ。宣言のコロンのあとにスペース入れようよ。

2005年 11月 16日

新しい CSS を適用

/img/remains/title.jpg

そろそろいぢるの飽きたので公開。

#top の画像に微妙なトリック使ってファイルサイズ軽減。NULL::something の部分は別の画像にして重ねてある。おかげで全体的に圧縮率を上げられる。1px バグで時々ズレる。

2005年 11月 13日

カススタスタタ、タラスタタ

Flickr: Creative Commonsピアノの鍵盤の写真を見たのが昨日の夜。一時間ぐらいで他のやつとてきとーなことして年賀状作成。たぶん作り直すんだろうな、と思いつつ。

今日の夕方になってそれ派生させた CSS を書き始める。どう考えてもリキッドにならなくて、いっそ固定レイアウトにしちまえよという悪魔のささやきに微妙な抵抗をしながら、適当に CSS 書いていると、ナイスな偶然に見舞われ一件落着。面倒くさかったけど……んで、さっきクロスブラウザ化を終える。テスト用のドキュメント作ってスクロールして眺める。ひたすら眺める。とりあえず眺める。そうやって眺めているとモニタに可愛い女の子が見えてくるがそれは幻想だから気をつけろ、と言い聞かせる。どうでもいいけどタオルが耳鼻科の臭い (ネブライザー) を放っている。なんだこのタヲルわっ。

さっき気付いたんだけど、今のスタイルになってから一年ほどになるらしい。なんか無駄に長いこと適用してんなぁ。そして長いこと適用していると、別のスタイルを適用させるのが怖くなってくる。何が怖いって共通 CSS (base.css) に、そのスタイルに微妙に依存するルールとか書いちゃっているからなんだよね。頭悪いな。

一旦ブラウザスタイルをリセットする CSS をかませようと思ったんだけど、読み込むファイルが増えるのでやめた。base.css に書いちゃうと別のスタイルがおかしくなるし……

そんなこんなで map 要素は Opera で inline である罠にひっかかったりした。map なんて使ってる人少ないから気にしないんだよな。

2005年 11月 12日

CSS Opera

最近 Gecko -> IE と確認して終わったなぁって感じで Opera で見ると見事に崩れることが多い。やれやれ。Gecko 以外のレンダリングエンジンいらんよ(素

でもなんか Gecko も border: none な状態だと margin だかなんだかが盛大にぶっとんだりする。なんなんだ。

2005年 11月 08日

なぜホームページだけ表示が崩れていたか

XML 宣言を省略したことにより、IE で描画モードが変わっていたせいみたいだ。唐突に思い出して omit-xml-declaration="no" にしたらなおった。でも CSS で解決する方法がないっぽいのはどうすればいいんだろ。標準モードで描画させないほうがいいんじゃないか。