☆ = 該当ブラウザに適応させるスタイル

★ = 該当ブラウザ以外に適応させるスタイル

IE6に適応

SELECTOR { ★ }
* html SELECTOR { ☆ }

IE7に適応

SELECTOR { ★ }
*:first-child+html SELECTOR { ☆ /*\*//*/ ★ /**/ }

IE8bに適応

SELECTOR { ★ /*\*//*/ ☆ /**/ }

IE6、7に適応

SELECTOR { ★ }
* html SELECTOR { ☆ }
*:first-child+html SELECTOR { ☆ /*\*//*/ ★ /**/ }

IE7、8bに適応

SELECTOR { ★ }
*:first-child+html SELECTOR { ☆ }

IE6、7、8bに適応

SELECTOR { ★ }
* html SELECTOR { ☆ }
*:first-child+html SELECTOR { ☆ }

IE6以外に適応

SELECTOR { ★ }
html>body SELECTOR { ☆ }

IE6、7以外に適応

SELECTOR { ★ }
html>/**/body SELECTOR { ☆ }

IE6、7、8b以外に適応

SELECTOR { ★ }
html>/**/body SELECTOR { ☆ /*\*//*/ ★ /**/ }

Opera9.27以下に適応

SELECTOR { ★ }
html:first-child SELECTOR { ☆ }

Opera9.5bに適応

SELECTOR { ★ }
body:last-child SELECTOR { ☆ }
html:not([lang*=""]) SELECTOR { ★ }
html:not(:only-child:only-child) SELECTOR { ★ }

Opera(9.27以下+9.5b)に適応

SELECTOR { ★ }
html:first-child SELECTOR { ☆ }
body:last-child SELECTOR { ☆ }
html:not([lang*=""]) SELECTOR { ★ }
html:not(:only-child:only-child) SELECTOR { ★ }

Firefoxに適応

SELECTOR { ★ }
html:not([lang*=""]) SELECTOR { ☆ }

or

SELECTOR { ★ }
html/* */:not([lang*=""]) SELECTOR { ☆ }

or

SELECTOR { ★ }
html:/* */not([lang*=""]) SELECTOR { ☆ }

or

SELECTOR { ★ }
html:not([lang*=""]) head~body SELECTOR { ☆ }

Safariに適応

SELECTOR { ★ }
html:not(:only-child:only-child) SELECTOR { ☆ }

or

SELECTOR { ★ }
body:last-child:not(:root:root) SELECTOR { ☆ }

テストしたブラウザ

• Windows
  • Firefox2、3RC
  • Opera9,27、9.5beta
  • IE6、7、8beta
  • Safari3.1
• Mac
  • Safari3.1

組み立てられる名刺。ミニカーのペーパークラフトになっています。

袋状になっていて、開けると中から植物の種が出てきます。素敵ですね。

風船名刺。そのままだと分からないけど、膨らますと読めます。

食べられる名刺。食べちゃったら名刺の意味が…ｗ

ポップアップカード風。こんな名刺を頂いたら、気持ちがほんわかしそうです。

絵葉書風。

栓抜きになっている実用的名刺。デザインとしてもかわいいです。

歯医者さんの名刺ということで、歯形がついています。

結婚相談所の名刺。「二人の関係修復します」といったところでしょうか。

USBメモリになっている名刺。効果はバツグンでしょうけど、ものすごくコストがかかりますねｗ

• 42 Awesome Business Card Designs (With Links to 100s More)

あんまり変わったものは煙たがられそうですが、こういう遊び心は持っていたいものです。

こんな感じ。

jsファイルとふきだし画像2x4パターン(横長・縦長x4方向)、まとめてzipにしましたのでよかったらどうぞ。

twitterOnImg.zip

使い方

1. twitterOnImg.jsを開き、使う画像等に合わせて設定をいじる。(←若干めんどくさい)
2. HTML上の表示させたい位置に以下のコードを挿入。

   <div id="twitterOnImg"></div>
   <script type="text/javascript" src="twitterOnImg.jsのパス"></script>
   <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/Twitterのユーザー名.json?callback=twitterOnImg&count=1"></script>

