Home

Home ＞

逆引きCSSハック(IE8b、Opera9.5bも含めたブラウザ別CSSハック)

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

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

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 { ☆ }

テストしたブラウザ

パーマリンク:http://lpclips.net/2008/06/css-hack.html

42の素晴らしい名刺デザイン

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

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

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

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

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

絵葉書風。

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

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

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

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

"42の素晴らしい名刺デザイン" の続き

パーマリンク:http://lpclips.net/2008/05/awesome-business-card-designs.html

写真にふきだし付きでTwitterの発言を表示するJavascript

Twitterの発言を写真の上に表示させたら面白いな、と思ったので作ってみました。

こんな感じ。

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ファイル内で設定できます)、縦に長めのふきだしを使うとよいですね。

パーマリンク:http://lpclips.net/2008/05/twitteronimg.html

Twitterのアカウントを削除してもメールアドレスは残る

以前、現在使用しているのとは別のTwitterアカウントを持っていて、訳あってそのアカウントを削除し、現在のアカウントを取得しました。その際、同じメールアドレスで登録したのですが、登録時は何も問題はありませんでした。

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

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

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

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

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

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

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

"Twitterのアカウントを削除してもメールアドレスは残る" の続き

パーマリンク:http://lpclips.net/2008/05/twitter_mailaddress.html

ショートカットキーを割り当てられるランチャー「Trans Commander」

キーボード主体でパソコンを使う人におすすめのランチャー。

Trans Commander

"ショートカットキーを割り当てられるランチャー「Trans Commander」" の続き

パーマリンク:http://lpclips.net/2008/04/trans_commander.html

ブラウザのレンダリングエリアサイズを解析するサービス

一昨日書いた、いろんなサイトの横幅についての記事(すごい反響があって、驚きました)を読んでもらうと分かると思いますが、最近では幅900px以上が主流になりつつあるようです。

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

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

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

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

BROWSIZE.ORG

"ブラウザのレンダリングエリアサイズを解析するサービス" の続き

パーマリンク:http://lpclips.net/2008/04/post_59.html

今webサイトは幅何pxで製作されているのか

ポータル・検索サイト

Google770px
iGoogle920px842pxからのリキッド
Yahoo950px
Livedoor954px
Goo970px
MSN950px
Infoseek850px
Excite920px
フレッシュアイ986px
はてな920pxからのリキッド
@nifty945px
BIGLOBE950px
OCN950px
So-net970px
ODN760px
AOL900px
au one980px

//iGoogleの値を間違えて記述していたので修正しました。

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

YOMIURI ONLINE920pxからのリキッド
毎日jp950px
asahi.com780pxからのリキッド
NIKKEI NET985pxからのリキッド

大手ニュースサイト

ITmedia970pxからのリキッド
CNET Japan990px
CNN.co.jp1000px
Impress Watch Headline960px
TechCrunch Japanese962px
スラッシュドット・ジャパン915pxからのリキッド

web2.0系サイト

mixi950px
GREE740px
MySpace800px
Flickr848px
Twitter755px
del.icio.us785pxからのリキッド
Digg945pxからのリキッド
Facebook800px
Last.fm960pxからのリキッド
Photobucket970pxからのリキッド
Zooomr850px
Buzzurl930px

企業サイト

出光興産750px
富士通750px
日本板硝子765px
キヤノン730px
コスモ石油740px
トステム780px
明治製菓805px
三井物産770px
パイオニア755px
旭化成760px
宇部興産760px
日本ビクター750px
日本生命保険750px
リコー748px
アサヒビール771px
富士ゼロックス775px
大成建設896px
三井化学880px
三菱商事760px
三菱電機1017px

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

"今webサイトは幅何pxで製作されているのか" の続き

パーマリンク:http://lpclips.net/2008/04/post_58.html