トップ 最新 追記

『よだきがり』のたわごと

2007|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|11|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|07|08|09|10|
2011|03|04|
2012|10|12|
2013|04|

2013-04-25 [J] cssspriteでRetina用cssと非Retina用の画像とcssなんて…

_ スマフォのCSS/HTMLについて真面目に考える

今まで不真面目だったのか?ってわけじゃないですけど、自分なりにそろそろまとめようかなと。

スマフォのHTMLってさfooterとか使えるからいいよね!って思うんですが、これが画像になるとAndroidのdpiとかiPhoneのRetinaとかの都合で超絶に面倒なんですよね。

まぁ、img属性のは倍の大きさのものを用意してwidhtとheightを1/2にすればいいんだけどさ、これがcssspriteを使うとなるとね…

で、これを色々調べると「@2x.css」を用意しましょうとか平気で言ってるわけですよ。

んな、バカな!

cssと元の画像ファイルを複数用意し、ただでさえメンテナンス性の悪いcssspriteなのに4ファイル更新とか鬼畜すぎるわけですよ。

_ そんなにフロントエンドエンジニアを苛めたいか?

大体ね、このフロントエンドエンジニアってのはさ、変だよね、通常言語ってなると1つの言語とSQLとかでどうにかなるわけじゃないですか?

それをやれ、HTMLだのjavascriptだのcssだの最低3個を扱わないといけないですからね。

これにサーバーサイドの言語にプラスして画像を作るとw

こんなことしてると、「@2x.css」の為に「cssと画像の作り直しなんてできるかい!」ってなります。

本当に作業してる人ならviewportのinitial-scale/minimum-scale/maximum-scaleを0.5にして倍で作って行くわ!ってなるはずなのにね…

_ viewportの0.5じゃぁダメなんだよ…facebookとかの外部のボタンは…

いや、最初ねtransform:scale(2.0);でボタンを倍にしたんですけどね、iPhoneじゃぁクリックできないわけですよ。表示はされるのに(2013/4/25現在ね)

じゃぁ、どうするかって?

_ Retinaにはbackground-sizeとかを1/2で記述する!!!

つまり元々Retinaに最適化してるcssspriteの画像はそのままで、cssでcssbackground-position、background-size、width、heightを半分にすればいいわけ。

ところがですよ、通常のcssspriteのオーサリングツールなんてAdobeのFireWorksや各種webサイトのを見回っても、そんなもんないわけですよ。

_ ということで、いつものように「なけりゃぁ作ればいい」の精神で作りました。

一応cuiでwindows専用ですが、mac版も元のRuby scriptを配布すればいいだけなんで、もうちょい機能を付けたり、windowsはGUIにしてもいいかな?って思ってます。

まぁ、興味のある方はデバッグを含めてDLのコーナーからDLして使ってみてください。