ブログのサイドバー等に表示させるなら、縦長の写真を適度に縮小して(jsファイル内で設定できます)、縦に長めのふきだしを使うとよいですね。

しかし、現在のアカウントで設定変更をしようとした時に奇妙なことが起こりました。

ユーザー情報などを変更して"保存"ボタンを押したところ、「Emailはすでに存在します。」とのエラーメッセージが出て、保存ができなかったのです。

これについてTwitterに問い合わせたところ、以下のような返答が返ってきました。

....そのエラーが出た原因は既存の [削除したアカウントネーム] というアカウントがあり、現在使用している [現在のアカウントネーム] と [削除したアカウントネーム] のメールアドレスが同じでした。私は以前登録された [削除したアカウントネーム] というアカウントを削除しましたので、....

つまり、Twitterではアカウントを削除してもメールアドレスはデータベースに残るわけです。

私の場合は同じメールアドレスでアカウント名を変えて登録しなおしただけなので別に問題は無いのですが、もし純粋に全てのデータを削除したいのであれば、アカウントを削除するだけでは不充分ということです。メールアドレスが残っているのですからそれ以外のデータも残っているかもしれません。

神経質になるなら、Twitterのアカウントを削除する時は、メールを送るなどして、すべてのデータを手動で削除するよう要求したほうが良いかもしれません。

暇な時に問い合わせてみようと思います。

Trans Commander

例えば、win+Alt+FでFirefox起動、win+Alt+TでThunderbird起動など。よく使うプログラムには直接ショートカットキーを割り当てると良いでしょう。

また、プログラムやフォルダを"グループ化"し、グループに対してキーを割り当てることもできます。

例えば、「インターネット」というグループを作り、その中に、Firefoxやその他ブラウザ、メーラーなどを登録します。そして、ここにwin+Vというキーを割り当てます。

これで、win+Vを押すと「インターネット」というグループ内に登録したプログラムの一覧が出てくるので、カーソルキーやマウスでローンチしたいプログラムを選択すればそれが立ち上がります。

グループ内でさらにグループ化することも可能なので、たくさんのプログラムを登録しても迷わず目的のプログラムをローンチできます。

ちなみに私は以下のように設定しています。

• win+Z よくアクセスするフォルダ
• win+C Webデザイン関係のプログラム
• win+V ブラウザやメーラーなど
• win+N その他プログラム(各種メディアプレーヤーやビューア等)
• win+T Gmail、LDR等のインターネットショートカット

インストール不要でレジストリを汚さない点も良いですね。フォルダごと持ち運べば他のパソコンでもそのまま使えます(プログラムやフォルダのパスが違う場合は書き直さないといけませんが)。

起動している間だけ機能するので、スタートアップフォルダにショートカットを置いておきましょう。

• VectorからDownload
• Vectorレビュー

※設定画面で、コマンドをドラッグ＆ドロップで移動しようとすると別のコマンドが移動してしまうというバグがありますが、一度"上へ"ボタンか"下へ"ボタンで移動してからドラッグ＆ドロップすると正常に移動できます。

私自身はこれまで「760pxこそが正義！(それかリキッド)」なんて思っていたのですが、調べてみて、そろそろ950pxくらいを視野に入れても良いのかなと思うようにもなりました。

とはいえ、実際ユーザーがどのくらいのサイズで閲覧しているのかを知り、検証しなければならないでしょう。

しかし、Google Analyticsなどでは、ユーザーの画面解像度までしか分かりません。

そこで役に立つのがこのサービス。

BROWSIZE.ORG

登録してJavascriptコードを解析したいページに貼り付ければ、こんな感じでそのページにアクセスした人のブラウザサイズ(サイドバー等を除いた実際にページがレンダリングされるエリアのサイズ)の統計が取れます。

さらに、解析するサイトの現在の横幅を入力しておけば、

こんな風に

