Responsive bar charts in HTML and CSSBuilding flexible data visualizations for international sites Speed vs. Duration - A use case for mixed unit divisionLearn how to solve the CSS animation challenge of varying speeds across different screen sizes. This post introduces a technique using atan2() and tan() for unitless viewport width calculations and provides practical examples.

If you need a new website or want to give your current site a modern update, this collection of 50 free responsive web and HTML templates is an excellent place to start. These templates are easy to use and fully customizable, making it simple to create a professional-looking website without breaking the bank. With a responsive design, your website will look great on any device, from desktop comput

ほとんどのスマートフォンのウェブブラウザはcanvasタグに対応していますが、バグだらけです。以下、色々な環境で試したバグのまとめです。 iPhone OS 3.1 このバグは iOS 4 では、直っています。 iPhone OS 3.1 では、fillText() などの文字列描画系がバグっています。画面が上下反転して、フォントなども反映しません。お持ちの方は 実際のサンプル - fillText() メソッド - Canvasリファレンス - HTML5.JP でお試しください。おかしな位置に文字が表示されます。このバグは、iPod touch、iPhone 全てで発生します。 まもなく、iPhone OS 3.2 が出ますが、直っていることを強く祈ります！ Android 2.1 このバグはAndroid 2.2では、直っています。 Android 2.0, 2.1が、一番ひどいです

Microsoftが米国時間3月16日に公開した「Internet Explorer 9（IE9） Platform Preview」は、多くの標準を使っても大丈夫だという強いメッセージをウェブプログラマーたちに発信した。しかしその中の1つ、ウェブビデオの標準に関しては、Microsoftは論争の行き詰まりをさらに深い袋小路に押し込んでしまったかもしれない。 問題となっている標準は、Adobe Systemsの「Flash」やMicrosoftの「Silverlight」といったプラグインを必要としないウェブビデオに関するものだ。これはHTML 5標準の大きな要素の1つである。同標準は、ウェブページとウェブアプリケーションの能力の拡張を目的として現在策定されている。 Microsoftがデモを行ったIE9の荒削りなバージョンには、H.264という特定の技術を使用してエンコードされたHTML

MIX10で、GPUによるハードウェアアクセラレーションをサポートして、レンダリング速度が大幅に高速化されたInternet Explorer 9（以下、IE9）のプレビューを紹介した（詳細はInternet Explorer 9はGPUで武装するを参照のこと）。だが、その中で登場した「HTML5」「SVG」「Acid3」といったキーワードについて、あまり聞き覚えがないというユーザーもいるだろう。これらキーワードは「標準化」というテーマと密接な関係がある。 かつて、Internet Explorerは「Netscape Navigator」とWebブラウザの覇権を争い、激しさは「ブラウザ戦争」と呼ばれていたほどだ。その当時から現在にいたるまで、独自路線を歩むIEと業界標準を重視する競合他社との綱引きが続いているのだ。標準化を巡る争いはMicrosoftだけでなく、“標準化重視”で一致団結し

スライダーで視点を変えられる360度動画。画像クリックでサンプルページを表示します（Safari 4、Opera 10.50でのみ表示可能） 動画を手軽に扱えるHTML5 Webブラウザーで動画を再生するには、従来、Flash Playerなどのプラグインが必要でした。これに対して、現在策定が進められているHTML5では、「video」という新しい要素が追加され、ブラウザーだけで動画を再生できます。 単なる再生だけであればメリットは薄いと感じるかもしれませんが、HTML5のvideo機能はJavaScriptによって動画を制御できます。Flashの場合、JavaScriptからFlashへ命令を送れないブラウザーもありますし、iPhoneやiPadなど、Flash Playerが存在しない環境もあります。将来的に、iPhoneやiPadなどに搭載されているSafariのWebKitがHTM

米Microsoftは3月15日、次期版Webブラウザ「Internet Explorer（IE）9」を自社のMIXカンファレンスで披露した。開発者向けプレビュー版もリリースした。 プレビュー版はMicrosoftのサイトからダウンロードできる。開発者にIE9の進捗を知ってもらうため、β版リリースまで8週間ごとにアップデートする（ただしMicrosoftは、プレビュー版はレンダリングやスクリプトエンジンなどプラットフォームのコア部分に軽量フレームを載せたもので、あくまでもテスト用であって日常的に使っているブラウザの代わりになるものではないと注意を促している）。IE9のデモを体験できるIE9 Test Driveサイトも設けた。 IE9の大きな特徴の1つは、Microsoft社内で「Chakra」と呼ばれる新しいJavaScriptエンジンだ。マルチコアを活用する設計になっており、JavaS

Microdataは、HTMLにメタデータを埋め込むための記述方法です。HTML5の仕様の一部として策定が開始され、現在はW3CのHTML5仕様からは独立した仕様となっています。 そのMicrodataをグーグルが読み取って「リッチスニペット」に利用すると、ブログ「Google Webmaster Central Blog」のエントリ「Microdata support for Rich Snippets」で明らかにしました。 リッチスニペットのデータとしてMicrodataを読み込み リッチスニペットとは、検索結果に表示される情報です（ただしすべての結果に表示されるわけではありません）。 上記の例（グーグルのリッチスニペットのページから）では、ネット上のレビュー記事をグーグルが自動的に集計して、星の数を表示しています。 このリッチスニペットを構成するために、グーグルはネット上のさまざまな

マイクロソフトがラスベガスで開催中のイベント「MIX10」。2日目のキーノートスピーチでは、Internet Explorer 9について語られました。 IE9のポイントはHTML5、CSS3、SVGなどの標準への準拠と、マルチコアCPUやGPUなどハードウェアを活用した高速な動作。壇上でIE9を紹介したDean Hachamovitch氏はこれを「HTML5, Hardware Accelerated」という言葉で表現。そして、IE9 Platform Previewのダウンロードが開始されたことも発表されました。 ここではMIX10、2日目のキーノートスピーチの内容を、IE9にフォーカスして紹介します。 HTML5, Hardware Accelerated HTML5アプリケーションはグラフィックが豊富に使われるアプリケーションであり、より高速な動作が必要となる。われわれのHTML5