k13style｜Kentaro Mito

当たり前のタイトルですが、とりあえず仕事用にメモ。
まだ検証はしていないので、後々修正上書きするかもです。

[CSS Cheat Sheet]
IEのヴァージョン別に対応しているCSS

http://www.tutorialfeed.org/2009/10/visual-cheat-sheet-css-compatiblity.html

[WebFont]
IEに対応させるためには

http://ascii.jp/elem/000/000/465/465458/

■　TTF → EOT
IEでフォントを読み込ませるためにTTFからEOTへコンバート

http://ascii.jp/elem/000/000/465/465463/img.html

■　OTF → EOT
フォントがOTFの場合

http://onlinefontconverter.com/

[IE6なんか対応しない人へ]
これは自分が作るサイトにはどんどん貼付けていこうかと。

http://www.ie6nomore.com/code-samples.html

[CSS]
Rotate

http://css3please.com/

——–追記———————————–

IEで画像やテキストをRotateさせる方法
#test{ filter:progid:DXImageTransform.Microsoft.Matrix(色々なの入れる)}
こんなよくわからないCSSをかかないといけません。参考サイトは下です。

●Matrix Filter

あと、回転させる角度はタンジェントで出さないといけないらしく、いちいち計算してられないので下記サイトを参考にしました。ありがとうございます。
※このサイトIEでしかうごきませんでした。

●計算してくれるサイト

ただ、IEでpngの画像を上記の方法で回転させると、IE6のようにpngの透明部分が黒くなったり白くなったりしてしまうので、この方法で回転させられるのはテキストのみがお勧めです。
じゃあ、IEではどうするのか、というとjquery使います。

●jQueryRotate

ユーザーエージェントでふりわけてIE7,8のみ読み込ませるようにします。
ここでなぜユーザーエージェントなのか、というと、このプラグインを使用すると回転する画像を一番長さの長い(width,heightで比較して)領域の正方形のcanvasをつくりそこに画像を表示してまわすので、Firefoxでは回転させた画像にリンクを貼っているとヒットエリアが画像の倍以上となってしまい、長方形の画像を回転させた時にヒットエリアが色々なところに被ってくる、という弱点があります。
※別のプラグインだとどうなるかはわからないですが。
なので、Firefox,Chrome,Operaは独自拡張CSSの-webkit-transformなどを使用するのが良いです。