スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
HTTPリクエスト数削減テクニック2： CSS Sprite編
はじめに こんにちは、クラスメソッド株式会社の野中です。 HTTPリクエスト削減テクニックの紹介に入り、前回の『リクエスト数削減テクニック1：インラインイメージ編』では、インラインイメージについて紹介しました。本記事では「CSS Sprite」の基本的な知識と使い方、使いどころについて解説します。すでに定番のテクニックとなっていますが、何となく使っていることが多いと思います。初学者の方にも理解していただけるよう詳しく解説します。 対象者 対象者は主にコーダー、フロントエンドエンジニアです。 デザインとコーディングを合わせて担当するWebデザイナーも対象です。 コーダー・フロントエンドエンジニア Webデザイナー Webディレクター Web担当者 CSS Spriteとは Webサイトではアイコンやナビゲーションなどに多くの画像が使われ、サイトによっては20個30個とたくさんのアイコンが使わ
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo
スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:
Web::Scraper で XPath と CSS セレクタを混ぜて使う例 - Tociyuki::Diary
Web::Scraper はいたれりつくせりの仕掛けが仕込んであって、便利ですね。私が、割と良く使っている機能は以下 2 つです。 process の第一引数に、CSS セレクタだけでなく、XPath も指定できます。ただし、XPath を指定するときは先頭を必ずスラッシュ(/)で始めなければいけません。 process の第二引数以降の、値をどこから取得するかを指定する部分に、コード・リファレンスを置くこともできます。これを使うと、DOM ツリー中の値を加工して抽出することができます。 具体例として、デイリーポータルZのアーカイブ一覧の中からべつやくれいさんのエントリを抽出してみることにします。まず、アーカイブ・ページのエントリ部分を取り出してやると、こうなっています。 <TD width="580" valign="top" class="tx12px"> <P> <B><FONT c
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
artcodeグループ - 2007 CSS Study Meeting
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
IT戦記 - CSS の勉強会をしました
2007 CSS Study Meeting http://artcode.g.hatena.ne.jp/keyword/2007%20CSS%20Study%20Meeting 発表をしましたので資料を置いておきます。 http://usrb.in/amachang/static/cssstudy/200701/ Firefox で動きます。IE でもぎりぎりうごきます。あ、でも、横長な表示域じゃないと崩れる可能性大です。 左右キーで操作してください。また、ソースは実行できるようになってるので、実際に実行しながら読んでいっていただけるとうれしいです。 他に事前に CSS のセレクタのバグリストとプロパティ一覧を作りました。 プロパティ一覧は element.style に辞書アタックを掛けて各種ブラウザから抽出したプロパティです。 http://usrb.in/amachang/stat
miniturbo::Blog CSS勉強会にいってきました
amachangさん主催の、「新春 CSS 隠し芸大会」にスピーカとして参加してきました。ここ連日、プレゼン用の資料制作に追われていたのですが、なかなか終わらず...。できたのはプレゼン当日の朝でした(徹夜明け)。 以下に、資料を公開します。 Wii +CSS = WSS? (Wii と CSS) 僕は、巷で話題のWiiとCSSを合わせたネタを披露しました。「とにかく、Wii実機では解像度の関係でコンテンツが見づらい。それなら、より快適なブラウジングのために、Wii用のスタイルを作ろう」...といったコンセプトになっています。(時間がなくて、肝心のWii用のスタイルができなかったのですが...) まぁ、無事に終わってホッとしました。他のスピーカの方々、ご静聴いただいた皆様、お疲れ様でした! ちなみに、資料はW3CのHTMLプレゼンテーションツール「HTML Slidy」を使用しました。実際
Jan 18 2007 :: CSS 勉強会で発表しました / nulog, NULL::something : out of the washer
バイト先の社内 CSS 勉強会でちょっと (?) しゃべりました。資料 置いときます。(Safari, Fx, Opera 用) 資料は実際に見せたのと少し変えてあります。本来しゃべるつもりじゃなくてコメントアウトした部分もしゃべってしまったので表示させてあります。 だいぶテンパってまして何分喋ったかよくわかりません。資料とかgdgdですが楽しんでいただけたら幸いです（てけ デザイナさんがいるのにデザインがどうこういうのは笑えよwwwwトロンボーンwwwwって感じですたけど、何も考えないことにしました。 ありがとうございました。 CSS の根本的な部分は発表直前に書きました。ネタがこのへんかぶると思っていたら全くかぶらなかったので急遽入れました。 プレゼンツールは text-hatena.js と MochiKit, KeyTypeListener.js を使ってつくりました。はてグのプレ
Free Design Templates | Developer's Toolbox | Smashing Magazine
If you are hesitant about choosing the perfect template for your website, then maybe it is high time to stop browsing and order one for yourself. To simplify this process, you should employ a professional RFP template for software development. One of the best things you can do when choosing a theme is to learn about the person or company who made it. If they have a reputation to live up to, then t
段落(pタグ)とアンカー(aタグ)さえあればどこにでも配置できるさ
免責事項：本サイトに含まれる情報は、一般的な情報提供のみを目的としています。情報はスペシャルベストによって提供され、当社は情報を最新かつ正確に保つよう努力しますが、いかなる目的においても、ウェブサイトまたはウェブサイトに含まれる情報、製品、サービス、関連グラフィックスに関する完全性、正確性、信頼性、適合性、利用可能性について、明示または黙示を問わずいかなる表明または保証も行いません。従って、これらの情報に依拠することは、あくまでもお客様ご自身の責任において行われるものとします。 当社は、当ウェブサイトのご利用に起因するいかなる損害についても責任を負いません。 本ウェブサイトから、スペシャルベストの管理下にない他のウェブサイトへリンクすることができます。当社は、それらのサイトの性質、内容および利用可能性を管理することはできません。リンクは必ずしも推奨するものではありませんし、リンク先で述べら
trac の css を書き換えるときに最初にやること - IT戦記
まず、すべてのページが対応する CSS を読み込むように設定 $ vim /path/to/project/templates/site_css.cs<?cs each:rel = chrome.links ?> <?cs each:link = rel ?> <?cs if:link.type == "text/css" ?> @import url(<?cs var:chrome.href ?>/site<?cs var:string.slice(link.href, string.length(chrome.href) + string.length('/common'), string.length(link.href)) ?>); <?cs /if ?> <?cs /each ?> <?cs /each ?> 次に、全体に適用されている CSS を自分のプロジェクト用にも持ってく
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する
文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |
Writing Efficient CSS - MDC
この記事は、Mozilla Japan 翻訳部門もしくはその関連グループによりすでに翻訳済みのものを移行してきました 移行元の文書。英語版と内容が異なる場合や、MDC の他の記事と整合性のとれていない場合があります。 以下の文書では Mozilla の UI で使用する CSS ファイルの最適化についての規則を概説します。最初の節では Mozilla のスタイルシステムにおけるルール分類の要について書きます。このシステムについて理解してもらった上で、続く節では Mozilla のスタイルシステムの力を最大限に発揮するルールの書き方を説明します。 【訳注: CSS スタイルのマッチング処理に於いては、ルール集合のうち各要素に対してマッチするものがないか順に全て調べていく必要があり、単純計算では (要素数)×(ルール数) 回のマッチング処理が必要になってしまいます。如何にしてこれを効率化するの
CSS Nite LP Disk 1 で行った microformats に関するセミナーの資料などを公開 - 2xup.org
2006-10-10T18:00:00+09:00 本日 CSS Nite LP DIsk 1 が行われました。現在会場の Opera ブースから更新しています。今回もたくさんの方にご来場いただいたようで、確かに会場はものすごい熱気でした。無料版の CSS Nite もそうですが、みなさんお熱い。『とったらんかい！』と言わんばかりの熱心な姿勢の方が多く、このような雰囲気の中、お話できて本当に良い経験になります。今回は長谷川恭久さんとのジョイントセッションでした。 CSS Nite 公式ブログ: CSS Nite LP Disk 1(CSS Nite 公式ブログ) 今回はこれまでの経験から、いくら簡単なことでも難しく伝えられると手を付けるのが遅くなったり、その簡単さに気づくのに時間がかかったりしてしまうので、microformats の魅力をできるだけ楽しく伝えられるように努力してみましたが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SASSIENCE ～ 世界が嫉妬するCSSへ
Dynamic Drive CSS Layouts- Tableless, CSS based templates
HTML-Selector-XPath-0.28 - CSS Selector to XPath compiler - metacpan.org