※スマホ対応はしてません。

カテゴリー: CSS

「フロントエンドエンジニア養成読本」を読んで、エンジニアになってよ!

カテゴリー: CSS, JavaScript, Web

著者の方々から頂いておりましたので、遅まきながらご紹介さして頂きたいと思います。

(すみません、半年近く経ってしまいました……。)

概要

  • ウェブのクライアント側の濃い技術がたっぷり
  • UXの話からブラウザーの仕組みまで
  • 難易度は高め、だけどそこまで高くはない
  • 全てを理解できなくても、勉強の指針として目次を頭に入れておくと良さそう
  • ツール解説は特になし
  • 「10年先も役立つ力をつくる」は本当だと思う

    (さらに…)

CSS 珍百景 Advent Calendar 2014 – 02日目

カテゴリー: CSS

すみません、三日目と勘違いしてました……。

今回はtransform:scale()とzoomの併用についてです。バグじゃないです。

デモ:

スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ!(Frontrend Advent Calendar 2013 – 06日目)

カテゴリー: CSS, JavaScript

この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。(これ今後数年で大流行りしそうに思うので、未読なら是非!)

さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが(周回遅れ)、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。

どうやったらスムーズに動くかってのを解説したいと思います。

なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。

先に結論

概念的なの

  • GPU合成レイヤーを適切に使うと早い
    • いわゆるハードウェアアクセラレーション
  • 何がCPUで、何がGPUで描画されるか知っておくべき

実際的なの

  • transformやopacityはイケてる
    • 他のアニメーションはコスト高いっぽい、特に色
  • 合成レイヤーの内容を変更しない
  • パラパラアニメは全コマ読み込み可視性の制御で
  • アニメの「コマ」が少なければ少ないほどハードウェアアクセラレーションの効果が出る

ぬるぬるアニメ、ざらざらアニメ

まずは実例からご覧頂きましょう。

(さらに…)

全世界で最も多く利用されているCSSプロパティを発表します。ぱんぱかぱーん!(CSS Property Advent Calendar 2013 – 03日目)

カテゴリー: CSS

CSS Property Advent Calendar 2013の3日目の記事です。昨日は越智さんのもっと広まって欲しい CSSでした。明日も越智さんです。

CSSじゃなくてCSSプロパティのAdvent Calendarです。CSSには大量のプロパティが定義されており、それを組み合わせて様々なデザインを作るわけですが、ああ何と言うか、もう前置きも面倒ですね、はいじゃあ本題に入ります。

順位発表

現在世界中の閲覧されたウェブページでのCSSプロパティの使用率の統計、こんなんになりました。(2013-12-04 02:07現在。あと適当に数値を丸めています。)

(さらに…)