• 何％の人が快適に閲覧しているのか。
• 何％の人が横スクロールバーが表示されているのか。
• 何％の人に対しては横幅を50px広げても大丈夫か。
• 何％の人に対しては横幅を100px広げても大丈夫か。
• 50px横幅を縮めるとさらに何％の人が快適に閲覧できるようになるのか。
• 100px横幅を縮めるとさらに何％の人が快適に閲覧できるようになるのか。

といったことが表示されるので、リニューアル時の参考になります。

各新聞社のニュースサイト

大手ニュースサイト

web2.0系サイト

企業サイト

以上は"「日経パソコン」企業サイトランキング 2007"の上位20サイト

//以下、2/24 19:22加筆

ショッピングサイト

早速自分のブログを表示確認してみましたが、特に問題はないようです。

ただ、Mac版とのレンダリングの違いがあるのか気になるところです。(FireFoxはWinとMacで違うようですし)

これで、WinとMacでレンダリングに違いないことが確定すれば、もうMacは買わなくてすむんですがね。(MacIEはもういいです；)

「Netscape Navigator」v9がβ公開だそうです。

ネスケってまだ開発終了してなかったんですね。

「Firefox」v2をベースに作成されているそうなのでインストール＆動作確認の必要は無さそうですかね。

しかし、今更ネスケの新バージョンなんて需要あるんでしょうか。使っている人はいるでしょうけど、Fx2ベースになるならFxのほうが断然良いでしょうし。

ネスケを使っている人は多分慣れているから、惰性で使っていると思うんです。

それが、いろいろ機能が追加されて、更にはインターフェースまでFxとほぼ同じに変わるとなれば、バージョンアップする人はいないんじゃないかと思うのです。

更に、窓の杜の記事ではFirefoxユーザーなら違和感なく利用できるだろうなんて書かれていますが、Fxユーザーはネスケには移行しないでしょう。恐らく。

どうなんでしょうかね。需要、あるんでしょうか。疑問です。

あくまで当時の考えです。基本的にはそんなに変わってないですが…。

• TITLE: 人はどうして死んだ人のことを覚えているのだろう
• DATE: 06/18/2005 02:49:57

もし僕が死んだら、そのことをできうる限り誰にも伝えないで欲しい

いなくなるなら、誰の記憶の中からもいなくなりたいから

• TITLE: お願いだから全部忘れてくれ
• DATE: 06/22/2005 21:12:48

“記録より記憶に残る人になりたい”なんてことを言う人がいる。僕は記憶にも記録にも残りたくない。

もし自分が明日死ぬと分かったら、僕は残された時間を、自分がこの世に生きた証となるものを出来る限り消すことに費やすと思う。

でも、記録は消せても、記憶は容易には消せない。

いろんな説があるけれど、僕は人は死んだらそれで全て終わると思う。命も精神も魂もやがて肉体も、無に帰すと思う。

だから死ぬのはとても怖い。僕の自我は全て無くなる。そう考えるととても怖い。

でもそれと同じくらい怖いのが、そうして完全に無くなった後にも、誰かの記憶には残ることだ。

消えるなら一緒に誰の記憶の中からも全部消えてほしい。

でも残る。

お願いだから、僕が死んだら、二度と僕のことを思い起こしたりしないでくれ。

全部、僕に関することは何もかも、忘れてほしい。それが一番の弔いになると思ってそうしてほしい。

僕が消し忘れた記録がもしあったら、それと共に全て葬り去ってくれ。

お願いだから

• TITLE: 死を思えば背中がサムイ
• DATE: 07/09/2005 15:27:31

最初からそう望んでそうしてきたわけではないのだが、人と接することを嫌い、できるだけ人と関わることを避けてきた結果、あまり誰からも好かれることも嫌われることもなく、俺を知る大体の人にとって俺は“どうでもいい”存在だ。

家族を除いては、俺を大切に思い、俺が死んだら哀しむ人は、今のところ一人しか思い当たらない。

前にはもう一人いたが、彼は死んでしまった。

