CSS

アイコンフォントの活用

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

CSS

Sassで出力したCSSの整形

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

CSS

Sass3.3の新機能とBEM

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

JavaScript

CreateJSとCanvas APIの比較

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

CSS

GruntでSassのsourceMapを出力

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

HTML

Web Storage使用上の注意点

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

HTML

HTML5 Canvasでオリンピックマークの花火

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

CSS

CSS3アニメーションをJSで制御

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

HTML

HTML5 Canvasで表現する打ち上げ花火

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

CSS

CSS3 transformで作る回転レイアウト

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

HTML

HTML5 Canvasでパズルゲーム実装

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