A List Apartのエントリーから、CSS Spriteを使用したナビゲーションに、マウスオーバー時にアニメーションのエフェクトをつける「CSS Sprite2」を紹介します。 CSS Sprites2 - It's JavaScript Time demo 5 demo 6 CSS Spriteとは、スタイルシートで一枚の画像から複数箇所に配置をしたり、マウスオーバー時の画像指定を行うものです。 CSS Sprite2は、そのCSS Spriteにスクリプトを使用して、アニメーションのエフェクトつけたものです。 使用するスクリプトは、デモではjQueryが使用されていますが、PrototypeでもYUIなど他のスクリプトでも実装は可能です。 CSS Sprite2のベースとなっているのは、下記ページとのことです。
img要素でCSS Spriteする方法
「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。 この手法は背景画像での利用が一般的なのですが、img要素でも利用することができるようなので、本エントリーで紹介します。 本エントリーでは、次のソーシャルブックマークボタン用の4つの画像を1つにまとめて、CSS Spriteを行ってみます。 背景画像の場合はbackground-positionプロパティでさくっと表示できるのですが、img要素として表示させるのにかなり苦労しました。ということで、コピペで使えそうなサンプルも用意しました。 「そういう場合、背景画像に変更するのが本来では？」というツッコミはなしでお願いします（笑）。
CSS すでにいろいろ出回っていますが、そういった情報は1つだけあれば良いわけではなく、それらの情報をまとめたり、精査していって、さらにより良いものになっていくのがWebの良いところだと思います。業務を行う中でメモしていたものが貯まってきたので、その理由とかを調べてみたのでまとめます。まぁ前置きはこれぐらいにして本題。 CSSをシンプルに効率良く書くということは、ネットワーク転送量の低下、パース速度の向上、そしてHTMLとのマッチング効率化に繋がります。そしてそれは即ち、ページのパフォーマンスを向上させることに繋がります。 また、「効率的なスタイル指定をする」と考えながら臨むと肩に力が入ってしまいますが、「非効率なスタイル指定をしない」という視点で考えていけば、自ずと軽量で効率的なCSSを記述することができると思います。 パターンマッチング(Pattern matching)について 「非
本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます） 昔作ったサンプルでそんなようなのがありました。 横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現 CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。 ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。 アイコン＋テキストという組み合わせの場合に、アイコンを背景として使う。 その他、本来背景として使う予定だった画像を一枚にまとめる。 とかが、ぱっと浮かびました。 んで、グローバルナビゲーションに限っては、img要素で配置する事
MdN Design｜総合情報サイト
第8回「最近注目を集めているJavaScript/jQueryのツール・テクニック45」 2010年04月09日 今回は、JavaScriptやjQueryを使ったテクニックやツールなどを紹介しよう。これまで同様の記事を何度か掲載してきたが、今回は海外で多くの注目を浴びたものを厳選している。フォームやボタン、カレンダー、ナビゲーション、デバッグ関連などさまざまな記事を紹介するので、ぜひチェックしてほしい。また、後半ではJavaScriptに関するリファレンスサイトなども紹介している。 余談だが、Smashing Magazineのページ上部にネットワークタブがあることをご存知だろうか。こちらでも記事を紹介しているので、ぜひご覧いただきたい。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：45 Fresh Usefu
デモページ 仕組みは、横に各コマを並べたPNG画像をCSSスプライトで順に表示させて、コマ送りのアニメーションのようにしています。 「show sprite」をチェックするとその仕組みがよくわかります。 「animation-duration」の数字を変更すると、アニメーションの速度が変わります。 デモページ：スプライトを表示 スタイルシートはコマ送りのステップを定義し、背景にしたPNG画像を少しずつずらして表示します。 デモは1秒間に10ステップ、500pxの画像を50pxずつ動かしています。 CSS div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
コンテンツの充実を図る、アクセシビリティに気を配る、サイトのレスポンスを上げる、どれをとってもまだまだのこのサイト。WordPressテーマinoveのカスタマイズを契機にCSS Spriteという技術を知ってから、まずはこの技術をもっと使ってレスポンスを上げよう！と考え、HTTPリクエストの削減効果と応答速度の変化を定量的に計ることができるツールを集めてみました。 一口にサイトの応答速度を計るといっても、予め何を計るべきかを決め、ツールが一体何を計っているのかを知っている必要があると思います。そこでクライアント〜サーバー間の回線速度は抜きに、 サーバーがWordPressのPHP処理を開始してからHTMLを生成し終えるまでの時間を計る。これにより処理負荷の重いプラグインの改善を図る。 ブラウザ（＝ユーザーエージェント）がHTML・CSS・Javascript・画像データなどをリクエストし
Webサイトでは一度の表示であっても、複数のコネクションで様々なデータが送信される。JavaScript、CSS、画像、Flashなどなど。コネクションが増えればそれだけ表示に時間がかかり、ユーザビリティは悪くなる。 コマンドラインで実行して連結する GoogleやAmazonでは回避策として複数の画像を一つにまとめ、CSSを使ってずらして表示する手法が使われている。それを実現するのがSmartSpritesだ。 今回紹介するオープンソース・ソフトウェアはSmartSprites、画像を連結してコネクションを改善するライブラリだ。 SmartSpritesはJava製のソフトウェアで、別途PHP版も提供されている。ルートディレクトリを指定すると、そこ以下にある画像ファイルを探索し、それらを結合してくれる。同時にそれを元のように表示するためのCSSも生成される。後は画像をそのまま表示する代わ
MdN Design｜総合情報サイト
第5回「パワフルなCSS/JavaScriptテクニック45」 2010年01月25日 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：45 Powerful CSS/JavaScript-Techniques http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/ 著者：Smashing Editorial 翻訳：中野恵美子 ※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています CSSやJavaScriptはデザイナーやディベロッパーにとって、極めてパワフルなツールだ。しかし、使いこなすためのアイデアを得るのはなかなか難しい。ただ、デザイナーやディベロッパーはほとんど毎日、新し
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 4日目は、本ブログでも何回か話題にしているインライン画像についてです。 データURIスキーム CSS Sprite画像はDataURI画像にすべきか？ Data URI画像のテスト結果について 以前の記事で私は以下のように述べましたが、これはいやらしい表現だ。 DataURIの画像は、通常の画像に比べて6倍遅いとかゆう記事もある このような『xxx倍高速化』、『xxx倍遅い』と言った表現は、わかりやすい反面、本質を見失
SPDY と WebSocket の基礎と SPDY の Push - Block Rockin’ Codes
最近 SPDY対WebSockets? などという記事が出てきたりして、 SPDY と WebSocket が色々ごちゃごちゃになって語られているのかもなぁ、と思います。 SPDY では Akamai の中の人の Guy's Pod » Blog Archive » Not as SPDY as You Thought や、それに対するフォロー記事 Followup to “Not as SPDY as You Thought” « Mike's Lookout なんかも、 ちょっと注目されたりしました。 これらの記事には WebSocket や SPDY の性質やモチベーションを正しく理解するために、 知っておくと良い知識へのキーワードが散りばめられていると思ったので、 そこら辺について、つらつら書いてみようかと思います。 SPDY は「遅い」のか？ Guy's Pod » Blog A
【画像編】サイト表示速度を高速化するための１０項目
どうだろう？ 画像は多ければ多いほど、http リクエストの数が多くなる。 これから紹介する画像を軽くすること以前に、まずは「画像を減らす」ことにトライしよう。 見た目に工夫は必要となるが、他サイトで提供されるブログパーツやイメージバナーなども、ペタペタ貼りまくったりしないこと。 2. アイコンを Font Awesome で代用する次に、サイト上のメニューやナビゲーションで「一般的なアイコンを多用」しているサイトでは、Font Awesome アイコンの導入により画像からの置き換えができる。 当ブログでもメニューなどで使用しているが、他サイトでも、このスタイルのアイコンは良く見掛けるはずだ。 それもそのはず。Font Awesome はウェブ上で最も人気のアイコンフォント。 CDN 経由で読み込むこともでき、サーバーへの負荷はかからない。なぜか「FontAwesome は遅い」という人も
画像作るのって面倒ですよね。最近はRetinaディスプレイの対応で解像度別に画像を作らなければならない機会もあると思います。個人的にはできるだけ画像は使いたくない。少し前に登場したWebアイコンフォントっていうテクニックがありますが、これを自作するのはかなり面倒です。そんなわけで少し前から話題になっていたWebアイコンフォントを詰め合わせたCSS「Font Awesome」を使ってみることにしました。 Webアイコンフォントを自作した時の記事も過去に書いているのでよければこちらもどうぞ。 【前編：フォント作成】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 【後編：Webフォント化】アイコンをWebフォント化してリクエスト数の削減とRetina Displayに一発対応 注意 今回は継承したり、Classを書き換えたりできるSCSS版を使ってみたい
ゲーム開発でHTML5やCSS3、JavaScriptの使いどころは？ 2011年9月27日、サイバーエージェント セミナールームで、「第21回 HTML5とか勉強会」が開催された。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナ向けの勉強会だ。今回のテーマは「HTML5＋ゲーム」。当日の様子をお伝えしよう。 「Smartphone 向け HTML5 ゲームの作り方」 まず、ディー・エヌ・エーの城戸氏（@sou）からプレゼンがスタートした。城戸氏はDeNAで海外向けWebViewHTML5アプリ開発や、内製タイトルのスマホ対応などを手掛けている。 mobageでは、さまざまなタイトルがすでにAndroid/iOS対応済みであることを紹介した。具体的にはHTML/CSS3ベース、Canvasベース、SWFベース（ExGame）といった複数の実現方法を使い分けている
Google のウェブ検索結果でウェブページのスクリーンショットに使われている data URI scheme。 data:[<mediatype>][;base64],<data> 形式のデータ (data URI scheme) を生成してウェブページに埋め込むことで HTTP リクエストを減らせるメリットがある。ただ、バイナリデータより3割ほどデータサイズが増える。 ファイルサイズが小さいアイコンを直接埋め込んだり、ブラウザが PC より対応しているスマートフォンでも使われ出している。ということで、画像のバイナリデータを Base64 にエンコードするツールをつくった。出力形式も HTML の img、CSS、JavaScript、生データに対応。 ツールの提供は終了しました。 data URI scheme がサポートしている HTML タグは object (images onl
Blog のデザインをリニューアルしました報告でもちょっと書いたんですが、アイコン関係を Web フォントを使ってやってみました。その時に利用させてもらったのが 「Font Awesome」 でして、今回はその簡単な使い方について書いてみようと思います。 Font Awesome, the iconic font designed for use with Twitter Bootstrap Font Awesome は簡単に言ってしまえば、Twitter Bootstrap のアイコンを Web フォントで扱えるようにしたもの。Twitter Bootstrap のアイコンは CSS Sprite で利用できるようにひとまとめになった 「画像」 として提供されていますが、Web フォントとして提供されることで、よりサイズ、カラーなどを柔軟に扱えるようになっています。 Font Aweso
Revoldiv is a California-based platform that simplifies media creation and consumption for podcast enthusiasts and media creators. Their platform aims to provide a simple space for building a community by…
スタイルシートの中で画像を多数呼出していると、HTTPリクエストが大量発生してページの読み込みが遅くなります。このような場合、CSS Spriteを使って回避することが一般的ですが、Data URIを使うと運用はもっと簡単です。 CSSファイルへの埋込 例えばOSSCafeの場合、サイトのCSS内で16ほどの画像ファイルを読込んでいます。 body { background-image:url(images/body.png) } body>header { background-image: url(images/header.png) } body>header div.center>h1 { background-image:url(images/logo.png) } ...(略) body { background-image:url(data:image/png;base64,
IDEA * IDEA
ドットインストール代表のライフハックブログ
追記 @jovi0608 さんに非常に丁寧にコメントをいただきました。 https://gist.github.com/shigeki/ba7941d114344ddd4b01 本文 CROSS 2014の次世代Webセッションに参加した。 いろいろ刺激を受けたので、特に、Webアプリケーションを開発・運用する上で、今後どう影響してくるだろうみたいな視点で整理したことを書いてみた。 次世代Webセッションは去年もUSTで見てて、めっちゃ面白かったので、今年は生で聞きに来た。 去年のセッションの議論は、 naoyaさんの記事が雰囲気がわかりやすかった。 Webはインターネットになった - naoyaのはてなダイアリー 去年、SPDYの内容とか追ってて、HTTP/1.1と何が違うのかみたいなことを調べて書いたりしてた。 SPDYで複数のTCPコネクションをひとつにまとめるとはどういうことか -
jQuery & CSS Sprite Animation Explained In Under 5 Minutes | AddyOsmani.com | Where Web Businesses Grow jQueryで行うFlashみたいなスプライトアニメーションのチュートリアルが公開されています。 iPhone向けのサイト等ではFlashは使えませんが、jQueryによって実装すればアニメーション機能も実装出来ますね。 デモページ jQueryのコードが意外にシンプルです。 数年後のアニメーションはどうなっているのでしょうか。 関連エントリ アニメーションの残像が残るjQueryアニメーションチュートリアル キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラ
2010/07/07 23:45 バグフィックス版 CSS Sprite Extension 1.1.2アップ 書き出しの際CSS中の画像への相対パスの算出方法を変更。深い階層においても正しく相対パスを生成できるようになりました。 2010/05/28 CS5対応版公開 旧バージョンを入れている方は上書きして良いか聞かれたら、上書きして大丈夫です。管理者権限のない方向け用VistaインストーラーはUninstallボタンを押して、再度swfを開くとInstallボタンが有効になります。新機能で選択した部分だけCSSをクリップボードにコピー出来るようになりました！ CSS Sprite Extensionは、Fireworks CS4とCS5に対応したFireworksの機能拡張でCSS Sprite(CSSスプライト)に適したCSSと画像を生成します。 この機能拡張が提供するのは、単純な3
需要が高まっているアニメーションを取り入れたWebサイトのデザインプロセスを大公開！【実例あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのまきこです。春っていいですよね……ほんとに。 さて、わたしは先日、「JOYSOUND」のスペシャルサイトのデザインを担当させていただきました。カラオケに関するさまざまなデータをインフォグラフィックにして視覚化し、アニメーションさせて楽しげに伝えるような、そんなサイトです。 今回は、そのインフォグラフィックやアニメーションにフォーカスし、デザイナー目線での制作プロセスをご紹介していきます。 視覚化や動きのあるサイトのデザインの仕方などを、LIGのサイト制作例として参考にしていただけると嬉しいです！ はじめに お客様はこんな会社さま 今回、制作をご依頼いただいたお客様は、株式会社エクシングさま。通信カラオケ「JOYSOUND」の運営などを行い、カラオケのさらなる楽しさを追求・提案している企業さまです。 エクシングさまとのおつきあいは、弊社サイトを通じて制作のお問い合わせ
CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、フロントエンドエンジニアのはやちですよ( ˘ω˘)✌ 今回はスプライト画像を使用した、アニメーションの実装方法を2つご紹介いたします(´ʘ‿ʘ｀)✌ 実装する前に準備をしよう まず画像が必要ですね。今回はこのような画像を用意いたしました。 1つの絵に対して100×126で作っております。ズレがないようにご注意くださいまし( ˘ω˘)☝ HTML マークアップはこんな感じで、sectionの中のspriteを動かします( ˘ω˘)☝ <section class="section css"> <h2>CSS</h2> <div class="sprite"></div> </section> 準備はこれで以上になります( ˘ω˘)☝ 実装をしよう お次にそれぞれの実装方法をご紹介します( ˘ω˘) CSS3を使用した形での実装方法 CSS3ではanimationを使用します。
実践Sass 後編
Sass/Compassを「触って覚える」を目的とした講習会スライド。 実習で使用するファイルは以下からダウンロード頂けます。 http://webnaut.jp/download/markup_140204/sass.zip 目次： 1. Sassとは／機能紹介 2. Sassを触ってみよう 3. Sass開発環境の設定 4. [Work1]ネストとインポート※ 5. Compassとは／機能紹介 6. Compassの設定 7. [Work2]Compassを使ったCSS Sprite実践※ 8. [Work3]納品時の作業※ 9. 書籍、参考サイト紹介 10. [Work4]追加課題※ =========================== 紹介記事 http://webnaut.jp/markup/663.html ===========================
超チューニング祭に参加＆表彰した - Qiita
ちょっと遅くなったけど、2014/4/26-27の二日間、ニコニコ超会議3内のまるなげひろばの一角で開催された超チューニング祭にドワンゴチーム(メンバーは 江添亮さん, kmizuさん, masarakkiさんと合わせて4人)として参加したり表彰などをした話。 参加チームは全部で18チームかな?(チーム番号は20までだけど、2チーム欠番?)。 競技ルール ルールは、niconicoのスマートフォン版webのコピーの一部改変版を主催者サーバー上に配置し、速度とUIの改善を競うというもの。チームごとにコピーが配置され、各チームに秘密鍵が配られ、その鍵でSFTPで各チーム用サーバーにuploadする。 UIのユーザー投票と測定結果のそれぞれの順位の合計が一番少ないチームが総合優勝となるため、速度だけでもデザインだけでもだめ、というものであった。 投票以外では、UI要件(どの要素がいくつ必要とか、
開発ライフを助けてくれる20ツール – creamu
nettuts+で、開発ライフを助けてくれるツールが紹介されています。 ざっといくつかご紹介。 » pForm PHPフォームを簡単に作成 » HTML Entity Character Lookup HTMLエンティティーを検索できる » Browser Shots Windows,Mac,Linux,FreeBSDの4つのプラットフォームの複数のブラウザで、サイトがどう見えるか表示してくれる » MeasureIt サイトのwidthとheightを計れるFirefoxプラグイン » CSS Sprite Generator 画像をアップロードすることで、CSSスプライトを生成してくれる » Domainr 綴りからいろんなドメインの組み合わせを作ってくれる その他のリストは以下からどうぞ。 » 20 Tools to Make the Life of a Web Developer
画像のHTTPリクエストをCSSを使って軽減する"CSS Sprite Generator" | エンタープライズ | マイコミジャーナル
Ed Eliot氏およびStuart Colville氏は9月28日(ドイツ時間)、Webページにおける画像の読み込みオーバーロードを軽減するためのおもしろい取り組みをWebサービス「CSS Sprite Generator」として公開した。ページを読み込む場合、画像を要求するHTTPリクエストが発行されるわけだが、「CSS Sprite Generator」はその要求数を低減させようとするものだ。 ページが画像を多く含んでいる場合、画像を取得するためのHTTPリクエストが大量にWebブラウザから発行されやすくなる。このHTTPリクエストを軽減するために、ページで使われている画像をひとつの大きな画像にマージしてしまい、かわりにCSSの機能を使ってマージされた画像から必要な部分だけを表示しようというのがCSS Sprite Generatorでの発想だ。 CSS Sprite Generat
コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編 | DevelopersIO
はじめに 今回から「すぐに使えるSCSS入門シリーズ」からタイトルを変えてSCSS・Compassを使ったコーダー向け開発効率アップテクニックを紹介していきます（シリーズは続きます）。 今回作成したサンプル このサンプルはgithubで配布しています。ダウンロードしてソースなどご確認ください。 動作するHTMLサンプルはこちらです。 CSS Spriteって？ CSS Spriteについてお復習いです。 簡単に言うと画像をくっつけてCSSのbackgroud-positionで表示を制御するテクニックです。 CSS Spriteのメリット 画像をくっつけることによってHTTPリクエスト数の削減 マウスオーバーなどで表示を切り替えるがスムーズ（個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します） CSSのみでボタンなどのアフォーダンスを切り替えることができる CSS Sp
こんにちは、@poyosiです。皆さんdata URI Scheme使ってますか？ 私は全然使ってません。 data URI Scheme（データ ユーアールアイ スキーム）自体はかなり昔からありますが、知っておいて損はないと思いますので、おさらいの意味も込めて書きたいと思います。 そもそもURI Scheme（ユーアールアイ スキーム）とは？ data URI Schemeのお話をする前に、そもそもURI Schemeって一体なんなの？というところを簡単にご説明したいと思います。 一般的にURI Schemeはあまり聞きなれないワードかと思いますが、実は身近なところで広く使われています。 例えば、Webサイトにアクセスするときに「http://exsample.com」というURLをブラウザに入力して表示させますよね？ このURI（URL）先頭部分に記述される「http」のような「どのよ
Intro 依存コンテンツを 1 つにまとめて配信する WebBundle の仕様策定と実装が進んでいる。 これは Signed HTTP Exchange と合わせて WebPackaging を実現するための仕様であり、組み合わせれば WebBundle に対して署名することでコンテンツの配信を通信と分けて考えることができる。 Signed HTTP Exchange に比べると格段に簡単な仕様なので、現状のフォーマットと挙動について解説する。 draft-yasskin-wpack-bundled-exchanges-latest WebBundle かつて Bundled HTTP Exchanges と呼ばれていた仕様であり、複数のコンテンツを 1 つにまとめ、配信することができる。 例えば index.html とそれが依存する css/js/favicon etc を 1 つ
メイキング「Birthday Song for ミク | miku-39.jp」こと技術解説 - 甘味志向＠はてな
「初音ミク」というキャラクターが登場して5年。彼女の存在は世界中へと広がり、数の多くの人を魅了してきました。 その驚きと感動を盛大に祝ってあげるためのパーティの準備、そんな気持ちでこのミュージックビデオを制作いたしました。 http://miku-39.jp 初音ミク生誕5周年おめでとう！ ということで「Birthday Song for ミク | miku-39.jp」というサイトを作りました。 せっかくなのでメイキングっぽい技術解説を書いてみたいと思います。 とりあえず miku-39.jp とはなんぞやってことなんですが、 Mitchie M ([twitter:@Tukada])さんが作った「Birthday song for ミク」という曲にあわせて Tatsuro Ogata ([twitter:@llcheesell])さんが作ったミュージックビデオにインタラクティブな感じの
CSS Sprite Generatorは、GoogleやYahoo!などで使用されている複数の画像を一枚の画像にし、CSSで表示位置を変更するスタイルシートをオンラインで生成するジェネレーターです。 Yahooで使用されている画像 Googleで使用されている画像 CSS Sprite Generator 使用するには、「Source Files」に複数の画像をZipに圧縮したファイルを指定します。 オプションはいろいろありますが、「Create Sprite Image & CSS」ボタンをクリックするとスプライト画像とスタイルシートが生成されます。
Fireworks ちょいネタ集 ※このエントリはFireworks CS4を元に書いています。 バージョン違いの場合は内容が異なるかもしれません。 大好きなFireworksの「地味だけどコレ知ってると効率いいよ！」という小ネタ集です。このネタが有名な話なのかそうでないのか分からないのですが、私自身最初知らなかったけど、気付いてからは効率上がったぜという話なので、もし知らないユーザーさんがいたら是非活用して欲しいなーと思って書いてます。 整列パネル 間隔に数値を入れて等間隔にする CS4ではスマートガイドがあるので、動かしたいオブジェクトを任意の位置へパパっと正確に移動させることができます。任意のオブジェクトを別のオブジェクトの上下左右のどこかに揃えたいなんて場合はそれで済ませる事も多いですが、等間隔に配置したい時は整列パネルの『間隔』使いますよね。 この『間隔』には２種類の間隔をとる方
2015年はgulpで決まり！開発環境をgruntから乗り換えよう！（コーダー編） | SONICMOOV LAB
もーいーくつねーるーと～、おーしょーうーがーつー♪ という所で、今年も残り 10 営業日を切りましたね・・・・！早いですね！ 皆さまいかがお過ごしでしょうか♪ 世間はクリスマスなムード一色ですが、皆さまお忘れになってはいないでしょうか。 大掃除という名の一大行事を！！終えない限りはクリスマスを迎えられませんよね（鬱 今週こそはきっと・・・ほほほ。。 自分を追い込んでみたところで、本題に入りたいと思います！ こちらは、ソニックムーブ Advent Calendar 2014 12日目の記事になります！ 目次 なぜ gulp なのか 目標 ディレクトリ構成 基本設定 タスク設定 トラブルシューティング 参考URL なぜ gulp なのか 当記事は grunt から gulp に乗り換えを考えているユーザーを対象としているので、Node.js のインストール方法の説明を省かせていただきます・・・
Yahoo!ニュースがリニューアルしてレスポンスが速くなったそうですが、高速化手法の中に「CSS Sprite」というものがありました。 いくつかある画像を1つの画像に連結し、CSSにて連結画像の中にある目的部位を切り出して表示しようという技術です。サーバに対するリクエストの数を減らす効果があります。 （今日の大嘘 - by edvakf in hatenaもそうですが、Yahoo!ニュースの一部のCSS Sprite画像も余白が多く、「速くする技術使ったよ」というのは説得力に欠けるのですが） 最近よく見るこのヘンテコな技術について調べ、転送の速さだけでなく、利便性を損なわないような形でこの技術を使えないものだろうかと考えました。 ではその成果を生かしてあれこれしようと思いましても当備忘録程度ではサーバにリクエストする画像の数など高が知れています。 そういうわけで、使わない技術は
texturetool 独特のオプションを中心に、以下でその機能を詳しくご説明します。 圧縮率の選択 PVRTC 形式では、圧縮率は 1/8 か 1/16 に固定されており、 PNG や JPEG のように画像によって圧縮率が変化することはありません。これは主にハードウェアによる展開とランダムアクセスの効率を優先した結果でしょう。 どちらの圧縮率を使用するかはオプションで指定でき、 --bits-per-pixel-4 なら 1/8 、 --bits-per-pixel-2 なら 1/16 になります。指定がない場合はデフォルトで 1/8 が採用されます。とうぜん 1/8 の方が画質は良いので、画質とサイズのどちらを優先するかで選択してください。 圧縮誤差の処理方式の選択 圧縮率と同様に、圧縮誤差の処理方式も 2 種類から選べます。 RGB の各チャンネルに誤差を均等に分散する --cha
今回紹介するのは、PNG画像を劣化させずに圧縮できる「PNGGauntlet」というソフトウェアです。このPNGGauntletというソフトは、画像に付加された情報やデータを最適化することで、見た目は変わらずに品質は損なわずにファイルサイズのみを圧縮して小さくすることが可能です。 また、このソフトはPNGファイルの圧縮以外にもJPG、GIF、TIFF、BMPといった画像ファイルをPNGに変換する機能もあるので、画像の圧縮目的以外にも変換するソフトウェアとしても活用できます。 PNGGauntletnoPNG画像圧縮の効果について PNGGauntletがPNG画像圧縮にどれくらい効果があるかというと、このソフトを使うことで画像のファイルサイズは大体70％～80%くらいに小さくできます。今まで見た中では最高は20％くらいまで削ってくれた画像もありました。もちろん画像によって差がありますが、か
Sublime Text 2 + Sass + Compass + Emmet 最強説！導入方法と自動アップロードの設定まとめ | Cappee Design
本日が決算日の@cappeeです。 Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説！ ついにたどり着いてしまったかもしれません。 今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。（そこまでまだ使いこなしてないので、正しくは「できそうです」。） せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。 導入のキッカケ 話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。 私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。 S
デザインされたセレクトボックスを実装する セレクトボックスはCSSでほとんどスタイルを当てることができないので、フォームをデザインするときに苦労する方が多いのではないでしょうか。今回は、HTMLとCSS、そしてjQueryを利用して疑似セレクトボックスを作成してみましょう。 作成方法はとても簡単なので、覚えておけば色々なシーンで流用できるでしょう。 まずは、完成サンプルを見て作成するセレクトボックスのイメージを掴んでください。 疑似セレクトボックス そもそもデフォルトのセレクトボックスの挙動は クリックするとプルダウンが表示 プルダウンの項目をクリックする セレクトボックスの中身が選択した項目に置き換わる というようになっているのでこれを実装していきます。 セレクトボックスはselect要素とそれに内包されるoption要素（プルダウン部分）で構成されるので、それらを代替要素で構成し、プル
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2
ハイパフォーマンスCSSの記述方法 : Weblog : SimpleIsm
JavaScriptを使わずにやるimg要素のロールオーバーサンプル
PNG画像でもコマ送りのアニメーションさせてしまう、ナイスアイデアのスタイルシート -Sprite sheet
ウェッブサイトの表示速度を測定するフリーツール集 | ゆっくりと…
複数の画像を一つにまとめてCSSで表示·SmartSprites MOONGIFT
HTTPリクエストを減らすために【DataURI編】遅延ロードでレンダリングブロックを回避 - MOL
WebアイコンフォントFont AwesomeのSCSS版を使ってみる | DevelopersIO
【第21回 HTML5とか勉強会】 ゲーム開発はHTML5+スマホベースが新潮流
[提供終了]画像をBase64に変換するツール (data URI scheme) – シングスブログ
Web フォントでアイコン表示。 Font Awesome 使ってみた
The Electric Sheep Company (Producing Second Life)
CSS内の画像埋込で高速化(Data URI) - Qiita
HTTP/2.0と今後のWebアプリケーションの開発・運用について (#cross2014) - ゆううきブログ
jQueryで行うFlashみたいなスプライトアニメーションのチュートリアル:phpspot開発日誌
RsStudio Style - CSSSprite Extensionの紹介とドキュメント
今更だけどdata URI Schemeって何？ – poyosi.com
WebBundle によるコンテンツの結合と WebPackaging | blog.jxck.io
[CSS]複数の画像を一枚で表示できるジェネレーター -CSS Sprite Generator
RedLine Magazine : Fireworks ちょいネタ集
Applerの備忘録（仮）: CSS Spriteの流派をまとめる
iPhone でテクスチャ圧縮 (PVRTC) を使う - WebOS Goodies
PNG画像を劣化させずに圧縮できるPNGGauntletがすごい便利！
第12回 jQueryでセレクトボックスをデザインする | gihyo.jp