自分の死を哀しんでくれる人があまりいないというのは凄く淋しいことだけど、こういう生き方の代償として仕方のないことだと思っている。

そういう俺を哀れに思うかもしれないが、同情には及ばない。俺は自分をそれほど不幸だとは思っていない。

ただ、自分とこの世とを繋ぐものがあまりに弱く、希薄であることが少し不安ではある。

最後の一人がいなくなり、家族もいなくなってしまったら、俺は生きる理由を失う。

自分自身の中に今それはない。

それは確かに哀れかもしれない。

母や父や祖母や祖父や妹がいるからまだ死ねない。それが今俺が生きている理由の大半だ。

それと死への恐怖。

でもそれは却って幸福なことなのかもしれない。

何といっても少なくとも祖母が生きているうちは、絶対に死ぬことはできない。

しかし祖母の死に対面することは、自分の死と同じくらいに恐ろしい。

同時に死ねたらいいかもしれない。そんな都合のいいようなるわけないけど。

• TITLE: 褪色の傾き、その手触り
• DATE: 07/18/2005 15:26:58

自分が死んだら哀しむ人がいる。それはとても幸福なことだ。

俺はどんなに辛くなっても、自分が死んだら家族がどれだけ哀しむか、それを考えると死ねない。父や母や祖母や祖父よりも先に死ぬなんて、絶対にしてはいけないことだ。

そう思える俺はとても幸せな人間だ。

それから単純に、死への恐怖が俺を死なせない。

いろんな考えの人がいると思うが、俺は、人は死んだらそれで終わり、死後の世界なんてないし幽霊も魂もないと思っている。

だからたぶん、死後の世界があると思っている人より死への恐怖はずっと強い。

自分の中にも外にも、死ねない理由がたくさんある。

それは幸福なことだと思う。

でも。

"死ねない理由"と"生きる理由"は違う。

哀しむ人がいるというのも恐怖も、"死ねない理由"だ。

人は"死ねない"という理由だけで生きていけるものなのだろうか。

俺は今、自分の中に"生きる理由"を見出すことができない。

だがたった一つ。"彼女"が俺を必要としてくれている。たった一つそれだけが、俺の"生きる理由"になっている。"彼女"が俺を必要としてくれているから、俺は生きていなければならない。"死ねない"んじゃない、"生きていなければならない"んだ。

それだけが俺が"生きる理由"だ。それがある、それは何よりも幸福なことだ。

だがもし、"彼女"がもう俺を必要としなくなったら、俺はどうなるのだろうか。

人は"死ねない"という理由だけで生きていけるものなのだろうか。

生きていけるかもしれない。でも死ねないから生きているだけの人間は生きているといえるだろうか。

だが死ねない理由があるうちはまだいい。

きっとそう遠くない将来、考えたくないけど、祖母や祖父は死ぬ。

いつか父も母も死ぬ。

死ねない理由がどんどん減っていく。

死ねない理由が死への恐怖だけになったとき、

俺はもう生きている自信はない。

たぶん大したためらいもなく、俺は自分の命を消すだろう。

長いです。

• TITLE: 友人が死んだ
• DATE: 02/26/2005 00:26:27

彼は、持ち前の明るさとプラス思考と図々しさで、僕の心の扉の鍵を抉じ開けて無理矢理横に居座った。日が経つにつれて、僕の方も彼を友達だと思うようになった。それが高校3年の頃だ。

大学を決める時、彼は僕と同じ大学に入りたがった。それは彼の学力で叶わなかったが、同じ都内には住むことができた。

高校を卒業し、大学に入り、僕はたくさんの友達を捨てた。日に日に携帯電話のメモリから、名前と電話番号とメールアドレスとが消えていった。だが、ただ一人、彼とだけは、交流を続けていた。

それは彼の明るさとプラス思考と図々しさのせいでもあったが、僕の方も彼との縁は切りたくはなかった。

彼が自動車の免許を取った時、二人でレンタカーを交代で運転しながらドライブに行った。彼の部屋で飲み明かしたこともあった。嫌いなカラオケも、彼と二人なら嫌じゃなかった。

