CSSスプライトとstepsを使ってアニメーション画像を作ろう | Webクリエイターボックス

2015/11/17 257 users steps プロパティー CSS アニメーション 動作

CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 steps の記述方法 steps は animatio... 続きを読む

画像を分割もしくは合体させてパフォーマンスは本当に変化するのか? - Webサイトパフォーマンスについて

2014/12/07 108 users 分割 パフォーマンス Webサイトパフォーマンス 初版 画像

2014-12-07 画像を分割もしくは合体させてパフォーマンスは本当に変化するのか? 2008年4月1日に初版が発行された、オライリー・ジャパンの「ハイパフォーマンスWebサイト」を未だに参考にされている方は多いと思います。 時折、「CSSスプライトを使うことで、HTTPリクエスト数が削減されて、高速化に繋がる」と書かれている方をお見受けします。 しかし、それは本当なのでしょうか? そこで、今回... 続きを読む

Webページの表示速度アップに欠かせないCSSスプライトを超簡単に作成してくれるサイト「SpriteMachine」 | OZPAの表4

2013/01/16 142 users OZPA アイコン テクニック ロゴ いい名前

Webページの表示速度をアップするために、アイコンやロゴなどの画像を1枚にまとめるテクニック。それが「CSSスプライト」なのですが、これって画像の作成とか位置の指定とか色々と面倒くさいんですよね。 そんなCSSスプライトを簡単に実装するためのWebサイトSpriteMachineのご紹介。スプライトマシーン…すごく…イイ名前です… SpriteMachine – Create css sprite... 続きを読む

CSSスプライトについてあれこれ。

2012/08/24 1022 users HTML 画像置換 手順 制作手順 web

「CSS Sprites（CSSスプライト）」って、どの方法が一番ベストなの？ いまいち不確かだったので、個人的にまとめ直してみることにしました。2012.8.22. Wed CSS, CSSスプライト, HTML, Web, ボタン, 手順, 画像置換 「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までた... 続きを読む

[CSS]Retinaディスプレイを考慮したCSSスプライトの実装方法 | コリス

2012/08/02 162 users コリス テクニッ Retinaディスプレイ CSS 実装方法

新しいiPad, iPhone4, MacBook Proなどに採用されているRetinaディスプレイを考慮したCSSスプライトの実装方法を紹介します。 Using CSS Sprites to optimize your website for Retina Displays CSSスプライトとは複数のアイテムを一枚の画像に配置し、background-imageで表示する範囲を指定するテクニッ... 続きを読む

web高速化のためのコーダー向け圧縮ツール・サービスまとめ | バシャログ。

2012/04/25 405 users バシャログ ishida web高速化 おいら サービスまとめ

ゴールデンウィークは、ディズニーランドに連れていくと娘に約束してしまった ishida です。いったいどのくらい混雑するんだろう、どうせオイラはパレードの席取りでひたすら待つのさ。 さてさてweb高速化においてサーバー側ではなくフロントエンド側で対応できることもかなりあります。 CSSのセレクタ構文の最適化やCSSスプライトによる画像リクエスト数の削減であったり。 今回は、ファイル容量を削減に焦点... 続きを読む

コピペで使えるCSS3ボタン６つのレシピ:phpspot開発日誌

2011/04/10 114 users phpspot開発日誌 コピペ レシピ カッコイ Paste

6 Useful CSS Button Recipes You Can Copy & Paste | Design Shack コピペで使えるCSS3ボタン６つのレシピ。 次のようなボタンのCSSとHTMLが掲載されています。 一昔前はオーサリングツール抜きに出来なかったこともCSSで出来るように。CSS4の時代にはどうなっているのだろうと少し楽しみです。 関連エントリ CSSスプライトでカッコイ... 続きを読む

独学で極める “Webデザイン”の技と心：第10回　CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社

2008/05/26 629 users 独学 チューニング gihyo.jp CSS サーバ

独学で極める “Webデザイン”の技と心 第10回　CSS Spritesでサイトを高速化 2008年5月26日 山田あかね Webデザイン, HTML, CSS 今日は，CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと，プログラムの最適化を行ったり，サーバのチューニングを行ったりというイメージがあ... 続きを読む