Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game. As game complexity
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. In this web design and development tut
Published on 2012-03-17 RSS SVG導入のためのレガシーブラウザ振り分け やっと少しずつ現実的になってきた、webで使える夢のベクター画像SVG。拡大し放題だししかもテキストデータでXMLだわ容量小さいわってことで何ともかわいいヤツ。 当方ものすごくSVG好きです。 拡大してもなめらかSVGちゃん (ちなみにこの画像自体はPNG) SVGが使いたい もともとサイトの素材画像はIllustatorで作ってたのもあり、実はローカル環境ではだいぶ前から画像はSVGにしてたんだけど、webでってなるとやはりネックになってくるのが、いつもの我らがInternet Explorer。caniuse.comによれば、SVG画像を普通の画像と同じ様に扱えるのはどうやらIE9以降。いくらなんでも現時点で8を切るわけにもいかず、SVG導入は将にIE待ち状態。いつも通りです。しかたなく
jQuery & CSS Sprite Animation Explained In Under 5 Minutes | AddyOsmani.com | Where Web Businesses Grow
Today we’re going to take a look at sprite animation. There’s been a lot of talk this year about the future of technologies like Adobe’s Flash and for good reason – with the performance of JavaScript frameworks having come so far since they were first conceived, it’s now possible to create equally as powerful animations and effects without needing to use any third party plugins.In today’s screenca
タスクランナーで、WordPress を LiveReload する 2014-05-29 WordPressのテーマを作成していて、「ブラウザがリアルタイムで更新してくれたらいいのに」と思ったことはありませんか？ LiveReloadは、何らかのファイルを保存するとブラウザが自動で更新されるツールです。 このLiveReloadを利用するとリアルタイムでブラウザが更新されるようになるため、WordPressのテーマ作成などに役立ちます。 WordPressをLiveReloadすると、修正を保存した瞬間にブラウザが更新されます。 画面を並べれば、エディタとブラウザを行き来することなく、テーマの作成が楽になります。 WordPressのテーマを作成する場合、大きく2つのケースが考えられます。 ローカルサーバーで、WordPressを作成 リモートサーバーに、ファイルをアップロードして作成
小さなアイコン画像などを一つにまとめて表示はCSSで切り出して行うのがCSS Spriteです。用意する手間があるため二の足を踏むケースも多いのですが、Sprite Factoryを使えばごく手軽に運用ができそうです。 インストールします。Rubygemsでインストール可能です。 実行はsfコマンドで。ディレクトリを引数としてそれ以下にある画像を全てまとめてくれます。 生成されるのはimg.cssとimg.pngです（カスタマイズ可能）。 生成されたCSSです。img.pngのSprite指定になっています。 生成された画像です。全て横につながった画像になっています。 生成された画像と元ディレクトリです。 オプションです。パスやSass形式での出力などに対応しています。 Sprite Factoryはクラス名に元のファイル名がつけられるので、Sprite画像は見ずともクラス名の指定がしやす
Free beautiful web icons - Vector social media icons
Beautiful Free icons In png, svg, vector, CSS sprite and webfont formats... Vector and webfont Social Media icons for free! 444 png black and white web icons + 72 color and vector Social Media icons for free ! Easy to integrate in your website or your mobile apps by using CSS sprite and/or webfont. Download Full pack Color + Black and White Normal and @2x PNG, SVG, PDF, AI and EPS CSS sprite Web f
WordPressに移行してHTML5で組んでみた - Rewish
2009 - 06 - 15 その他/告知 0user 0user MTはある程度使えるレベルになったので、PHP製CMSのWordPressに移行。同時にデザインも変更してHTML5っぽい感じにしてみました。 移行に伴って色々やってみたのですが、その辺は個別でまとめるとして、今回は簡単に書けそうな部分にだけ触れます。 HTML5について 現状、仕様を完全に追いきれて無いので、割と感覚で組んだ部分があります。結構難しいですねHTML5。適当にやってたら直ぐに置いていかれそう。でも面白い。 疑問点 セクションの関係を意識してたらh1がやたら増えた。こんな感じでいいのだろうか。まだ策定段階なので見本はほとんど無いし、仕様書見てもあんまり解らなかった。 と言うことで仕様が確定するまで取り敢えず待つことにする。 表示の高速化関連 CSS Spriteを使った(まとめ方が若干変) CSSを一つのファ
Parkn' ParkのshihoさんにFireworksについてご質問をいただきました！ shihoさんありがとうございます！！^^ 頂いた質問は FireworksとPhotoshop＆Illustrator、どう使い分けているかFireworksって画像の書き出し汚く感じる？ の２つです。 Fireworksマニアに書こうかと思ったのですが、 私の主観だったりするところもあるので、 とりあえずこっちのブログに書いてみました☆ FireworksとPhotoshop＆Illustrator、 どう使い分けているか 私はwebデザインのほとんどの作業をFireworksでやっていまして Fireworksのいいところ・好きなところがはあげればきりがないのですが、 ベクターとビットマップが同時に扱えて Web（画面デザイン)をすることに特化していて 単位やカラーモードを気にすることなく（最
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の画像フォーマットの仕
無精で短気で傲慢なプログラマ
外国為替レート変換タグ が Firefox 3.6.8 で動かない (作者様ページ)。 IE8 では OK。Firefox のコンソールには illegal character http://raku2fx.com/fxapi-getfx.php?e=ex1&f=USD&JPY&v=5 (以下文字化け) と表示されている。 http://raku2fx.com/fxapi.js をローカルに保存して、 function exchange(e, f, t, v, cf){ document.write('<script type="text/javascript" src="..."> を document.write('<script type="text/javascript" charset="utf-8" src="..."> とすれば動いたので、ぜひご修正いただければと。 Ameb
オープンセミナー岡山に行ってきました。 今回は、テーマが『フロントエンドとサーバサイド』であったためか、 参加者が例年より多かったような気がします。 オープンセミナー2014@岡山のサイト セッションの内容ですが、以下の順番でした。 1.パソコンは私たちのもう１つの目-見やすく、聞きやすいＷｅｂページづくりにぜひご協力を！ スピーカー：毛並 みけ 2.ソフトウェアエンジニアの目指す道〜フロントエンドとサーバーサイドを超えて スピーカー：倉貫 義人 3.実践 大都会式 プロトタイピング＆フロントエンド2014 スピーカー：前川 昌幸 & 久保木 博 4.オープンで柔軟なクラウドプラットフォーム ”Microsoft Azure“ スピーカー：井上 大輔 5.明日からできる、デザイン脳！ スピーカー：秋葉 ちひろ 6.ベンチャーのサービス開発におけるフロントエンドとサーバサイドの間 スピーカー
MdN-Designer meets Designersに行ってきました。 テーマは「現場で生かせるweb標準の知識とテクニック」。個人的にはお腹いっぱい気味のテーマではあったんですが、最近お気に入りのcouldの人が喋るということで。会社のデザイナ−2人と同行です。 場所はヒルズ。1年前までは毎日通ってた所です。久しぶりに麻布十番の干物屋さんでお昼食べてきました。美味！ 感想 「web標準はどうなのよ」話としては、今までのまとめのような講演が多かったです。 振り回されるんじゃなくて、より良いものをより多くのユーザーに届けるツールとしてweb標準があるよ。妄信はダメだよ。でも今アクセシビリティの高いサイトを作ろうと思えば、web標準的な制作アプローチが断然一番でしょ、っていう。 同僚のデザイナー（お局系・紙あがり・佐藤可士和の話は好きだけどオライリーさんが誰かは知らない）を連れてったのが良
ハイパフォーマンスWeb再考 - 第1回 YSlowについて - VTuberになったプログラマーの魂の残滓
先日Yahoo!ニュースがリニューアルを行ったそうです*1 今回のリニューアルでは快適に使うことができるようパフォーマンスを重視したリニューアルを行った、とありました。 で、思ったのがWebにおけるパフォーマンス向上のためにどういうことができるのか。 そして、実際に書籍にもあるような内容を実施するために何に気をつける必要があるのか、について改めて考えてみました。 そもそもWebにおけるパフォーマンスとは何か Webサイトにおけるパフォーマンスとはいったいなんなのでしょう。 個人的な考えですが、パフォーマンスとは大きく分けて クライアントからサーバ、サーバからクライアントまでの手続きの短さ*2 サーバにおける処理の軽さ なのではないかと考えています。 前者はとても分かりやすい部分だと思います。 ブラウザからとあるURLにアクセスがあったときにどれだけ速くページを表示させるか。 そして後者です
なかなか面白い結果に。 Quick Cacheは初速が速く最速で0.26を出したこともありましたが、なぜか不安定でした。 「Hyper CacheはQuick Cacheより、さらに32%高速化できる。」ということになります。 ちなみにHyper Cacheはキャッシュ化されたページをGzip圧縮することもできます。容量が約1/3になるのですが、表示速度だけで言えば圧縮しないほうが0.05秒速いです。 ここは転送量を取るか速度を取るかで選択してください。 とってもHyperなプラグインだった Hyper CacheのハイパーなところはGzip圧縮だけではありません。 予約投稿にも完全対応。 コメントがあった場合にもそのページだけリセットしてくれる。 Gzip圧縮できるので容量の面で貢献。 ひとつのフォルダしか作成しないので、初めにフォルダを777に設定さえすればxreaやCoreserve
How to automatically generate CSS sprites with Sass and Compass | Code Chewing
In this tutorial you will learn how to create CSS sprites automatically, using Sass and Compass! No more going back and forth into Photoshop and figuring out the position of each image, then adjusting your stylesheet manually. This tutorial is aimed at Windows users, but the principles are all the same. For this tutorial, I’ll presume you have Sass and Compass running inside your website developme
YSlowの記事の続きです。 実際に何らかのサイトにチューニングをかける手順と共に紹介した方が分かりやすいと思うので、このサイトを使ってチューニングしようと思います。 ちなみにApache2.x+mod_railsを使ってRailsを動かしているので、そこを念頭に置いたチューニングをかけていきます。 まず、いきなり否定的な話になりますが、全ての項目でAを取るのはかなり困難です。 たとえば、チェック項目2つ目の「Use a CDN」は、最低でも２つのサーバーを必要としますので、先立つものがないと難しいですし、ほとんどのチェック項目ではAPIなど、自分の管理下にないサーバーを使っている場合、手の出しようがない状態になります。 ですので、今回のチューニングは若干消極的ではありますが「Fの項目を少しでもなくす」を目標にしたいと思います。 1. Make fewer HTTP requests
メガドロップダウンメニューをjQueryとCSSで作る：via Mega Drop Down Menus w/ CSS & jQuery
メガドロップダウンメニューをjQueryとCSSで作る：via Mega Drop Down Menus w/ CSS & jQuery サイトが巨大化するにつれ、多くの情報を一度に見せられる方法が運営者に求められています。 それを解決する一つの手段がメガドロップダウンメニューです。 一見、ユーザビリティ上好ましく見えないかもしれませんが、ユーザビリティの第一人者「Jakob Nielsen」はAlertbox: メガドロップダウン式のナビゲーションメニューは効果あり（2009年03月23日）と述べています。 今回はjQueryを利用して、メガドロップダウンメニューを作成してみたいと思います。 via：Mega Drop Down Menus w/ CSS & jQuery sponsors 使用方法 ※長いので、先にサンプルを見る まず以下のようなメニューが記述されているとします。 <u
はじめてBootstrap LESSをがっつりカスタマイズしたので、今回はその覚え書きです。 Bootstrap3 Lessを使用するにあたり、Gruntを導入したほうが俄然便利なため、今回はGruntの導入から説明いたします。 Botstrap LESSでカスタマイズする理由 前もって言ってしまうと、基本的なカスタマイズは公式サイトのカスタマイズページで十分すぎるくらい出来てしまいます（以前見た時よりも、ものすごく項目数が充実しているような気が…）。 そのため、わざわざLESSを使い、さらには環境を整えてやる必要があるかと言われれば、使用目的によっては不要かもしれないですね。 ただ、LESSでのカスタマイズだと公式サイト以上の編集が容易にスピーディーにでき、もしも途中で大幅な仕様変更があった場合でも柔軟に対応できます。 また、構造把握や管理がしっかりできるので、今後もBootstrapを
CSSスプライト活用でリクエスト数を削減してスマホでも高速通信（Retina Displayにも対応） | DevelopersIO
CSSスプライトの利用について スマートフォンの普及に伴って、ネットへのアクセスは自宅のPCでのアクセスから出先の無線通信環境下でのアクセスへと移行している傾向が少なからずあるかと思います。 ウェブサイト等を快適に閲覧するための条件の一つに、より少ないサーバーへのリクエスト数が挙げられます。 複数の画像を集約した1枚の画像にまとめるCSSスプライトを活用することでリクエスト数を減らすことができます。 キャッシュに格納されたスプライト画像はページ遷移の際の高速通信につながりますので、 各ページで汎用的に使用されるアイコンなどをCSSスプライト化するとよいでしょう。 それらをRetina Displayのような高解像度ディスプレイに対応する方法を合わせて取り上げたいと思います。 方法 1.画像を用意する 非Retina Display用とRetina Display用の画像を2枚用意します。
Googleの検索ページは画像が１つしかない
Googleの検索のページには、いくつも画像があるように見えます。 が、上記の画像が1枚だけあって、それをcssで表示してます。 これは、Webのパフォーマンスチューニングで、 HTTPのリクエストを減らすためのテクニックの１つです。 [2007-10-6] に追記。 Website Performance CSS Sprite Generator http://spritegen.website-performance.org/ 複数の画像をzipで圧縮してアップロードすると、画像を結像し、CSSを出力してくれるサービス スポンサーリンク
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する Sass/Compassでは保存の際にminify圧縮するか圧縮しないかを選択できますが、両方出力したい場合、次のような方法で出力できます。 config.rbに以下のコードを追加します。 output_style = :expanded on_stylesheet_saved do |filename| if File.exists?(filename) minifyFile = filename.gsub('.css', '.min.css') FileUtils.cp filename, minifyFile file = File.read minifyFile colon = ':' semicolon = ';' comma = ',' open_brace = ' {' close_brace =
「CSS Sprite」で画像の表示速度を高速化する【ホームページの表示速度を速くする！】読み込む画像ファイルがたくさんあると、ホームページの読み込み速度が低下してしまいます。画像がたくさんあるなら、それらを「1つの大きな画像」に結合させてみましょう。すると、全体のファイルサイズも減り、通信回数も減るため、ページの読込速度が速くなります。複数の画像を1つにまとめ、スタイルシートを使って表示対象を選択するテクニック「CSS Sprite」の使い方をご紹介！ ウェブサイト内の画像表示を高速化する「CSS Sprite」 高速な回線が普及した今でも、ウェブサイトの表示速度は速ければ速いほど望ましいでしょう。ウェブサイトの表示が遅くなる要因の1つとして、「読み込む画像ファイルがたくさんある」という理由が挙げられます。画像1つ1つのサイズは小さくても、数がたくさんあれば読込完了までにかかる時間は長く
![「CSS Sprite」で画像の表示速度を高速化する [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
ウェブサイトのパフォーマンスを測定できるサービス「WebPageTest」を紹介します。 「WebPageTest」はもともとAOLによって開発されたプログラムで、2008年にBSDライセンスの下でオープンソース化されました。現在はGoogle codeとして管理されています。 今回紹介するオンライン版はWebPagetest LLCによって運営されているもので、かなり高機能です。 WebPageTest 当ブログでは最近、このサービスを使ってチェックし、あまりにパフォーマンスが悪かったため、一部最適化を実施し、何秒か改善させました。まだかなり遅いですが。 １．測定 測定したいURLを入力。地域やブラウザの選択を行うこともできます。 「START TEST」をクリック。 測定待ちになります。空いていればすぐに開始します。 測定実施中です。 結果が表示されました。すべての測定が終わるまで30
Webサイトを楽しく見せることができるフレームアニメーション。SVG画像とCSS、JavaScriptで滑らかな動きを実現する方法、注意点を解説します。 デザイナーから、「今回のプロジェクトではフレームアニメーションを使いたいんだ。きれいに動くように実装してほしい」と言われたらどうしますか？ フロントエンド開発者には、デスクトップとモバイルを問わず、すべてのブラウザーで滑らかに動き、ハイパフォーマンスでメンテナンスしやすいフレームアニメーションの実装が求められます。 このチュートリアルでは、HTML、CSS、JavaScriptを使ってアニメーションを作成する方法を紹介します。改善を繰り返しながら、プロジェクトにとって最善の結果を達成しましょう。 フレームアニメーションとは？ フレームアニメーションについてのAdobeによる定義は以下のとおりです。 すべてのフレームでステージのコンテンツが
先日【ヤフーニュース】の見た目が少々変わり、ほんの気持ちだが「表示が速くなった?」ような感じがした。気のせいかも、と思ったが色々と調べてみると【Yahoo! JAPAN Tech Blog「Yahoo!ニュース高速化へのサイトデザイン側からのアプローチ」】で、実際にいくつかの高速表示のためのリニューアルをしていることが分かった。せっかくなので中身を調べた上で、使える技術は当サイトでも導入することにした。 ●高速化技術は大きく二つ。「画像の軽量化」と「CSS Spriteの導入」 詳しくは元記事を読めば分かるが、高速化の際に使われた技術は二つ。「画像の軽量化」と「CSS Spriteの導入」。後者は【「CSS Sprite」で検索してみると色々と事例が出てくる】ので分かると思うが、簡単に説明すると「複数の画像を一枚画像に全部載せて、一度に読み込んでサーバーへのアクセスを減らす」というもの。実
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさん、こんにちは。サイバーエージェントでフロントエンド・サーバーサイドを実装したり、オフィスを作ってみたりしている@herablogです。今回は、Amebaアプリでアメブロの記事をネイティブ化したプロジェクトをご紹介したいと思います。多くの方がご存知のようにアメブロは2005年にPCブラウザ向けサービスとして提供され、インターネット上に個人やグループの記録を残す、まさしく THE Web といったサービスです。この記事では、10年以上のデータが蓄積されたWebサービスをどのようにしてネイティブアプリとして組み込んだかご紹介します。 コンセプトネイ
【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」を開講しました！！ | DevelopersIO
【課外授業5日目】「Sublime Text 2とSass&Compassで効率的なコーディングライフ」を開講しました！！ クラスメソッドブログ課外授業5日目 今回は今大人気のSublimeText2とSass&Compassの勉強会でした。弊社のブログでも大変人気なこのシリーズですが、今回も募集30名という枠に対して倍近い応募があり人気の高さが分かりました。 1時間目：ちょっと心地よいHTMLコーディング with Sublime Text2 1時間目は、清田 隆志によるsublime text 2 のパッケージ（プラグイン）についての話でした。発表したスライドは以下になります。 スライドのリンクは以下になります。 https://dev.classmethod.jp/slide/html-coding-with-sublime-text2/ ロレム・イプサムについて熱く語る清田先生。サ
CSS Carved Pumpkin / mauricesvay どうも、Webのおべんきょうちゅう、おつぱ（ @OZPA ）です。 今回は、ブログの表示速度を少しでも上げるために「CSSスプライト」を実装してみました。 CSSスプライトとは Webページ内で使用する複数の画像をひとつにまとめ、ポジションを指定することにより表示をさせるという手法、それが「秘技 CSSスプライト」。 今回はストライプじゃ無くてほんとにスプライト。 関連：[ｼｭﾜｼｭﾜ]Webページの表組み（table）を「スプライト」にする[ｼｭﾜｼｭﾜ] | OZPAの表4 詳しくはWebクリエイターボックスさんの以下の記事をどうぞ。 CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス さて、練習がてら、jQueryをいじってはブログの仕掛けに取り入れている私。 ブログトップに、位置固定のソーシャル
![[Web練習帳]ブログの表示速度をアップするために「CSSスプライト」を導入してみたのでその手順メモ](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed6b17ca3fe068733db9a2376e06c0fcfda6a4e3/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2F4059476052_91be170aa71.jpg)
ソースコード登場、CSSで画像分割 "CSS Sprite Generator" | エンタープライズ | マイコミジャーナル
Ed Eliot氏およびStuart Colville氏は26日(米国時間)、CSS Sprite Generatorのソースコードを公開した。公開されたソースコードはLaunchpadに用意されたCSS Sprite Generatorのページからダウンロード可能。ソースコードはThe BSD Licenseのもとで提供されており、個人利用にも商用利用にも採用できる。 CSS Sprite Generatorは両氏によって2007年9月28日(ドイツ時間)に公開されたWebアプリケーション。ページで使われている画像をひとつの大きな画像にマージし、かわりにCSSの機能を使ってマージされた画像から必要な部分だけを表示しようというもので、同アプリケーションを使って複数の画像を一つの画像にできるほか、マージした画像からそれぞれの画像を表示するためのCSSデータが生成される仕組みになっている。 実
Cross-fading disjointed image rollover Cross-fading disjointed image rollover written in semantic, accessible mark-up, with unobtrusive javascript using css-sprites. Mike Foskett - 28th December 2007 Cross-fading disjointed image rollover Last update: 16th October 2008 This advanced technique uses CSS-sprites and JavaScript to change an image which is not directly associated to the link. It uses a
Introduction Yes, I know that there are thousands of tutorials regarding rounded corners with CSS, but anyway, I wanted to show you this way too. Hopefully, you will find it useful. It's important to point out that this tutorial is quite advanced regarding CSS, but I'll try to make it as simple as I can for CSS begginers. CSS3 is still not fully here, so until then, let's keep our work W3C v
css-sprit.es
This domain may be for sale!
スマホデザイン・UI 2014.07.07 WEBサイトやアプリの【Retina対応方法おさらい】 昨年からiPhone、iPad、iPad miniなどApple系デバイスの広がりによって急速に浸透して行った【Retinaディスプレイ】のモバイル端末。 一番はじめに打ち出された【Retina】という単語がユーザーにも浸透していますが、Windows8.1などでも高解像度(高DIP=Retina)対応が打ち出され、デバイス対決の舞台は”解像度”の戦いへと切り替わってきているのではないでしょうか。 我々WEBサイト制作者、WEBアプリ制作者が逃げられないのが、この高解像度ディスプレイへの対応になります。 今回は、WEBサイト、アプリ両方に影響があるRetinaへの対応方法をおさらいしてみましょう。 【関連ページ】スマホサイトを高速化、モバイルファーストインデックス対策 画像をRetina対応
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
35 CSS-Lifesavers For Efficient Web Design — Smashing Magazine
CSS-design is not easy. We need to find workaround across browser inconsistencies, not that easy CSS-concepts and quite counterintuitive CSS-solutions. Now it’s time to present you with some fresh (or not mentioned earlier) tools that can assist designers in their work. Today, we will look at 35 new and useful CSS tools, generators and resources that can significantly improve your workflow and red
CSS3 is coming and we as webdesigners should be ready for it! CSS is no doubt one of the most important web languages to style a website. (x)html provides the structure and CSS the style. It is where most of us get creative. Below is a fantastic list of Css snippets that we are sure you will find extremely useful. Whether you are a veteran web developer, or are just a beginner, check this snippet
画像置換せずにCSSのみでロールオーバーする - opacityだけじゃなくて要素の重なりも利用する | HTML + CSS | かたつむりくんのWWW
グローバルナビゲーションやボタン等で、画像を使ってロールオーバーを表現する方法にはいくつかあります。 僕は、以前はCSSでの画像置換によるロールオーバーを使うことが多かったのですが、最近では JavaScript（特に yuga.js）によるロールオーバーが基本になっていました。 しかし、最近、CSSだけでロールオーバーする方法を思いついたので、それをメインに使っています。特に目新しいことをやっているわけではないんですが、今まで思いつかなかったので、自分的には「おー大発見！」という感じでした。 サンプル こちらのサンプルをご覧ください。 opacity_layer.html ロールオーバーできましたでしょうか。 ここでやりたいことは、 通常は の画像 マウスオーバーすると の画像 といった具合です。ちょっとサンプルが見にくかったらすみません。 サンプルのソース <ul id="samp
CSS Nite LP, Disk 26「CSS Preprocessor Shootout」に行ってきためも。 - Mitsu.log();
2013-01-14 CSS Nite LP, Disk 26「CSS Preprocessor Shootout」に行ってきためも。 昨日、CSS Nite LP, Disk 26に行ってきました。今回のテーマはCSS Preprocessor Shootout。 CSSの設計をどうすべきかというテーマの基調講演ののち、前半はCSSプリプロセッサ SASS/LESS/Stylusそれぞれのお話、中盤はそれらを使うためのツールのお話、後半は実務で使われている企業の方々の事例、最後にCSSデザインの過去・現在・未来についてと、豪華登壇者による全10セッションでした。時間にして5時間半の長丁場でしたが、面白くて興奮しすぎて全然苦じゃなかった笑。参加した人には後で資料のフォローアップがある（確か３ヶ月後くらいには参加してない人向けにもオープンになるはず）ので、ここでは自分が気になった部分のざっ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Sprites: Image Slicing’s Kiss of Death
Create an Animated "Call to Action" Button
SVG導入のためのレガシーブラウザ振り分け -Blog //ヴォルフロッシュ
タスクランナーで、WordPress を LiveReload する
元画像群からSprite画像とCSSを生成·Sprite Factory MOONGIFT
『FireworksとPhotoshop＆Illustratorの使い分けとグラデーション品質の話』
PNG画像を最適化する | エンタープライズ | マイコミジャーナル
オープンセミナー岡山2014に行ってきました。 | 自転車で通勤しましょ♪ブログ
Designer meets Designersに行ってきました。 - blog::konk303
WordPressのWeb表示速度を極限まで高速化する6つの方法
YSlowでRailsサイトのパフォーマンスを改善する方法 (BLOG) - RED-MOUNT.COM
Gruntの導入から説明するBootstrap3 LESSのカスタマイズ - 環境設定編 | ajike switch
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する
「CSS Sprite」で画像の表示速度を高速化する [ホームページ作成] All About
ウェブサイトのパフォーマンス測定サービス「WebPageTest」
レスポンシブで滑らかなフレームアニメーションをCSSとJSで実装する方法
ページ表示の高速化を試みる……共用画像の軽量化 : ガベージニュース
『ネイティブアプリとしてのWeb (アメブロネイティブ化)』
[Web練習帳]ブログの表示速度をアップするために「CSSスプライト」を導入してみたのでその手順メモ
Cross-fading disjointed image rollover
CSS Sprites + Rounded corners | Css Globe
【今更聞けない!?】WEBサイトやアプリのRetina対応方法おさらい | モバイルラボ
サイトを公開するまえにチェックすべき15の項目 | エンタープライズ | マイコミジャーナル
Master your CSS3! Ultimate CSS code snippets