Yahoo! JAPAN Tech Blog Yahoo! JAPANは27日、Yahoo!ニュースをリニューアルした。従来よりも高速にページが表示されるように改善が施された。従来は3秒から5秒ほどかかることもあった表示時間を1秒以内のレスポンスタイム実現を目指して各種最適化が実施されたと説明されている。 どういった最適化が実施されたのかがYahoo! JAPAN Tech Blog Yahoo!ニュース高速化へのサイトデザイン側からのアプローチで説明されている。サイトデザイン側の高速化アプローチとしておもに次の技術を活用したという。 CSS Spriteの採用 PNG8の採用 Optpix WebDesignerを使いPNG8の減色処理を実施 Smush.itを活用しPNG8の余分なチャンクを削除 興味深いのは、これらテクニックはYahoo!のエンジニアでありYSlowの開発者、Stoy
ErrorVault acquires Spriteme - Web Development Troubleshooting Tools
Spriting in all simplicity ErrorVault has acquired US-based Spriteme to complement it's growing web development portfolio. ActiveX errors, browser error codes, Runtime errors, Windows Update errors, Blue Screen of Death, Device Manager errors, Windows system errors, Windows errors Background images can give pages a good look, but also slow them down. Each background image is an additional HTTP req
jQuery quickie: Slot machine navigation デモページ [ad#ad-2] デモではナビゲーションの各ラベルをマウスでホバーすると、スロットマシンのアニメーションを楽しめます。 ナビゲーションの実装 HTML シンプルなリスト要素で実装します。 <ul id="jquerynav" class="navigation"> <li><a href="#" class="marcofolio">Marcofolio.net</a></li> <li><a href="#" class="rss">RSS</a></li> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="jquery">jQuery</a></li> </ul> CSS 一枚の画像を使ってCSS S
見ておきたいCSSツール40選 – creamu
CSSのツールを便利に使ってみたい。 そんなときにおすすめなのが、『40+ “Must see” CSS Tools』。見ておきたいCSSツール40選だ。 以下にいくつかご紹介。 » CSS Type Set CSSをいじりながらフォントを確認できる。↑のキャプチャはこちら » CSS Sprite Generator 「80×15」「88×31」のボタンジェネレーター » CSS Optimizer CSSを圧縮してくれる » Grid Designer 2 カラム数と幅を指定することでグリッドを作ってくれる » Em Calculator ピクセル値を相対値であるemに変換してくれる その他のリストは以下から。 » 40+ “Must see” CSS Tools 見ておきたいCSSツール、チェックして使ってみてはいかがだろうか。 今日もいい天気ですねー。がんばろう。
CSS Splite を使うとどれだけサイトが軽くなるか分かるブックマークレット「Sprite Me」*二十歳街道まっしぐら（FC2ブログ時代）
「Sprite Me」はCSS Spriteでサイトがどれだけ軽くなるか教えてくれるサイトです。 サイトというよりか、ブックマークレットを用意してくれています。 ブックマークバーにいれておくと、いろんなサイトでCSS Spriteを使うとどれだけ軽くなるかを教えてくれます。 CSS Spriteとは、複数の画像を１枚の画像にしておき、CSSで区切って表示させる手法です。 Googleもこれを利用していますね。 詳しくは、CSS Spriteを活用しようを参考にしてください。 以下に、Sprite Me のブックマークレットを使ってみた様子を載せておきます。
Здравствуйте! Tokyo Otaku Modeでフロント周りを担当している今吉です。 社内でロシア人という設定を付けられていますが、ロシア語は挨拶くらいしかできません。 Webサイトを作るのに避けて通れないのがCSSだと思います。エンジニアも多かれ少なかれCSSを書く事があるかと思います。 しかし、CSSを書くのはとても面倒くさいです。出来る限り楽をしたいと常々思っています。そこで、CSSプリプロセッサを導入してCSSを作成している方も多いでしょう。CSSプリプロセッサとは、乱暴に言ってしまえばCSSをクールにラクに書く事ができる言語です。(設計が素晴らしく、COOLなCSSというものも、もちろんあるとは思いますが、これは一旦置いておきます。) 恐らく最も知られているものは、LESSとSass/Scssでしょう。 しかし、Tokyo Otaku Modeでは、Stylusとい
CompassでCSSスプライト
CompassでCSSスプライト Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。 まずはCompassで監視している画象ディレクトリ内(config.rbのimages_dirで設定しているディレクトリ)に任意のディレクトリを作成して、 CSSスプライトで利用する元画像を入れておきます。 今回は画象ディレクトリは「img」CSSスプライト用のディレクトリは「sprite」とし、元画像は以下の画象です。 a.png b.png c.png 次にscss内で@importでCSSスプライト用のディレクトリとファイルを指定します。 @import "sprite/*.png"; これをコンパイルするとimgディレクトリに「spr
HTTPリクエスト数削減テクニック1： インラインイメージ編
はじめに こんにちは、クラスメソッド株式会社の野中です。 前回の『Webサイト高速化に必要な画像形式の基礎知識』では、基本的な画像の書き出し方法について紹介しました。 この回からは数回に分けて、HTTPリクエストの削減テクニックについて触れていきます。 インラインイメージ CSS Spriteとイメージマップ SVGとWebフォントアイコン 画像からCSS3 本記事では「インラインイメージ」の基本的な知識と使い方、使いどころについて解説します。 対象者 今回の対象者は主にコーダー、フロントエンドエンジニアです。デザインとコーディングを合わせて担当するWebデザイナーも対象です。 コーダー・フロントエンドエンジニア Webデザイナー Webディレクター Web担当者 インラインイメージとは インラインイメージとは.gifや.pngなどをHTMLからリンクして読み込むのではなく、画像を文字列に
CSS Spritesのすべて - 技術解説、採用事例、ツールリンク | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Webページ高速化テクニックのひとつにCSS Spritesがある。これはWebページで使われる画像を1枚のマスター画像にまとめて使おうというもの。画像の表示にはCSSの機能が使われる。すでに多くのサイトで採用されており、先日、Yahoo!ニュースでも同テクニックが採用された旨がブログで報告された。簡単で効果的な方法だ。 アイコンから写真データまでWebページには複数の画像が使われていることが多い。画像ごとにHTTPリクエストが発生するため、画像が増えればそれだけHTTPリクエストが発生することになる。同時読み込みには制限があるため、画像が増えるごとに表示が遅くなるという状況になる。この問題を解決するテ
本記事では、最近のWeb制作で利用されている「CSSスプライト（CSS Sprites）」という手法と、その実装を便利にしてくれるFireworksの拡張機能「CSS Sprite Extension」について解説します。 Fireworks CS5 体験版 今すぐ購入 CSSスプライト（CSS Sprites）とは CSSスプライトは、複数の画像を1つにまとめてCSSのスタイルで部分的に表示し使い回す手法です。 CSSスプライトの仕組み CSSスプライトはたいてい、今まで独立した１枚画像にしていた部分や画像置換※で表示していた画像と置き換えることができます。 ※ 画像置換：HTMLにテキストだけを記載しておいて、CSSのスタイルで文字を隠し、その代わりに画像を表示しているように見せる手法。画像をHTMLからimg要素で呼び出している時とは違い、CSSでデザインを変更したときに一緒に見
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. We’ve seen innovative ways in which de
複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」:phpspot開発日誌
複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」 2007年10月03日- Website Performance | CSS Sprite Generator 複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」。 GoogleはHTTPコネクションを減らすため、画像は一枚で出力しています（参照）。 同じことをやろうとすると結構面倒ですが、複数の画像をZIP圧縮してアップロードするだけで、画像の結合＆CSS出力を行ってくれるサービスが登場しました。 使い方は簡単。画像ファイルをZIPでまとめて圧縮後、アップロードします。 positionに関するCSSが出力されています。 ページ下部には画像を表示したい位置に「background: url〜
株式会社ライブドア マークアップエンジニア 浜 俊太朗 2009/6/8 ページ表示高速化をサーバの設定だけに任せていませんか？ HTMLやCSS、JavaScriptの書き方でも速くできます（編集部） HTTPにおけるリクエストの数を意識してますか？ 連載第1回の「Webサイトを“速く”表示させる7つの計測ポイント」では、YSlowを使って速度に関する問題を調査しました。 今回は、その問題点の中でもWebブラウザとサーバの間で行われるやり取り「HTTPリクエスト」に関する内容です。とはいっても、サーバやプログラムの難しい話はあまり出てきません。CSSや画像の工夫で速度の改善を目指します。 □ Webデザイナーも「HTTP」を意識しよう 「HTTP」と聞くと、「なんだか面倒くさそう」「難しいんじゃないの？」「それプログラマの仕事でしょ」とか思っていませんか？ 確かに、HTTPの内容はプログ
「CSSスプライト」とは、複数の画像を1枚の画像ファイルにまとめ、表示の際にCSSでクリップ位置をずらすテクニックです。これにより、通信回数を減らし描画速度を上げることができます。既に定番化したテクニックですが、これまでFireworksをはじめとするデザイン用のソフトウェアには、直接CSSスプライト用の画像＆CSSを生成する機能はありませんでした（生成をサポートする拡張機能やWebサービスは存在しました）。 Fireworks CS6には、CSSスプライト用の画像＆CSSを生成する機能が追加されました。本記事では、この機能の使い方から、書き出した素材を使ってDreamweaverでマークアップするまでを解説します。 CSSスプライトの作り方を簡単に説明すると次の流れになります。 CSSスプライトでまとめたい画像を作成、もしくは、既にある画像からピックアップする。 Fireworks上で集
Spritebox a WYSIWYG tool to help web designers create CSS from sprite images.
1枚の画像を切り出すテクニックCSS Sprite、便利ツール登場 | エンタープライズ | マイコミジャーナル
Chris Brainard - Web Developer Extraordinaire Webページに表示される画像をひとつの画像にまとめ、表示する際にCSSで切り出して使うテクニックがある。通称「CSS Sprite」と呼ばれるテクニックで、Ed Eliot氏およびStuart Colville氏が2007年9月28日(ドイツ時間)にCSS Sprite Generatorを公開してからとくに広がりを見せたテクニックだ。CSS Sprite Generatorは複数の画像を1枚の画像にするとともに、それぞれの画像にアクセスするためのCSSを生成する。CSS Spriteを実施するためのツールだ。 Sprite Creator 1.0動作画面 これと似ているが、逆に1枚の画像から特定の画像を取り出すCSSを作成するためのツールSprite Creator 1.0がChris Brain
【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 | DevelopersIO
みなさんこんにちは、高速化やSCSSの記事を書いている野中です。 ↑の絵が何かわかる人いますか？ マインクラフト(Minecraft)界隈でおなじみの愛されキャラ「匠」こと「クリーパー」さんです。 とっても長い前振りなので時間のない方は本題まですっ飛ばしてください。 マインクラフトとは わかりやすく解説されているニコニコ大百科を引用。 Minecraft（マインクラフト）とは、Notch（Markus Persson氏）と氏の会社であるMojangからリリースされた、サンドボックス型のものづくりゲームである。 レトロゲーを想起させるドットテイストの3Dブロックが溢れる世界で、建物やその他のものを自由に創造することが出来るゲーム。 家を作ったり、川を作ったり、山をつくったり、洞窟を作ったり、トロッコ坑道を作ったり、ゾンビを倒すためのトラップを作ったり、塔を作ったり、農場を作ったり、天空の城を
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 07] CSS Spriteを手軽に作成する 文＝東 孝之（（株）ゼネラル・プレス） Tool CSS Sprite Generator URL http://ja.spritegen.website-performance.org/ CSS Spriteは、読み込みのリクエスト数を減らすことができるので、ページ最適化に有効な手段だが、実装するのに手間がかかる。そんなときは「CSS Sprite Generator」を使うといい。「CSS Sprite Generator」は、複数の画像を一枚の画像にし、CSSで表示位置を変更するスタイルシートをオンラインで生成するジェネレータである。これを使えば、複数の画像をひとまとめにして連結画像とCSSを作成し
Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作） | DevelopersIO
皆さんお久しぶりです。 最近サイトの高速化で忙しく、 ブログの執筆をサボっていました、ごめんなさい。 ブログのテンプレートリニューアルも無事に終わり、そろそろ得た知識をアウトプットしていこうと思います。 最近HTML（5）を利用したWebサイトもレスポンシブやCSS3、Retinaディスプレイ対応でどんどん複雑になってきています。ですが、未だ標準化されていないCSS3でさえ市場の要求に応えるには未熟に思えます。 そこで登場するのがSassやLESSなどのCSS拡張メタ言語です、キリッ（巷で知っている方にとっては今さら感たっぷり）。 今回は第一弾としてSass（SCSS）とCompassについて紹介しつつ、Media Queries（前に書いたMedia Queriesに関する記事）の実装を少し楽にしてくれる自作Mixinを紹介します。なぜSassにしたかは「Sass LESS 比較」と検索
新年明けましておめでとうございます。 今年もWordPressでCSSな1年にしたいと思います。よろしくお願いします。 年末年始は実家に帰省してぐだぐだしていたのですが、その中でいろいろ気づかされたことをつらつらと。 僕の父親について ぼくの父親について。 62歳。 若いときから緑内障・白内障を患い、目の手術を何度かしている。 車の運転ができなくなった。 パソコンが30年来の趣味の一つ。PC-8801とか実家にあった。 大量のLPをPCに取り込んだり、ローカルメディアサーバーを組んだり、主にオーディオ関係でPCを活用している模様。 パソコンは自作派。 日常生活レベルでは、それなりに見えているようです。 インターネットもばりばりやっていますし、iTunesもばりばりに使っているようでした。パソコン組んだり、カードを挿したりなどはできる様子。 どうやってPCを使っているのか 現在Windows
あとで読みたい人は… こんにちは、@cappeeです。 本格的にSass(SCSS)を仕事で使うようになってから早半年。 色々と試行錯誤しながら効率的にコーディングできるように工夫してきましたが、やっとこさある程度カタチになってきました。 これからSassを導入するというデザイナーさんもいるかと思うので、コピペで今すぐ使える便利なmixinをまとめて公開したいと思います。 泣くほどコーディングが早くなりますよ。 目次1. フォントサイズ2. テキストシャドウ2.1. 文字に1pxの黒いシャドウ2.2. 文字に1pxの白いシャドウ3. ポジション4. グラデーション4.1. 上下に明→暗4.2. 上下に暗→明4.3. IE8～9に対応する4.4. IE9に対応する5. 背景画像5.1. CSS Spriteの設定5.1.1. 文字の背景に入れる画像と文字を置換する画像5.1.2. アイコンな
![[Sass]泣くほど早い…コピペで今すぐ使える便利なmixinまとめ | Cappee Design](https://cdn-ak-scissors.b.st-hatena.com/image/square/e12901867bd44e22fee4be18b97fee940f375d69/height=288;version=1;width=512/http%3A%2F%2Fs.wordpress.com%2Fmshots%2Fv1%2Fhttp%253A%252F%252Fsass-lang.com%252F%3Fw%3D690)
『ロールオーバー今昔物語』サポートページ
鷹野雅弘（スイッチ） 2009年7月17日に開催したCSS Nite in OSAKA, Vol.17のフォローです。 Webは「クリックされてナンボ」。そこがクリッカブルであることが伝わらなければ、意味がありません。 クリッカブルであることを表現するひとつの手段として王道のロールオーバー効果も、DreamweaverやFireworksが自動的にはき出すJavaScriptを使ったものから、画像置換を使ったもの、そして、jQueryを使ったもの、さらにCSSのみで透明度を変更するものなど、その実装は変遷を遂げてきています。 これまでの流れをざっくり復習しながら、作り手/使い手両方がハッピーなロールオーバーはどこに向かうのかを一緒に考えましょう。 ロールオーバーの意味と意義 ロールオーバー（マウスオーバー）とは？ マウスポインタが重なったときに、次のいずれかのような変化を起こすこと 文字
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Smashing MagazineにおいてLee Munroe氏が15 Essential Checks Before Launching Your Websiteのタイトルのもと、Webサイトを正式にローンチする前にチェックすべき15の項目を紹介している。すべての準備が整うとすぐにでも公表したい気持ちにかられるが、忘れがちな最後のチェックを確実にやっておきたい。紹介されているチェック項目を要約すると次のとおり。 すべてのページにFavicon用のlink要素が用意してあるかチェックする。iPhone向けのFaviconを用意してあるならそれがすべてページに追加されているかどうかをチェックする。Favi
https://insouciant.org/tech/http-slash-2-considerations-and-tradeoffs/1 comment | 0 pointsChromiumの開発チームのWilliam Changが、HTTP/2の要検討事項とそのトレードオフについてまとめています。HTTP/2.0とSPDYの概要については、Akamaiのこの10分のビデオを参照ください。 1) Network Performance HTTP/1.xは、ネットワークの利用が非効率。HTTP Pipelining（それはそれで固有の問題がある。）を除いて、HTTP/1.xは、接続あたり一つのトランザクションしかできないことが、HOL (Head of line) blockingの原因となる。HOL blockingはラウンドトリップのコストが高く、ページ読込みのパフォーマンスを悪化
lua-nginx-module を導入した話 (1) JSON-RPC 2.0 batch request編 - mosa_siru’s blog
nginxにluaを組み込む openresty/lua-nginx-module · GitHub というのが非常に便利で、単なるreverse proxyだったnginxに、あらゆる役割を持たせられるようになります。 nginxの設定を動的にしたり、nginxからDBやmecached, redisなどへのアクセスも可能になります。HTTP requestを発行することさえできます。 これにより、例えばnginxの設定をDB化したり（NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした）、ちょっとした認証機能を入れたり、アクセスをmemcachedやredisなどに記録して攻撃を動的に判定してブロックしたりとか、nginxのレイヤーで色んなことができるようになります。（バックエンドのアプリケーションでも勿論同様のことは可能ですが、前段でブロックできるのが嬉し
湯口りさ氏 RsStudio http://web.r-studio.jp/ 本記事では、最近のWeb制作で利用されている「CSSスプライト（CSS Sprites）」という手法と、その実装を便利にしてくれるFireworksの拡張機能「CSS Sprite Extension」について解説します。 Fireworks CS5 体験版 今すぐ購入 CSSスプライト（CSS Sprites）とは CSSスプライトは、複数の画像を1つにまとめてCSSのスタイルで部分的に表示し使い回す手法です。 CSSスプライトの仕組み CSSスプライトはたいてい、今まで独立した１枚画像にしていた部分や画像置換※で表示していた画像と置き換えることができます。 ※ 画像置換：HTMLにテキストだけを記載しておいて、CSSのスタイルで文字を隠し、その代わりに画像を表示しているように見せる手法。画像をHTML
[css,js] Retinaディスプレイ対策
スマートフォンのRetinaディスプレイだとPCでくっきり見えてる画像がぼやけてしまう件。 500px × 300pxの画像をRetinaディスプレイでくっきりさせたいなら 1000px × 600pxの画像を作成してサイズを50%に指定すれば良い。 その方法を以下に列挙する。 基本 Retinaディスプレイはdevice-pixel-ratioという値が1.5ないし2なので CSSなりJSなりでその値を判別して振り分ける CSS3 Meia Queries Androidで未対応機種があるため、上書きで使う方が無難。 @media only screen and (-webkit-min-device-pixel-ratio: 1) { } @media only screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-de
【HTML/CSS/JavaScript】ウェブアプリを速くするための28の方法(翻訳) 3月 13, 2013 admin 読了: 約 24 分 フロントの技術について英語の記事をシェアされていて、気になったので理解を深めるために翻訳してみました。 英語の記事では、28から始まるのですがややこしいので、1はHTMLからはじめていきたいと思います。 DANGER!!!WARNING!!!はじめに 元記事はこちら ※間違った意図や誤訳をしている箇所が多々あると思いますが、その点ご了承くださいませ…。 初めてということでしょっぱい訳で、すみません…。 1. avoid inline code / インラインコードを避ける 1. <style></style> や <script></script> をHTMLに直接書く 2. <link rel="stylesheet" href="" />
こんにちは、デザイナーの王です(●´⌓`●) 今回は「imgタグでCSSスプライトを使う方法」について説明します。 そもそもCSSスプライトって何ぞや？という方は、下記ページに詳しく説明されているので、見てみてください。 CSSスプライトで画像を円滑に表示させる – Webクリエイターボックス： https://www.webcreatorbox.com/tech/css-sprite/ どうしてわざわざimgでCSSスプライト？ 一番の理由は、imgタグなら印刷したとき印刷物に反映されるからです。 対比画像の、フォーム下部のボタンに注目してください。通常のスプライトでは印刷に反映されないんです。 ユーザ側で印刷の設定をいじればbackground-imageでも印刷できるんですが、やはりデフォルトでできた方が親切ですよね。(●´⌓`●) 便利なテクニックなので、覚えておきましょう！ CS
22 Extremely Useful And Powerful CSS Tools — Smashing Magazine
We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little apps to the public. Last year we prepared and published some of them in a series of smashing posts about CSS. Now again is the time to give these tools the attention th
楽して時間短縮！Compassで作ったスプライト画像でRetina対応を行う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。UFOキャッチャー運が急降下中、デザイナーのももこです。 輪っかがついたキーホルダー系をうまく取れるようになりたい…(´・ω・｀) 気を取り直して、今回はCompassを使って作ったCSSスプライト画像でRetina対応を行う方法をご紹介します。 Compassを使って書き出したスプライト画像を自動でRetina対応にさせる スプライト画像の生成 $sprites: sprite-map("sprites/*.png"); $sprites-img:sprite-url($sprites); まずはスプライト画像を生成します。 単一の画像をフォルダに入れると、見事に合体したスプライト画像がimagesフォルダに書き出されます。 sprite-mapにはconfig.rbで指定したimagesフォルダ以下のルートを入れて下さい。 Mixinを記述する @mixin sprite-
作成：2014/01/14 更新：2014/11/01 Web制作 > 以前までHTMLコーダーと呼ばれていたフロントエンドエンジニアは、表現の進歩やトレンドに伴って、ＣMSやAPIなどより高度な技術や知識を求められるようになりました。今回は今以上に効率化するために、フロントエンドやWebデザイナーが必要とする知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マルチデバイス対応 １．フルードレイアウト ２．ドロップレイアウト ３．ワンキャンバスレイアウト ４．可変グリッド ５．ブレイクポイント参考 ６．レスポンシブ対策ライブラリ パフォーマンス改善 ７．ページを高速化する CMS ８．WordPress化 HTML5 API ９．API一覧 クロスブラウザ対策 １０．IE関連 １１．横置き／デバイス対策 １２．Retinaディスプレイ対策
Compassでスプライト画象を高速に書き出す方法 CompassでRetina対応をするとコンパイルにやたらと時間がかかってしまいます。 以下のままですとすごく時間がかかるのですが、 $sprites: sprite-map("sprites/*.png"); @mixin sprite-background($name) { background-image: sprite-url($sprites); background-repeat: no-repeat; display: block; height: image-height(sprite-file($sprites, $name)) / 2; width: image-width(sprite-file($sprites, $name)) / 2; $ypos: round(nth(sprite-position($spri
画像結合/CSS切出で転送量&HTTPリクエスト削減 - CSS Sprite Generator 2 | エンタープライズ | マイコミジャーナル
CSS Sprite Generator Ed Eliot氏およびStuart Colville氏は23日(米国時間)、CSS Sprite Generatorの最新版となるCSS Sprite Generator 2を公開した。CSS Sprite Generator 2はオーバーホールが実施されたメジャーアップグレードバージョン。以前のバージョンでは画像の結合にGDを採用していたが、新しいバージョンではImageMagicが採用されている。この変更で従来のバージョンよりも高品質な画像が生成されるようになったほか、発見されていたバグが修正されている。 またCSS Sprite Generator 2では追加機能として、PNGまたはGIF画像で利用する色数を指定できるようになったほか、JPEGに対する画動品質が指定できるようになっている。またPNGを使っている場合に出力を圧縮する目的でOp
Project Parfaitで尋常じゃない速さでpsdファイルからウェブサイトを組み立てる - 素人がプログラミングを勉強していたブログ
Project Parfaitとは、adobeが開発してるβ版の、ウェブサイト作成支援のサービス。これを使うと、.psdのデザインファイルからHTMLを書き起こすのが異常に高速になるので、オススメしておこうと思う。 具体的には、psdファイルをアップロードすると、psdファイルの要素がレイヤー別に選択できるようになる。わかりやすいように画像で実例を出すと（一部塗りつぶしてあるが） このようになる。 あとは、Copy Textをクリックするとクリップボードに文字が選択されるので、HTMLファイルを書きながら <li><a href="#">{テキストをペーストする}</a></li> のように書いて、その後、Copy CSSをクリックし li { /*CSSをペーストする*/ } のように、貼り付けて上記の画像の場合はfont-weightがおかしいのでboldに手動で直して、widthやh
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: <img>, background-image, <svg>, <iframe>, and <object>/<embed>. Using SVG by me SVG on the Web — A
SpriteMachine - Create css sprite images easily! CSSスプライトをドラッグ＆ドロップで生成できる「SpriteMachine」。 簡単な設定の後、ZIPファイルをブラウザにドラッグ＆ドロップすればスプライトファイルがダウンロードできるというもの。 お手軽で便利ですね。 ただ、個人的には、毎回全部アップロードするのは面倒だと感じるので、画像を新しく追加したい場合に、それまでの画像はそのまま使えて新しい物のみのCSSを表示してくれるなんていうツールがあったらよく使いそうだなと思いました。 関連エントリ CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」 サーバ側でCSSを保存したら直ぐにCSSが反映されるようにできる「CSSreflesh」 BackgroundImageでスプライトアニメーションさせるjQueryプ
キャラクターと背景が動きまくるjQueryプラグイン（おまけつき） jQuery.spritely | jQuery | javascript | understandard.net
ロンドンにある Artlogic Media Ltd. という会社が公開している jQuery プラグイン、jQuery.spritely がおもしろかったので、紹介がてらポスト。 公開したのが2010年3月10日ということなので、公開ほやほやなプラグインのようです。 このプラグインを使用すると、FLASH のような動きを、iPhone のような FLASH 非対応のデバイスでも見られるようになります。 ※“クリック”と書いてある箇所は iPhone などのデバイスでは、“タッチ”になります。 jQuery Spritely | Spritel ※リンク先がデモも兼ねています。 ページを開くと、背景がスクロールしていて、その上に鳥が2羽飛んでいます。 これだけでも充分すごいんですが、ページのどこかをクリックすると… マウスのある場所まで降りてくる！ 背景がスクロールしているエリアから飛び出
Webサイト制作支援 Website Support このページについて ツールやライブラリの紹介などWebサイトの制作に役立ちそうなコンテンツを掲載しています。 Webサイト制作の知識を必要とするコンテンツが含まれておりますので、閲覧の際はご注意ください。 なお、Mac OSについての確認は行っていません。 予めご了承の上ご覧ください。 ツール パスワード自動生成 パスワードの暗号化 エンティティ変換 URLエンコード/デコード Unicode変換 QRコード生成 文字カウンター 画像サイズ計算 文字変換 ディスプレイのPPIを算出 CSSセレクタ―利用可否チェック 画像ファイルをBase64文字列へ変換 CSSカスタムイージング CSS Selector Nth Tester カラーコード相互変換 CSS Sprite Generator マルチアイコン生成 Googleカレンダー予定
トレンド1位の折り返し翻訳辞書、フロント(Mithril)とコンテンツ配信(nginx)の話 - Qiita
先日、折り返し翻訳辞書というウェブサービスをリリースしました。Twitterのトレンド1位を1日継続し、NHK様のつぶやきビッグデータに取り上げられたりしました。 このサービスはMashup Awards 11の応募作品として作っています。チームメンバーは3人で、発案者でありAPIサーバ構築をされた方、デザインをされた方がそれぞれ別にいます。 チームメンバーはみんなそれぞれ別の会社で、このサービスは完全に趣味開発です。MAの賞金くらいでしか稼ぐつもりはなかったのですが、想定以上にバズってしまって運用費がやばくなったので、各方面から協力頂いたりアド貼ったりしてます。 私はフロントエンド開発とコンテンツ配信を担当したので、ここではその話をサラッとしたいと思います。 2015/12/06追記: 発案者でありAPIサーバ担当された方の記事はこちら フロントな話 構成 いわゆるシングルページアプリケ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Yahoo!ニュース高速化の方法、PNG8移行時期は今 | エンタープライズ | マイコミジャーナル
[JS]スロットマシンのようなアニメーションが楽しいナビゲーションを実装するチュートリアル
Tokyo Otaku ModeがStylusを使う理由 | Tokyo Otaku Mode Blog
CSS スプライト作成に便利な拡張機能「CSS Sprite Extension」 | デベロッパーセンター
30 Exceptional CSS Navigation Techniques
CSS Spriteなどブラウザとサーバの通信を減らすテク（1/2） - ＠IT
CSSスプライト書き出し機能の使い方 | ADC - Adobe Developer Connection
Spritebox - Create CSS from Sprite Images
目の悪い父親を見ていて気づいたこと。アクセシビリティについて考えたこと。 - Toro_Unit
[Sass]泣くほど早い…コピペで今すぐ使える便利なmixinまとめ | Cappee Design
サイトを公開するまえにチェックすべき15の項目 | エンタープライズ | マイコミジャーナル
[その1] HTTP/2の留意点とトレードオフ - ワザノバ | wazanova
CSS スプライト作成に便利な拡張機能「CSS Sprite Extension」 | デベロッパーセンター
【HTML/CSS/JavaScript】ウェブアプリを速くするための28の方法(翻訳) – T2
印刷にも対応！imgタグでCSSスプライトを使う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
スピードアップした！フロントエンジニアがWeb制作のために知っておきたいことまとめ
Compassでスプライト画象を高速に書き出す方法
A Compendium of SVG Information | CSS-Tricks
CSSスプライトをドラッグ＆ドロップで生成できる「SpriteMachine」:phpspot開発日誌
Webサイト制作支援 | ShanaBrian Website