コピー2016.03.09Webデザイナー歴10年。出来る技術は相も変わらずPhotoshopとHTMLとCSS。数年前から成長がビタッ!!!と、止まっているなぁ・・・と痛感する今日この頃。ブログを書くことで、少しでも早くWebの最新の動向を知ったり、仕事でつまづいたことなどをアウトプットすることでしっかり復習できればいいなぁと思っています。!今日ハマった問題はですね、特定のボタンを押したら、指定した位置からパネルがスーっと降りてきて、特定のボタンを押したらスーっと上に戻っていく、というCSSとJavascriptを使った簡単なアニメーションの作成中に事件は起こります。どこにハマったかと言いますと、iPhone6のSafariでは、スムーズにアニメーションしてくれたけど、iPhone5のSafariだと、許せるか許せないかくらいのカクカクした動き、なんかもっさりした動きになった、事件です。いや許せん!とゆーことで、このカクカクもっさりを解決しましたので、結論を先に言いますと、CSS3の「translate3d」を使うと改善されます。GPU?translate3d?なぜカクカクするか。なんでじゃろ?Webサイトを見る時に、HTMLとCSSで書かれたものがブラウザで描画されます。この時、ちょっとスペックが低かったり、古い端末だったりすると、GPUを使わずCPUだけで描画しようとして、処理が遅くなり、カクカクするんですって。じーぴーゆー??GPUっていうのは、超簡単に説明しますと、PCやスマホなどで画像処理を担当する主要な部品のことで、最新主要ブラウザはすべてGPUを使ったハードウェア・アクセラレーションに対応しています。Webサイトの制作においてもGPUを使った処理をすることで、滑らかなアニメーションを実現してくれるんです。GPU処理を使うにはどうしたらいいの??ということで、CSS3のtranslate3dが登場します。translate3dっていうのは、見て察しが付くと思いますが、3Dをごにょごにょしそうな感じがしますよね。「あっ、3D描画しなきゃじゃん!こりゃ重くなるなぁ。お前の出番だ!GPU!」っていうことになるんですってよ。本来であれば、要素の表示位置移動を指示するCSSのtransformですが、以下のように何の指定もしないで書いてもGPUが動いてくれるようになります。translate3d(0,0,0);}動きを指定しているクラスに、この一文を足せば、もっさりカクカクが改善し、スムーズで滑らかでヌルヌルした気持ちのいいアニメーションを実現してくれます。Web拡大も縮小もしてないのにIEだけ画像が荒い場合の対処法ブラウザチェックしてる際に発見したIE独自で起こるバグ。拡大も縮小もしてないのに、IEで見た時だけ画像が荒くなるという現象が発生。残念ながら最新のIE11でも起こります。いくつになってもIEとAndroid標準ブラウ...Webhetemlで無料共用SSLを使う為に新サーバーに移設した時のお話SSL化したいなぁ~と思い始めていた今日この頃。当ブログのサーバーでもあるhetemlが、タイミングよく色々新サービスを提供し始めてくれました。そもそも僕は2007年頃から個人的にサイトを作る場合にhetemlを使っていて、「違...Webページの途中から固定ナビゲーションへ切り替えた時にページ内リンクがずれる問題を解決した話レスポンシブウェブデザインでのサイト作成中に、今回僕がハマったことの備忘録です。limeTextに戻したという話これはもう超めんどかった。うちの会社はようわからんけど、EthnaっていうPHPを利用したWebアプリケーションフレームワークを使ってるからとかいう理由で、EUC-JPで記述する場合が多い。タイトルにもありますが、タッチデバイス制作時に使うcssの「tap-highlight-color」が効かない現象が発生。タップしてもリンク領域の色がなーーんも変化しない。地図アプリを起動して表示したいといったケースは多いと思います。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。ΔホームWeb己を奮い立たせる名言したい人、10000人。