彼は僕が一番の友達だと言ってくれた。僕にとっても彼が一番の友達だった。

だが大学に入って４年経ち、僕は留年したのでまだ学生だったが、彼は就職して、会う機会も少なくなった。そのうち僕も大学を中退して就職し、もうほとんど会わなくなった。

が、ある日彼からメールが来た。自動二輪の免許を取ったから遊びに行こうとのことだった。僕は、いいね、海でも行くか、と返した。だが、休日が噛み合わず、その話は無くなった。

僕はただ、事故に遭わなければいいが、とだけ思った。

そして2月24日、夜。

彼から着信が何回かあった。僕はうたた寝していて出られなかったのだが、うたた寝から起き、何回目かの着信で漸く気付いて電話に出た。

しかし、電話の主は彼ではなかった。女性だった。その時点で嫌な予感はしていた。

電話の主は彼の妹だと名乗った。

そして

彼の死を告げた。

バイクでスリップし、対向車に轢かれたのだそうだ。

間違いなく僕の何倍も何十倍も辛いであろう彼女は、すすり泣きもせず、弱々しい声を出すでもなく、ただ淡々と、切り口上で、告別式の日取り等を告げて電話を切った。

僕はただ、ショックだった。泣きながら、「何やってんだよ」と呟いた。

翌日、告別式には、まだショックから立ち直れず、辛くて参加できなかった。

気持ちの整理がついたら、彼の家に行こうと思う。

• TITLE: 人間という存在に憎しみを覚える時
• DATE: 03/19/2005 10:29:11

満員電車。

昨日の帰りの話。

車両のドアが運転中に開いたらしく、点検のために運行がストップしていた、その影響で、山手線の車内は一両当りの乗客数が尋常でなかった。

圧死するんじゃないかってほどぎゅうぎゅうで、身体の中で動かせるのは、首から上と手の指と足が少しだけ。鼻が痒くなってもかけない。

肩に掛けていた鞄は持ち主とは別の場所で、エアパッキンで梱包されたみたいに押し潰されている。うっかり手を離そうものなら、二度とこの手に帰ってこない気がする。

なぜこの人たちは電車に乗っているのか。と、主観を離れてふと思う。

なぜこの人たちは電車に乗るのか。

仕事に行き、家に帰るため。

なぜ仕事に行くのか。

日々の糧を得るため。

なぜ日々の糧を得ようとするのか。

生きるため。

なぜ生きようとするのか。

死を恐れるから。

なぜ死を恐れるのか。

自分という存在を無に帰してしまうものだから。

彼のことを思った。もう三週間が経った。

時が経つにつれ辛さは和らいできたが、それは彼の死を受け入れることができてきたのではなく、実感が薄れてきたからだ。

ひょっとしたらまた、こっちの都合もおかまいなしに電話かけてきて「遊ぼうぜ」っていってくれるんじゃないかなんて、そんな気さえする。

でも、もう戻ってはこないのだ。

池袋で大半の人が降り、僕も降りて、やっと開放された。埼京線に乗り換えようとしたが、そっちも同じくらい混んでいたので、池袋からは歩いて帰ることにした。2、30分だから大した距離じゃない。ただ、薄着だったので少し寒かった。

彼は、死ななきゃならない理由なんて無いのに死んだ。僕は、生きる理由も無いのに生きている。

人間なんて、誰かの気まぐれで生かされているんじゃないかなんて思う。ピンとはじけばころっと倒れる。

その存在の危うさと、うっすら冷たい風に軽く身震いしながら、明治通りを家へと歩いた。

• TITLE: 失われたものは一つではない
• DATE: 08/12/2005 15:38:01

土曜に帰省し、日曜に彼の家を訪ねた。

もうじき半年経つ。

てっきりもうお墓に入っていると思っていたが、ご両親が近くに置いておきたいということで、お骨はまだ彼の家にあった。いつも笑顔を振りまいていた彼が、この小さな箱の中に、ものもいわずに静かに納まっているのだと思うと、哀しく、重苦しく、何か恐ろしいような気持ちになった。

