CSSアニメーションがGPUで処理されているか確認する方法
CSSアニメーションによるGPU処理 昔はWebサイトでアニメーションを行う際はJavaScriptがよく使用されたが、現在はCSSアニメーションが使用されることが多い。 理由はJavaScriptは主にCPUで処理するが、CSSはGPUを併用して処理するため処理負荷が軽く、スマートフォンなどの低スペックな端末でもスムーズにアニメーションを行うことができるからだ。 ただし、CSSを使用してアニメーションを行っていても、正しく使用しないとGPUで効率的に処理することができない。 GPU処理の確認方法 Chromeの場合はまずChrome Developer Toolを開いて3点ボタンをクリックしてRenderingを選択する。 RenderingタブでPaint flashing、Layer borders、FPS meterにチェックを入れるとアニメーション部分に枠線が付き、fpsやGPU
Webサービス開発でのCSS設計を考える - 人類はCSS設計に敗北したのか？ - - Qiita
AdventCalendar 初投稿です。 人類はまだ敗北していません（たぶん） BtoBtoCのWebサービス開発を何回か行ってきた結果、FLOCSSとECSSを組み合わせたCSS設計に落ち着いたので、そのディレクトリ構成に至るまでの経緯と、実際のコード・失敗談や良かったことをまとめます。 Webサービスのページ構成 ページ数の差はあると思いますが、おおむね以下のようなページ構成をとっているのではないでしょうか。 サービスページ（トップページや各コンテンツ） マイページ その他のページ（利用規約、プライバシーポリシーなど） ページごとに適する設計を考える サービス全体でひとつのCSS設計を選択するよりも、ページの特性ごとに共通化するor共通化しない、という方針を選択することによって、スムーズなコーディングができることに気づきました。 サービスページ トップページや一覧ページ、詳細ページな
バッドデザイン賞を勝手にノミネートしてみた-2017年度版- - 酔いどれデザイン日誌 - Drunken Design Diary -
忙しい年の瀬ですが、皆さま如何お過ごしでしょうか。 さて、皆さんは「グッドデザイン賞はあるのにバッドデザイン賞が無いのはおかしい」という風に思ったことはありませんか？私は職業柄、日常生活で見かけた良いデザイン事例と悪いデザイン事例を写真に撮ってストックしているのですが、その中には「本当にこれギャグじゃないの？」というレベルのバッドデザインがあったりするんですよね。 良いものを良いと評価することも大切ですが、良くないものを無視するのは人類の進歩に大きな影を落としているような気さえします。ということで、勝手にアワード化してしまいました。2017と付いてますが、私が見つけたのが2017年だったというだけで製造年度などとの相関性はなく、特に意味はないです。あくまでジョークコンテンツとしてお楽しみください。 【追記】Twitterの方で一部画像が自分で撮影したものではないのでは？とご指摘頂きました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーが予測可能なスワイプするレスポンシブTableスタイル - Webを楽しもう「ドークツ」
loading.io - Your SVG + GIF + PNG Ajax Loading Icons and Animation Generator
