HTML5のcanvas APIには、drawImage()が用意されており、簡単にcanvasに画像を表示することができます。drawImage()には、HTMLImageElementだけでなく、HTMLCanvasElementやHTMLVideoElementを渡すこともできるため、うまく利用することで面白い表現ができそうです。また、CanvasPatternを作成することにより、CSSの背景画像のように画像を繰り返しパターンとして表示することもできます。

続きを読む

HTML5のcanvas APIには、直線や曲線、円弧を描画するためのメソッドが予め用意されています。これらのメソッドを利用することで、これまではプラグインなしでは実現が難しかった自由な形状のパスをHTMLだけで描画することができます。

続きを読む

HTML5のcanvasには、図形を線や塗りで描画するためのメソッドが予め用意されています。これらのメソッドを利用することで、これまではFlashのようなプラグインに頼らなければ実現が難しかった図形によるグラフの描画などもHTMLだけで実現することができます。

続きを読む

HTML5で新たに追加されたcanvas要素を使うと、プラグインに頼ることなくアニメーションなどを描画することができます。旧バージョンのブラウザでは対応していないものもあるため、まだまだ使う場面は限られると思いますが、将来的には強力な表現方法の一つになることは間違いないでしょう。

続きを読む

CSSでフォントサイズの指定をしない場合、各Webブラウザでの文字サイズは結構バラバラになってしまいます。単純にフォントサイズを統一するだけなら、pxやptで指定すればいいのですが、そうしてしまうとInternetExplorerでユーザーが文字サイズを変更できなくなってしまいます。今回は、InternetExplorerでユーザーが文字サイズを変更でき、且つクロスブラウザでフォントサイズを統一するCSSについてレポートしたいと思います。

続きを読む

現在、InternetExplorer, Firefox, GoogleChrome, Safari, Operaといった様々なWebブラウザが使われていますが、各ブラウザは、それぞれデフォルトのスタイルシートを持っています。ブラウザ毎のデフォルトのスタイルシートには微妙な違いがあり、CSSでレイアウトしていく際に面倒な思いをされた方も多いのではないでしょうか？

そこで、予めブラウザのスタイルシートを初期化し、各ブラウザでの表示の誤差をなくすことで、CSSでのレイアウトがかなり楽になります。今回は、現在私が使用している初期化用のCSSをご紹介したいと思います。

続きを読む