【CSS3】 iPhone では、position より transform:translate() の方が再描画コストが安い？
ちょっと前の記事で、border-image を使うと iPhone の Mobile Safari のアニメーション処理がカクカクになってしまうという実験をやったが、今回はそれの続きで、iPhone で、重ねて表示したレイヤーにスライドアニメーションを適用する場合の再描画処理についての実験。 題材は、前回の実験のパフォーマンステストGを掘り下げた感じ。 仮説 次の仮説について検証してみた。 実験 今回実験用に用意したHTMLはこちら。 パフォーマンステストAは position と top を操作してパネルをスライドさせている。パフォーマンステストBは期待される動作はAと同じだが、 transform:translate() を使って実装したもの。 iPhone 3GS + iOS4 + Mobile Safari(AppleWebKit 532.9) で動作実験をしたところ、次のような
考察：Appleはスマホサイトを作らない。
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
Facebookでグループを管理するコツ(まとめ版) « Miapch! >>> Waku's Blog
facebookのグループ機能を、私はたいへん気に入っています。 グループの管理者をつとめさせていただくなかで身につけたコツのようなものをまとめておきます。 1 投稿の順番を調整しよう グループを管理していると、ウォールの投稿や写真・ドキュメントなどの順番を調整したくなることがあります。 （例えば、連絡や投稿規定などを上の方に表示しておくと便利です。） グループのウォールの並び順は、投稿とコメントの最新更新日時順となります。いいね！は含みません。 つまり、上に表示させたい投稿にコメントすると、その親投稿が、リロードしたとき、他の誰かがグループのウォールを表示させたときにウォールの一番上にきます。 そして、内容はなんでもいいのでコメントをして、リロードで上に来たことを確認したあと、そのコメントを消しても、順番はそのままになります。 この コメント→リロード→確認→コメント削除 の手順を繰り返
Mì Tôm TV – Trực tiếp bóng đá Mitom rõ nét, không quảng cáo
Mì Tôm TV là trang web lý tưởng dành cho những tín đồ bóng đá, mang đến trải nghiệm xem bóng đá không giới hạn với phong cách hiện đại. Nhờ sự hỗ trợ mạnh mẽ từ công nghệ tiên tiến, chúng tôi đã và đang từng bước chinh phục hàng triệu trái tim yêu bóng đá và khẳng định vị thế là một trong những website thể thao hiện đại bậc nhất hiện nay. Mì Tôm TV trực tiếp bóng đá là gì?Ngày nay, xem bóng đá trự
ドアラ、パフォーマンス失敗多すぎて２軍落ち…中日 （スポーツ報知） - Yahoo!ニュース
中日の人気マスコットキャラクター、ドアラの２軍降格が２１日、決定した。８回表の相手チームの攻撃前、一塁側のファウルゾーンで行うバック宙の成功率が非常に芳しくないことを、球団が問題視。チームの士気にも影響するため、７月１日のウエスタン・リーグ広島戦（ナゴヤ）から２軍で再調整することになった。 マスコット界のスター街道を歩んできたドアラが、危機を迎えた。本拠地で行う恒例のパフォーマンスは、テレビ中継で必ず放送され、注目度は高い。球団でも今季からナゴヤＤの大型スクリーンでバック宙の成功数と失敗数の表示を始めたが、交流戦終了時点まで２２回挑戦して、成功はわずかに４度。成功数の倍以上の１８回も失敗しており、ファンだけでなく現場の選手からも苦情が寄せられていた。球団関係者は「これまでは悪くても大体半分ぐらいは成功していた。こんなに悪い年はない。このままでは、企画の存続に関わる」と、２軍落ちを決めた理
Webデザインってなんでしょうね？（笑） | gaspanik weblog
なんかこちらの記事が燃えあがるほど人気のようです。なにやらマーケティング専門の方が Webサイトにデザインなんて関係ないぜ！すべてはプロモーションとコンテンツ次第なんだぜ！ と豪語されていたことに対する反論のようですが…。 んと、人間っていうのは、自分の置かれてる立場や得意とする分野を中心として（良きものとして）考える癖がありますからね。おそらく皆さんそうではないでしょうか。自分の意見と反対のことを言われると「カチン」ときてしまう。 そこで「脊髄反射的に反応する＝どうしても自分の視点からの意見だけを述べてしまう」のであまり良くありません。むかつきながら書いたメールは一晩おいて読み直しましょう、ってよく言いますね。 まぁまぁ短絡的に反論するのはあまり良くないです（笑）。 なぜWebサイトの視覚表現が必要なのか？Webデザイナーさんの中には見た目を作ることが仕事の方もいらっしゃるでしょうし、そ
Hiroki Nakamura
31歳にしてうんこをもらしました About さわかみ証券 ギガゲーム Jump Festa 2022 ONLINE BitFlyer Yahoo! MASS MATRIX SHIN SEKAI NOWHERE マッハバイト「真実の広告」 #GO2030 TEHAI JUMP FESTA 2021 ONLINE SOFTBANK 5G バーチャル大合唱 BOOKOFFから本気のお願い VARP マッハバイト 無音アドトラック bitFlyer TVC FUJIROCK ’19 EXP Eテレ バビブべボディ リセット・ゲーム マッハバイト さわかみ証券 ギガゲーム Jump Festa 2022 ONLINE BitFlyer Yahoo! MASS MATRIX SHIN SEKAI NOWHERE マッハバイト「真実の広告」 #GO2030 TEHAI JUMP FESTA 2021
ウェブページの高速化のために読んでおきたいサイトのまとめ
ユーザビリティの改善や検索エンジン対策としてウェブページの読み込みスピードの高速化は非常に重要です。ということで、ページの読み込みスピード向上のために役立つサイトをまとめてみます。 ページ読込速度の重要性 次の事例にあるように、ユーザーは表示速度に敏感です。 Googleによるとページの読み込みが0.5秒遅くなると、検索数が20%減少する Amazonによるとページの読み込みが0.1秒遅くなると、売り上げが1%減少する そして、Googleのアルゴリズムにウェブページの読み込み速度が追加されて以降、サイトの高速化への注目度は高まっています。 Google、ウェブページの読み込み速度をアルゴリズムに取り入れたことを発表 | 海外SEO情報ブログ Googleがついに順位決定に表示速度を使い始めた（公式発表） | Web担当者Forum Google、検索順位にページ読込速度の考慮を開始 [詳
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
和や京都っぽさを演出するのに使えるPhotoshopのパターンとブラシ 全321個 ＋ ブラシファイルの中身が見れるアプリケーション ｜https://wp.yat-net.com/name
2011年 06月 22日 和や京都っぽさを演出するのに使えるPhotoshopのパターンとブラシ 全321個 ＋ ブラシファイルの中身が見れるアプリケーション カテゴリ： テクスチャ ブラシ タグ：Photoshopパターンブラシ作成支援ツール
[CSS]6つの代表的なCSSレイアウト方法の長所と短所を学んで使いこなす
スタイルシートで実装する6つの代表的なCSSレイアウト方法、それぞれ実例を見ながら、その長所と短所を紹介します。 Pros And Cons Of 6 CSS Layout Patterns: Part 1 Pros And Cons Of 6 CSS Layout Patterns: Part 2 [ad#ad-2] 下記は各ポイントを意訳したものです。 Fixed-Widthレイアウト Fluid/Liquidレイアウト Elasticレイアウト Hybridレイアウト Responsiveレイアウト Fluid/Elastic Gridsレイアウト Fixed-Widthレイアウト Firxed-Widthは、幅の全体を絶対値（px）で指定するスタティックなレイアウトです。このレイアウトを使用する場合には、ユーザーのために最適な幅を調査し、設定する必要があります。 典型的な例では大き
Facebook公認：フェイスブックページを検索上位に表示させる６つのポイントを読み解く
exhige.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、exhige.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
CSS Regionsのように雑誌のような複雑なレイアウトを組めるライブラリ・Regions.js
雑誌のような複雑なレイアウトをWebや 電子書籍でも組めるようにしよう、という 目的（かどうか分からないけど）で先日 W3Cで公開されたCSS Regionsをjsで 実装しよう、というもの。cssオンリーだと まだまだ時間かかりそうなのでjsの手を 借りて疑似体験しておくのも手ですかね・・ つい先日（2011/06/09）、W3CでCSS Regions Moduleが公開されました。CSS Regionsは、Adobeが提唱している、複雑なレイアウトを組むために要素間を繋いでテキストを自由に配置できるようにする、というものだそうです。 例えば、モニターの幅が狭い環境で閲覧した際に、余ってしまう要素内のテキストを次の要素に流し込めます。CSS Regionsに関してはPublickeyさんの説明が凄く分かりやすかったです。僕は存在すら知りませんでしｔ これに先行して実現したjsライブラリ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
