Tips CSS Sprite Tips and Techniques Jake RocheleauDecember 21, 20107 Comments04.6k Spriting is a skillset in the web design field gaining lots of credibility. We initially saw these techniques applied to high-traffic websites such as Yahoo! and Digg. Over time even smaller-scaled web apps began applying sprites to their front end design specs. We’ll be going over some of the major benefits towards
JSer.info #18 - jQuery 1.6で大きく変わったattr()と.prop()周りで少しごたついてますが、1.5.2から1.6.1へとアップグレードできる感じになったと思います。 また、定期的にあるJavaScriptのnew 演算子批判について、とてもいい回答になってる記事が書かれているので読んでおくといいですね。 jQuery: » jQuery 1.6.1 Released http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/ jQuery 1.6.1がリリース。 1.6で後方互換性がなくなってた.attr()が修正されています。 また、.attr()と.prop()の使い分けの仕方についても説明されています。 -John Resig - jQuery 1.6 and .attr() -jQuery 1.6
40 Useful CSS Tutorials, Techniques And Resources | SmashingApps.com
by Akhter · July 26, 2011 40 Useful CSS Tutorials, Techniques And Resources We have previously posted many articles on CSS tutorials and resources you can learn CSS from. Today, again we come up with yet another great list of 40 CSS tutorials, techniques and resources that you will enjoy exploring. Every developer knows very well how important it is to learn and use CSS effectively. Therefore, tal
According to a 2009 study, 47% of visitors expect a page to load in under 2 seconds, and 57% of visitors will abandon a page that takes more than 3 seconds to load. Mobile Internet usage is expected to overtake desktop usage. This shift towards Internet-enabled mobile devices means that having a fast website has never been as important as it is today. Users now expect websites to be lightening fas
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Webサイトで利用する画像フォーマットとしてPNGが採用されるケースが増えている。PNGはGIFと似たような特徴を持っているものの、GIFと異なり透過画像をちゃんと扱え、さらにGIFよりも画像データサイズが小さくなるという特徴がある。写真フォーマットにはJPEGを採用し、それ以外にはPNG8を採用、より複雑で滑らかな画像フォーマットが必要になるならPNG24を採用するというのが最近のひとつの画像採用指針となっている。 PNG画像の最適化についてはSergey Chikuyonok氏がSmashing Magazineに掲載した次の記事が参考になる。 PNG最適化テクニック Sergey Chikuyonok氏の記事ではPNGの画像フォーマットの仕
Command-line CSS spriting
(In Russian) OK, CSS sprite tools exist. I'm pretty confident I actually made the very first one 🙂 But they break from time to time (like mine currently). And then the command line is cool (as opposed to scary) and oh-so-quick. And imagemagick is cool and oh-so-powerful. So let's see how we can create CSS sprites from the command line alone. Creating the image Starting with a list of separate ima
3/11のdevfest2010に参加しました A会場にずっといました。 以下メモです 基調講演 及川さん Webアプリ mixi クリスマスアプリケーション リリース後100万以上のユーザが利用 ソーシャルアプリは、トラフィック予測が難しい GAEがバックボーン Google ModeratorもGAEがバック Client Webアプリがローカルアプリに追い付く ほぼ全ての機能はWeb標準技術で提供できる デモ html5 HTML5/CSS3でWebをパワフルに Chrome4の機能 WebFonts Fontはローカルに入っているものを使う ローカルではゴシックと明朝のみ(多くのプラットフォームに対応しようとすると) サーバからダウンロードできたら... Chrome4で実装 WebSockets いままではCommetという技術を使っていた ひとつのポートを張っただけで任意のタイ
カテゴリを画像を使ったグローバルナビゲーションにする方法
みなさま、お世話になります。 デフォルトのテーマをカスタマイズしていますが、グロナビで行き詰まっております。 やりたいこと： カテゴリーをグローバルナビゲーションのようにページの上のほうに横に並べて表示したい リストは画像で出したい。(liとaをdisplay表示してimgを間に挟みたい) 該当カテゴリーにいるときは、画像の色を変える hover時に、画像の色を変える できたこと： 上記の１〜３までできました。参考にしたのは、 http://lovelog.eternal-tears.com/wordpress/wp-custom/navi-on-off/ のサイトにあるコードです。 <div id="navi"> <ul> <li><a href="<?php bloginfo('url'); ?>/info/" title="info"><img src="<?php bloginfo
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. There are many available tools to help
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
Advanced Gulp File - Mike Street - Lead Developer and CTO
2014-05-22T00:00:00.000Z Posted on 22nd May 2014. 15 mins reading time Note: This post is from 2014 and so some links or practices may not be those advised today. It also uses Gulp 3 and so may not work with Gulp 4 With gulp starting to find itself into my everyday workflow - I've started to understand its quirks and twists, and how to get along with it. My baseline gulpfile.js has become a lot ne
How to Create a CSS Sprite Animation With steps() [Article] | Treehouse Blog
LearnHow to Create a CSS Sprite Animation With steps()Adobe Illustrator artboards There’s a little-known timing function in CSS animations that lets us break an animation into segments––or steps––instead of running it as one continuous animation from start to finish. This function is useful for creating sprite animation because we’re able to precisely display each sprite image as a frame without a
![How to Create a CSS Sprite Animation With steps() [Article] | Treehouse Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5427ed50b94c457a0d92f558334053f6a80966a4/height=288;version=1;width=512/https%3A%2F%2Fblog.teamtreehouse.com%2Fwp-content%2Fuploads%2F2023%2F01%2FSocial-Image-CSS-Sprite-Animation-steps.jpg){kind=icon}
「ウェッブサイトの表示速度を測定するフリーツール集」でサイト最適化の効果を定量的に計る術を知ったところで、HTTPリクエスト数の削減と画像の軽量化を狙い、以下の項目を試してみました。 Closure Compiler によるJavascriptファイルの結合と軽量化 Smash.it™ などによる画像の軽量化 CSS Sprite Generator などによる背景画像のCSS Sprites化 YUI Compressor によるCSSファイルの軽量化 minify などによるJavascript/CSSファイルのgzip転送 目標は現在使用中のテーマ iNove のYSlowスコアをGrade CからBへ向上させることです!! 1. Closure CompilerによるJavascriptファイルの結合と軽量化 iNove では2つのJavascriptファイル base.js、me
Page Speed
ライセンス： フリーウェア おすすめ度： おすすめ度 ( 3.50点 ) 著作権者： Google 動作環境： 2000/XP/Vista/7 速くなければならないのですよ。もっと速く、もっと素早く、More speed.スピードはジャスティスです。速いからこそ評価されるんです。クリストファー・コロンブスだって1492年という早いタイミングで西インド諸島に到達したからこそ評価されているんです。私が、今アメリカに飛行機で行ったとしても誰も評価なんてしてはくれませんよ。せいぜいお土産を要求されるのが関の山です。アメリカ発見と同じ轍は踏むわけにはいかない。林檎の木ももっともっと速くサイトが表示されるようにならなければ。林檎の木高速化計画、題して「プロジェクト素早い動きの林檎の木がみたい」始まりました。 Googleでもサイト順位の決定指標の一つにサイトの表示速度を導入したと聞きます。SEO的に
Resolution Independence With SVG — Smashing Magazine
In this article, we’ll look at Scalable Vector Graphics (SVG), one of the most underused technologies in website development today. Before diving into an example, let’s consider the state of the Web at present and where it is going. Website design has found new vigor in recent years, with the evolving technique of responsive design. In this article, we’ll look at Scalable Vector Graphics (SVG), on
WordPress高速化メモ。W3 Total Cache と Head Cleaner を併用してロリポWPを最適化！ | andAsk.net
先日「andAskリニューアル。設定や使用中のプラグインをまとめました！」という記事を書かせてもらったのですが、その続きみたいな形です。少しだけ高速化をするにあたって、その前提と目的について先にお話します。 andAsk.net のサーバー 当サイトはロリポップのロリポプランを使用させていただいております。コストパフォーマンスの高さから、かなり有名ですし使用されている方も多いのではないでしょうか？各設定は以下になります。 MySQL バージョン5.1.34PHP バージョン5.3.5 バージョン3.4.1 高速化ってそんな大事なの？ めっちゃくちゃ大事です。 大きいところでGoogleのランキングの順位基準にも、ページ表示速度が１つの指標となっています。他にも具体的な高速化の目的を挙げると コンバージョン率の最適化キーワード競争でトラフィックを増やす全体的な競争力の向上CXとCSの向上
アルファチャンネルで画像置換 – VERSIONFIVE
この記事は「after 疑似要素で CSS ロールオーバー」の続きです。 このサイトの定番ネタです。「え、いまさら？」という声が聞こえてきそうな気がする画像置換ですが、今回は3年ほど前に大流行した「テキストをCSSの背景画像で置き換えて、text-indentですっ飛ばすアレ」にCSS3の要素を加えてじゃっっかん今風?にしたものです。 ちなみにこの手法は、大流行から1年ほどで「テキストをtext-indentで飛ばすのはアクセシビリティ的によくないし、CSSの背景画像じゃなくて画像と代替テキストという自然な(本来の)マークアップをすべき」みたいな思想が広まって一時期廃れたかに思われましたが、近年の表示速度最適化ブームに乗って、CSS Spriteを実現する手段として復活を遂げている、という経緯があったような気がします。いや、詳しくは忘れちゃいましたが;P あいかわらず今回もCSS Nite
Adobe CS5が発表されたのに合わせてアメリカのAdobeサイトで「Introducing Adobe Fireworks CS5」が公開されました。この記事は製品ページよりもしっかりFireworks CS5の機能が紹介されているのでぜひ目を通しておくことをおすすめします！ なお、各スクリーンショット画像は「Introducing Adobe Fireworks CS5」でチェックしてください。 Text layout improvements さて、紹介されている中で一番気になる機能は、「Text layout improvements」。テキストレイアウトの改善です。 複数選択できる 改善の中の「テキストブロック内の隣接しない文字列選択が可能に！」というのがあって、改善の中でもこれは新機能と言えると思います。選択した文字列にそれぞれ色やテキスト飾り（下線）がつけられるようになると
Cool Sprites – Free overlapped CSS menu using CSS Sprites - Deepu Balan - Scribblings of a cyber geek - Web Design Blog
It is said that 70 to 80 percentage of the end-user response time is spent on the front-end. A major portion of this time is exhausted on downloading all the external components in a web page including, stylesheet, images, scripts, flash etc. An extra HTTP request adds 200+ milliseconds to a page (worldwide average). Since most of today’s browsers limit about 3 or 4 parallel requests at a time, a
li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> li > a" data-ddst-label="Navigation Items" data-ddst-no-support="background,border"> Home Categories Tutorials Resources Inspiration Freelance Interviews Design Freebies About Contact Advertise With Us Write For Us Contact Blog theme designers have all kind of options when it comes to things they can do with the t
せっかくはてダからHatena Blogに移行したので久々に書こうかと。たまにはまとまった文章の書けるブログもイイですね！とは言いつつも、どうせまたしばらく書かないんでしょうけどー:) はじめに HerokuでWebサイト作ってから2年ちょい。思うがままに機能追加してたらだんだんとレスポンスの悪いサイトになってしまったので、ここらで少し見直すことにしました。といっても実際にやったのは4ヶ月以上前なんですけどね。 対象のサイトはコチラ。 stiff slack watcher http://www.sswatcher.jp/ 名古屋にあるstiff slackというレコードレーベル & ショップのWebストアです。店主のTwitpicに上がるレコードを拾ってきて整形、注文できるようにしてます。ちょっと話がズレちゃいますが、ひとひねりある音楽がたくさんあるので、よければ覗いてみてください。 以
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. It’s important for SEO purposes your w
Note: This post was first published on the 27th August, 2009. Web optimization is a vital part of web development and maintenance but also something often overlooked by webmasters. Just think of the money you can save and how it can potentially help increase your readership and traffic when they are properly done. If you have not done any optimization to your website (or blog) so far or are merely
Tips And Tricks For Print Style Sheets | Smashing Coding
Print continues to be treated somewhat cursorily by most Web designers, who tend to be obsessed with pixels rather than printers. In the real world, a significant portion of people rely on pages printed from websites for reference: there’s still something about having a physical sheet of paper in one’s hands, even in this age of digital saturation. Web developers can take several steps to bridge t
Sass/Compass/CSS Sprite/Gzip/ Minimize HTTP Requests! Requests 30 vs 1 (CSS Sprite) - YouTube http://www.youtube.com/watch?v=s__XwfwxMW8
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 12] .htaccessファイルをGUIで簡単に作成する 文＝東 孝之（（株）ゼネラル・プレス） Tool .htaccess Editor URL http://www.htaccesseditor.com/ Web制作を行ううえでなにかと「.htaccess」をつくる場合が多いわけだが、毎日使うわけではないので書き方を忘れてしまいがちになる。それをオンラインで簡単に解決してくれるのが「.htaccess Editor」だ。ファイル一覧の拒否やベーシック認証、エラーページの表示、WWWあり・なしの統一、リダイレクトなどを設定する.htaccessファイルだが、.htaccess Editorを使えば、フォームに設定項目を入力するだけで簡単に.ht
A list of resources, tutorials, and development tools for the Blueprint CSS frameworkLinks to Blueprint Resources by Lee Honeycutt (honeyl@iastate.edu) Blueprint CSS Framework Blueprint Home - homepage describing the framework and providing all CSS files. Blueprint Google Groups - open-access group site that includes links and discussion of Blueprint development. Blueprint Wiki - includes tutorial
CSS - to-R
CSSの記事一覧 Tailwind CSSで任意のメディアクエリを指定する Tailwind CSSでは簡単にメディアクエリの指定が可能です。 2023年11月 2日 00:40 Tailwind CSSでdisabled Tailwind CSSでdisabled属性がついた要素に対してスタイルを当てたい場合には、disabled擬似クラスを利用して指定を行います。 2023年10月19日 15:32 Flexboxのjustify-contentで最後の行を左寄せにする方法 Flexboxのjustify-contentではflexアイテムの配置方法が指定できます。 2016年8月15日 12:52 Re : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ ネタ元 ： Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ ネタ元の記事に
少し遅れましたがテンプレ変更の告知です。 11月18日からこのサイトのテンプレートにcss spriteを採用しています。 ついでにリンクに使っているボタンイメージなども、全てimg spriteを行いました。 現在23個の画像を一つにまとめて表示しています。 結果、サーバーへのリクエスト数が減り、サイト表示がかなり速くなりました。 注意点 この変更により、スタイルシートを無効にして閲覧されている方にはとても見苦しいサイトになってしまいました。 もしスタイルシートを無効にして閲覧されている方がおられましたら、お手数ですが携帯バージョンの利用をお願いします。 (※携帯バージョンは公開終了しました) また、当サイトでは Index.xmlで最新記事10件序文配信 Atom.xmlで最新記事5件を全文配信 しています。 （↑負荷削減のため、11月初旬より配信数を減らしています） 毎日閲覧して下さ
css spriteなど画像spriteの具体的な実装方法
スタイルシートで利用する背景画像を一つにまとめるcss spriteとか、 <img>タグに利用する画像を一つにまとめるimg spriteとかを利用する方法の紹介。 併設の別館ブログにimg spriteを導入したのでその覚書き。 （このブログ（バックステージ）には導入していません） 注意点：背景のリピート画像には使えない はじめに注意事項。というか出来ないこと background: url("../hogr.png") repeat-y とかやっている画像は一つにまとめる事は出来ません まず画像の用意 サイト内で使いたい画像を一つにまとめます。 この時、画像をなるべく整頓しておくと後で楽。 ▲（クリックで拡大） 上記みたいな画像をベースにする。そしてレイヤーを扱える画像編集ソフトを用意して、 画像一つ一つをレイヤーで配置し、目的の画像の開始部分（左上）をグリッドに併せて利用すると後で
エンジニアとしてのキャリアに箔が付く？LIG菅原のびすけさんに、“若手エンジニアが本を書くメリット”を聞いてみた！ エンジニアのアウトプット方法はさまざま。勉強会で登壇したり、技術系ブログを書いたり、皆それぞれに合うやり方で、自らの知識や技術を発信しています。 今回は、今年（2016年）1月に共著『フロントエンドエンジニアのための現在とこれからの必須知識』（マイナビ出版）を出版した株式会社LIGのエンジニア、菅原のびすけさんに取材。開発のかたわら、入社2年目で3冊という速いペースで書籍のリリースを続けるのびすけさんに、若手エンジニアが本を書くメリットを伺ったほか、本業と執筆をどう両立させているのか、気になる方法についても語っていただきました。 『フロントエンドエンジニアのための現在とこれからの必須知識』（マイナビ出版） 菅原 のびすけ（すがわら のびすけ） 1989年生まれ。岩手県立大学在
CSSのbackground-imageでSVG画像を表示し、SVG非対応ブラウザではPNG画像を表示する（CSSだけで実現）
ブックマークサービスQiNeel関連の記事や身の回りのよしなしごとをそこはかとなく書きつくっています。 どういうこと？ タイトルが長いですが、要するにこういうことです。 CSSの background-image プロパティでSVG画像を表示する（背景画像とかCSS spriteとか） SVGに対応していない古いブラウザでは、フォールバック（代替）としてPNG画像を表示する JavaScriptを使わず、CSSのみで完結！ Retinaのような高精細ディスプレイでもぼやけずに画像（イラスト）を表示するには解像度に依存しないSVGを使うのが一番いいのですが、IE8やAndroid 2.x系などの古いブラウザではSVGを認識できず、背景が驚きの白さになってしまいます。そんなブラウザにはPNGを読ませてあげなければいけません。 そのへんをうまい具合に表示する小技の紹介です。 代替画像は別にGIF
5 Interesting CSS Techniques
Introduction CSS3 has been out for a while, but too bad, most of the browsers haven't really supported it yet. So, let's go back to CSS2 this time. Well, at least CSS2 supported by most browsers even the old school IE6 and 7. These 5 interesting CSS techniques are something that you might not seen before. Triangle in CSS Creating a triangle using pure CSS with border property. It's something prett
Ajax Performance
Ajax Performance IE8: The Performance Implications March 7, 2008 on 1:25 am | In ajax | No Comments Mix08 is here, and with it the first beta of IE8. John has a great roundup of the JS/Dom work, noting that “Internet Explorer 8 is our release.” He’s right. I’ll run through a few of the items that have particular implications for performance. This one is the most exciting for me: the IE team has fi
While working with one large project, my colleague and I were thinking about how to automate building the CSS sprites. Before, we used to build them manually or with different online services which anyway took a lot of time. Also, by that time we already used Gulp to build the project and so were looking for a gulp-friendly solution for sprites. Initially we were choosing from different variants:
どうもこんばんは！今回のtipは【CSS Spritesを用いた表示高速化と軽量化の実施方法】です。ページの高速化に関しましては色々な方法ありますが、もっとも手軽に始められる方法の一つだと思います。 CSS Spritesについて CSS Spritesとは簡単に言うと複数の画像一枚にまとめ、読み込みの回数（HTTPリクエストの回数）を減らし、さらには画像自身の容量も削るという方法になります。通常の場合、画像は以下のように一枚ずつ表示しているかと思います。CSS Spritesではこれら複数の画像を一枚にまとめ、背景画像に指定した上でbackground-position（背景画像の表示位置）を使って表示を切り替えていきます。この方法はボタン等でよく見られます。では実際に上の画像を使ってCSS Spritesを実装してみましょう。 CSS Spritesによるボタンの作成 １.ますはボタン
サイトの重要な要素メニューを印象的にすることで、回遊性をもたらせることができるかもしれません。 Kwicks for jQuery and an awesome horizontal animated menuではJavaScriptを使用し、マウスオーバー時に良い動きで人の目をひきつけます。 sponsors 使用方法 Kwicks for jQuery and an awesome horizontal animated menuからjquery.kwicks-1.5.1.jsをjQuery Easing Pluginからjquery.easing.1.3.jsをダウンロードします。 今回はjQueryを使用するので、jQueryからjquery.jsも。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <s
CSS Sprite Script - collamo
もうネタとしてはかなり賞味期限切れだと思うんですが、 CSSスプライトを簡単に作れるPhotoshopスクリプトっていうのをちょっと前に作ったので公開します。 前にTonttuっていうAirのCSSSprite支援ツールを作ったんですが、 プロジェクトをttdファイルっていう独自のフォーマットでしか保存出来なく、これだとまだまだ不便だなーとずっと思っていたので、いっそpsdのプラグインにしちゃえってことでこんなもの作りました。 http://collamo.jp/cssspritescript/CssSpriteScript.zip PhotoshopでSprite画像を組み立てて、あとはjsxを実行すればHTMLとCSSを吐き出すようなツールになっています。 スプライトを作ったpsdをそのまま残しておけば良いので、運用で画像差し替えなんかあっても便利に使えるんじゃないかと思います。 以下
Create a Sprite Animation with HTML5 Canvas and JavaScript
Sprite animations can be drawn on HTML5 canvas and animated through JavaScript. Animations are useful in game and interactive application development. Several frames of an animation can be included in a single image and using HTML5 canvas and JavaScript we can draw a single frame at a time. This tutorial will describe how HTML5 sprite animations work. We will go step by step through the process of
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Sprite Tips and Techniques - Web Design Ledger
2011-05-17のJS: jQuery 1.6.1リリース、new 演算子への理解、altJS
How To Speed Up WordPress — Smashing Magazine
PNG画像を最適化する | エンタープライズ | マイコミジャーナル
Google devfest 2010にいってきました - d.hatena.zeg.la
20 Useful Tools to Make Web Development More Efficient
1枚の画像を切り出すテクニックCSS Sprite、便利ツール登場 | エンタープライズ | マイコミジャーナル
WordPressテーマ "iNove" のYSlow的サイト最適化 | ゆっくりと…
RsStudio Style - Fireworks CS5 個人的に気になった新機能
10 Tutorials for Improving Your Blog Theme - DesignM.ag
Webサイト高速化のためにやるべきこと - プログラマ憧れプログラマ日記
Five Ways to Speed Up Page Response Times
Web Optimization for Beginners: Tips & Best Practices
Mobile Front-end Optimization Standard:2012
Blueprint CSS Resources
css spriteを導入、サイト表示がかなり高速化しました。
LIG菅原のびすけさんに、“若手エンジニアが本を書くメリット”を聞いてみた！
http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites
Generating CSS sprites with Gulp — Frontend Babel
CSS Spritesを用いた表示高速化と軽量化の実施方法 | Stronghold Archive
印象的なメニューを作成するJavaScript「Kwicks for jQuery」