仏壇に飾られた彼の写真を見ると、やはり涙ぐまずに入られなかった。

本当に彼は死んでしまったのだ。

お父さんは彼にそっくりだった。彼のことを話しながら、涙を浮かべていた。彼の死の報はどれほどの衝撃だったろうか。その哀しみは、俺には到底計り知れないものだ。時が経って少しは落ち着いたかもしれないが、半年という期間はそれを忘れるには短すぎる。

今になっても思う。なぜ彼のような人間が死ななければならなかったのか。

あの少年のような屈託のない笑顔を、もう見ることはできないのだ。

もし神というものがあるなら、それはなんと無慈悲なのだろうか。

一昨日、友人と会った時、友人は、彼はまだ生きているんじゃないかと思っている、と言っていました。

本当にそうだったらどれだけいいか。

僕は彼の死を受け入れています。

しかし納得はしていません。

どうして彼のような良い人間が死ななければならなかったのでしょうか。

いまだにやるせない気持ちでいっぱいです。

どこか飲み行こうか迷って結局彼の家へ。

3時間ほど、仕事の話や、2年前にバイク事故で死んでしまった友人のことなどを話しました。

彼とは音楽仲間だったのですが、彼も自分ももうバンドはやっていず、彼はこの半年で1曲作った程度、自分も今は作曲はほとんどしていません。

何か、夢破れたものたちが語り合っているようで、軽く切なくなりました。

昔はスーツを着たサラリーマンにだけはなりたくないと思っていたのに、今まさにそれになっている。…まあ、自分は内勤なのでスーツは着てはいないんですが、サラリーマンであることに変わりはありません。

自分たちのような人間はきっとたくさんいるのでしょう。持っていた夢を諦め、地味な道を歩む。しかしそれさえ少しも磐石ではない。

帰り道、雨が降り始めていました。自転車を家までがむしゃらにこいだのは、濡れたくなかったからだけではなかったかもしれません。

※この記事のデータは古くなっています。最新版はこちらを参照して下さい。→逆引きCSSハック(IE8b、Opera9.5bも含めたブラウザ別CSSハック)

方々でまとめられているので今更感がありますが、どうも「*+html」のハックがOpera9に適応されないようなので、個人的にまとめなおすことにしました。

ちなみにNetscapeは無視しています。

IE6のみに適用

* html div { }

IE7のみに適用

*+html div { }

IE6以外のモダンブラウザに適用

html>body div { }

IE6、7以外のモダンブラウザに適用

html>/**/body div { }

OperaとSafariに適用

html:first-child div {  }

Safariのみに適用

div { Safari以外のスタイル }
html*div { Safariのスタイル }
* html div { Safari以外のスタイル } 

Operaのみに適用

div { Opera以外のスタイル }
html:first-child div { Operaのスタイル }
html*div { Opera以外のスタイル }

Firefoxのみに適用

div { Firefox以外のスタイル }
html>/**/body div { Firefoxのスタイル }
html:first-child div { Firefox以外のスタイル }

問題はないはず。どこか間違っていたら教えて下さい。

参考サイト

モダンブラウザ向けCSSハック：ウェブネタブログ

IE7のCSSバグとOpera CSS Hack | F+R (FplusR)

CodeWeb: ブラウザ別CSSハック一覧表

CSSハック | BLOG × WORLD ENDING

世界の名所をマウスでグリグリして360度見渡せるサイトです。

Saint Sulpice Paris

Saint Sulpice Paris

Saint Sulpice Paris

ズームアウトしすぎると歪んでしまうけど、うまくコントロールすると結構臨場感があり、名所旅行を疑似体験できます。

まあ実際の景色には遠く及ばないのは当たり前ですが、これはこれでなかなか面白いものです。

いろんな楽器とコラボしていて、特に和太鼓が目を引きます。

曲は「Throw Me Away」