HTML5

技術情報

CSS Grid Layoutを触ってみる!

はじめにGrid Layout(グリッドレイアウト)とは、html/cssで二次元レイアウトを可能にする機能です。flexboxは直線的にしかレイアウトを配置できないので、 Grid Layout を使うことでレイアウトの幅が広がります。G...
技術情報

Webアクセシビリティの向上について

Webサイトの構造・機能・デザインは、日々、目に見えて向上しています。構造・機能・デザインが向上すれば、Webアクセシビリティも向上しますが、その恩恵は若者の健常者が受ける部分が多く、高齢者や子供、障害者の方々にはわかりづらいこともあります...
技術情報

KnockoutJSを使ってSVGを制御するサンプル

KnockoutJSを使ってSVGを制御するサンプルを作ってみました。 ドキュメントKnockout.js WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画スタッフブログこんな感じです。 svg+knockout.html長ら...
技術情報

enchant.jsの当たり判定不足を補う その3

引き続き、前回から持ち越した問題である「傾いた矩形の4点がもう一方の傾いた矩形の内側にあるか」を考えます。 enchant.jsの当たり判定不足を補う その2
技術情報

enchant.jsの当たり判定不足を補う その2

前回、enchant.jsの当たり判定がイケてない理由を説明しました。 enchant.jsの当たり判定不足を補う その1回転する矩形同士の衝突判定を自前で実装することを目標に、考察を進めていきます。
技術情報

enchant.jsの当たり判定不足を補う その1

使いやすい和製ゲームエンジンenchan.jsですが、当たり判定がイケてないようです。
技術情報

jQueryプラグインが意外と簡単に作れる話

画面周りのちょっとした処理をjavascriptで関数化することはよくありますが、規模が大きくなってくると本来のロジックが見えにくくなってしまってあまりよろしくないなあ、と思うことが多々あります。過去にjQueryプラグインのソース解析に挫...
技術情報

CSS3ボックスレイアウト調査

CSS3で登場したボックスレイアウトは便利なのですが、ブラウザごとに対応がまちまちだったりベンダープレフィックスがついたりと面倒なので、調査した記録を残します。FirefoxとGoogleChrome・SafariなどWebkit系について...
技術情報

enchant.jsで状態管理実装 – オートマトン

前回、イベントの仕組みで状態管理を実装した例を解説しました。 enchant.jsで状態管理実装 - イベント今回は管理する項目を減らすために、できるだけオブジェクトによろしくやってもらう仕組みについて解説します。
技術情報

enchant.jsで状態管理実装 – イベント

どんなに美しい3Dクラフィックスであっても、基本的にゲームはパラパラ漫画のようにヒトコマずつ処理されます。enchant.jsにも、「フレーム」という概念があります。フレームが始まるごとにイベントが発生するので、作り手はフレーム内の処理を書...