カテゴリー:HTML & CSS

CSS3のMedia Queriesを使ったレスポンシブレイアウト

Media Queriesを使ったレスポンシブレイアウトの例

少し時間が空いてしまいましたが、今年に入ってkudox.jpのWordpressテーマをCSS3のMedia Queriesを使ったレスポンシブレイアウトでリニューアルしました。私自身、Media Queriesを使うのは初めてだったこともあり、いろいろと勉強しながら作業を進めました。そこで学んだことや私なりに考えたことをレポートしていきたいと思います。

スマホ対応するならCSSでword-wrap:break-wordを指定しよう

最近、スマホ対応の案件が当たり前のようになってきました。スマホ対応する際に指定しておくと誰かを幸せにできるかもしれないCSSプロパティにword-wrapがあります。PCのディスプレイのみをターゲットにしていた時代では、あまり馴染みのないプロパティですが、スマホではword-wrapを指定しないとどのようなケースにどう表示されてしまうのでしょうか?kudox.jpのケースを例にして確認してみましょう。

超簡単!HTML5のvideo要素を使って動画を配信しよう

以前は、HTMLで動画を配信するにはFlash等のプラグインを利用する必要がありました。しかし、HTML5ではvideo要素を使うことでプラグインなしで動画を配信することができ、スマートフォンやタブレットでも見ることができます。今回はHTML5 video要素の使い方をレポートしたいと思います。

動画をHTML5 video用のmp4, webmに変換できるフリーウェア XMedia Recodeの使い方

HTML5のvideoタグを使うとプラグインを使わずにムービーを再生することができますが、現時点では動画形式・コーデックが規格として統一されておらず、mp4形式とwebm形式でムービーファイルを用意する必要があります。今回は、Windows用のフリーウェアであるXMedia Recodeを使って、ムービーファイルをHTML5 video用のmp4, webmに変換する方法を紹介したいと思います。

requestAnimationFrameによるHTML5 canvasのアニメーション

これまでJavaScriptでのアニメーションには、setTimeout()やsetInterval()が使われてきましたが、これらのメソッドはアニメーション用に設計されたわけではないため、色々と問題がありました。現在、W3CのワーキングドラフトにrequestAnimationFrame()が挙がっており、一部のブラウザはベンダープレフィックス付きでサポートを始めています。requestAnimationFrame()を使うことで、処理の高速化や複数のアニメーションの同期といったメリットが期待できます。

HTML5 canvasのピクセル操作

HTML5 canvas APIには、canvas上のピクセルを取得するgetImageData()、canvas上のピクセルを書き換えるputImageData()、ピクセルデータを生成するcreateImageData()が用意されており、簡単にcanvas上のピクセルにアクセスすることができます。

HTML5 canvasでグラデーションを描画する

HTML5のcanvas APIには、線形グラデーションを作成するcreateLinearGradient()、円形グラデーションを作成するcreateRadialGradient()が用意されており、これらのメソッドを利用することで簡単に線や塗りにグラデーションを使用することができます。

1 / 212