フラットなデザインが流行している影響もあり、Web制作において随所でアイコンを利用する機会が増えています。そのようなサイトでは同一のアイコンを、サイズやカラー違いで配置する事も少なくなく、アイコンを画...

制作時はSassでCSSを設計するが、公開（納品）後の運用環境ではSassが導入されていないケースがあるかと思います。そのような時はSassをexpandedのスタイルで出力する事で、ある程度可読性の...

現在RCでリリースの近いSass3.3ですが、新機能でBEMを取り入れた命名がしやすくなるようなので、正式リリースに備えて紹介&メモします。BEMとは？Block、Element、Modifi...

前回、CreateJSに簡単に触れましたがCanvasでちょっとしたビジュアルを作成する機会があった為、早速CreateJSを導入しました。先に結論から書くと、ノンライブラリ（Canvas API）で...

対象デバイスをPCに限定してFlashを活用したキャンペーンサイトなど特定の状況を除いて、スマートフォン／タブレット対応が求められる場合（大半がそうですが）、HTML5／JSでリッチなコンテンツを作成...

altJS（TypeScript、CoffeeScript、Haxeなど）の導入を以前から検討していましたが、CoffeeScriptのような最適化してコンパイルされたコードがリーダブルではないと感じ...

Sass 3.3でソースマップの出力に対応した事は知っていましたが、普段使っているGrunt（grunt-contrib-sassのVer.0.3.0）で上手く出力出来なかったので見送っていました。そ...

Web Storage（localStorageやsessionStorage）仕様が公開された当初はクッキーに替わる手段として、localStorageを使ったパフォーマンス向上テクニックが多数公開...

HTML5でVideo／Audioがノンプラグインで再生出来るようになりましたが、シンプルに一つのファイル（単独のVideo／Audio要素）を再生するだけであれば各ブラウザ向けにエンコードして（対応...

モバイルアプリの開発アプローチとして、以前ハイブリッドアプリを紹介しましたが、ハイブリッドアプリの開発環境をクラウドで提供するMonacaを利用して実際にアプリを開発したところ、好感触だったためMon...

CSSのtransformで特定要素を簡単にrotate（回転）したりscale（拡大／縮小）する事が出来るようになりましたが、ユーザーの操作に応じて動的に値を変化させるには座標を取得・計算する必要が...

JSの開発をしている時にスマホでconsoleAPIが使えたら開発が効率的になると感じたことはないでしょうか。iOS6以上はWindows環境でコンソールが使用出来なかったり、AndroidはPCと端...

jQuery2.0（2013年4月現在β版）では、レガシーブラウザ（IE8以下）のサポートが廃止されます。今後不要になるであろうレガシーブラウザ向けのコード（バッドノウハウ）をごっそり削除する事で軽量...

Android2.xでoverflow:scrollやautoが効かない（overflow:hiddenとして処理される）のは有名な話で、困った経験がある方も多いと思います。調べた限りJSで実装するか...

レスポンシブWebデザインで構築したサイトをスマホ（狭いスクリーンサイズ）で閲覧すると、列数の多いテーブルは何かしらの対策を行わないと非常に見辛いレイアウトになる事があります。対策として、CSSやJS...

レスポンシブWebデザインやスマホ専用サイトを構築する際に、（グローバル／ローカル）ナビゲーションをどこに配置するか？という事は、常々課題だと考えていました。よくあるパターンとしては、下記対応でしょう...

モバイル（スマホ、タブレット向け）アプリを開発する際に「ネイティブアプリで作るか？ブラウザアプリで作るか？」という議論は色々なとこでされているかと思います。通常はアプリの目的・内容に応じて、それぞれの...

レスポンシブWebデザインを導入したサイトにYoutube（iframe要素）を埋め込むと自動リサイズされず、スマホで閲覧した際に画面からはみ出ることがないでしょうか？（下記キャプチャ参照）本エントリ...

HTML5が注目され始めた当初はcanvas要素やvideo要素といったものが話題の中心でしたが、最近はWebSocketなどが話題になる機会が増えているのではないでしょうか？本エントリーでは、マルチ...

ECサイトなどで見かける画像の一部をルーペで見たように拡大する機能ですが、従来はJS+CSSで実装される事が多かったのでないでしょうか。上記機能をCanvasで実現できると考え、早速作成しました。デモ...

最近はテレビやニュースでもロンドンオリンピックの話題一色ですね。私はサッカーやテニスなど球技全般が特に好きで応援していますが、深夜に試合が行われる場合に翌日の体調を考えて寝るべきか、リアルタイムで観戦...

サイトへJSでタブインターフェースや文字サイズ変更機能を実装したとします。これらは他のページへ遷移する毎にリセットされるため、一時的にクッキーなど（※）に状態を保存するような対応をするかと思いますが、...

iOSでFlashがネイティブにサポートされない事から、JSあるいはCSS3でアニメーションを実装する機会が増えています。クライアントから明確に「このアニメーションはJSorCSS3で（iOSでも閲覧...

以前、HTML5 Canvasで表現する打ち上げ花火として、Canvasを使った作品をご紹介しましたが、PC版Webkitを除く全てのブラウザ（スマホブラウザは勿論、IE9など）で重いという課題があり...

リッチコンテンツという言葉が以前から存在するように、最近はテキストや画像だけでなく、動画や動画のストリーミング配信を用いたコンテンツが多いですね。只、一概に言えませんが、動画コンテンツはファイルサイズ...

Canvasで作られた花火は国内外問わず数多く存在しますが、Canvasの表現力を知るには自身で試行錯誤する事が何よりの収穫。というわけで、今回の作品はCanvasで表現する打ち上げ花火となります。デ...

Googleストリートビューが提供開始されたのは随分前の話になりますが、当時は普段行けない海外の風景が気軽に見られるようになり興奮した事を覚えています。その後、対応エリアが順次拡大され、日本国内がスト...

リサイズイベントで、所定の処理を再実行したり、レイアウト調整（Canvasのサイズ変更など）を行う。私自身も頻繁に実装しますし、従来から存在するリサイズイベントですが、意図せず短期間に繰り返し（過剰に...

CanvasとGoogle Maps APIを組み合わせ、桜前線を構築しました。Google Map単体で豊富な機能を備えていますが、そこにCanvasの表現力を加えることで実現の幅がさらに広まったの...

当社リクルートサイトの事例紹介です。クリエイティブWebデザイナーの採用を目的として構築しました。（募集は終了しました。ご応募ありがとうございました）株式会社インフォマーク　クリエイティブWebデザイ...

レスポンシブWebデザインはディスプレイサイズ（特に横幅）に合わせてデザインを最適化する事で、1URLで全てのデバイスに対応できることが強み。導入することで最も威力を発揮するデバイスはスマートフォンで...

今話題のHTML5 + JavaScriptベースのゲーム開発ライブラリ enchant.js にてもぐら叩きゲームを実装。enchant.jsを使うと、簡易的なゲームはJavaScriptコーディン...

PC、主要スマホ／タブレットにてプラグインフリーで動作可能なパズルゲーム。下記jsdo.itのサンプルコードは単純なゲームのみですが難易度変更オプション画像変更オプション（File APIで可能？）ゲ...