カテゴリー:HTML & CSS

HTML5 canvasに画像を表示する

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

HTML5のcanvasに直線や曲線でパスを描画する

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

HTML5のcanvasに線や塗りで図形を描画する

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

HTML5 canvas要素の基本的な使い方

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

クロスブラウザでフォントサイズを統一するCSS

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

ブラウザのスタイルシートを初期化するCSS

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

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

12