このページの本文へ

リバースエンジニアリングしたくなるHTML5サイト (3/4)

2011年03月31日　11時00分更新

文●菊池 崇

  • この記事をはてなブックマークに追加
本文印刷

Google DoodleにもHTML5

　HTML5は元々、XHTML2.0に疑問をもったOperaの有志が小さな研究グループをつくったのが始まりだ。その研究グループを立ち上げたのがイアン・ヘクソンだ。つまり、イアン・ヘクソンはHTML5の産みの親でもある。その後、イアン・ヘクソンの作ったグループはMozilla、Appleの有志を加えてWHATWGとなった。WHATWGとW3Cの2つがいまでもHTML5の仕様をそれぞれ用意しているのはそのせいだ。現在、イアン・ヘクソンはGoogleにいて、HTML5を使った様々なツールやサービスの提供している。

　そのひとつであるGoogleの“Doodle（ドゥードゥル）”を紹介しよう。Doodleとは「いたずら書き」のことで、GoogleのDoodleとは祝日や記念日などに表示される、通常とは異なるデザインのGoogleロゴのことだ。

　Googleが2010年9月に発表した DoodleはHTML5とSVGで作成されている。マウスを載せると各色のバブルがはじけたように画面内を暴れて、しばらくすると元に戻る。

■HTML5を使ったGoogle Doodle


Google Doodle from satoshi on Vimeo.

動画URL：http://vimeo.com/21194263

Google Doodle：http://www.google.com/logos/particle.html

■Amazon.co.jpで購入

前へ 1 2 3 4 次へ

Web Professionalトップへ

この記事の編集者は以下の記事をオススメしています

PROGRAMMING 古籏一浩のJavaScriptラボ

WebPro

古籏一浩のJavaScriptラボ

活躍の舞台をどんどん広げているJavaScript。本連載では、JavaScript関連書の執筆でおなじみの古籏一浩氏が、最新の活用Tipsから今後注目のAjax/JavaScriptライブラリーの解説まで、“楽しくできて役立つネタ”をお届けします。

  • 0
  • 0
PROGRAMMING HTML5でFlash不要のYouTube作ってみた

WebPro

HTML5でFlash不要のYouTube作ってみた

HTML5ではブラウザー標準の機能だけで手軽にビデオを再生できる。YouTubeのようなビデオプレーヤーを実際にHTML5で作ってみよう。

  • 0
  • 0
TREND Flash→HTML5移植は本当か？　ハンゲームの事例

WebPro

Flash→HTML5移植は本当か？　ハンゲームの事例

HTML5でよく聞くのが「Flashが不要になる」というフレーズだ。「ハンゲーム」を手掛けるNHN JapanがHTML5化を進めていると聞き、勉強会に行ってみた。

  • 0
  • 0
DESIGN ここが変わった！HTML5マークアップ入門

WebPro

ここが変わった！HTML5マークアップ入門

「次のリニューアルはHTML5で」と考えるWeb制作者のための新連載がスタート。HTML5への移行にあたって必要なマークアップの基礎知識から実務上のポイントまでを解説する。

  • 0
  • 0
DESIGN XHTML1.0とHTML5の違いをスタバのページで紹介

WebPro

XHTML1.0とHTML5の違いをスタバのページで紹介

HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のWebサイトをHTML5化してみると理解しやすい。実在する企業サイトをHTML5にリニューアルしながらマークアップの具体例を解説する。

  • 0
  • 0
DESIGN 浜 俊太朗のHTML5マークアップ移行ガイド

WebPro

浜 俊太朗のHTML5マークアップ移行ガイド

国内でもHTML5で企業サイトを制作する事例が増え、「次のリニューアルはHTML5で」と考えるWeb制作者も少なくないでしょう。「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務上のポイントまでを解説します。

  • 0
  • 0
DESIGN HTML5のアウトラインとセクションを理解する

WebPro

HTML5のアウトラインとセクションを理解する

HTML5におけるマークアップの仕様をコーダー目線で詳しく解説。HTML5コーディングの“キモ”と言える「セクション」と「アウトライン」をしっかり理解しよう。

  • 0
  • 0
DESIGN HTML5セクション要素のまとめ

WebPro

HTML5セクション要素のまとめ

コーダー／マークアップエンジニアのためのHTML5入門。今回はHTML5で新たに登場した「セクション」を明示する要素について、まとめて解説する。

  • 0
  • 0
DESIGN 3分でわかるHTML5のコンテンツモデルとカテゴリー

WebPro

3分でわかるHTML5のコンテンツモデルとカテゴリー

HTML5で登場した「カテゴリー」「コンテンツモデル」という概念。カテゴリーとコンテンツモデルを理解すると、「要素の中にどの要素を入れられるのか」を容易に判断できます。

  • 0
  • 0
DESIGN もうこれで迷わないHTML5新要素の使い方

WebPro

もうこれで迷わないHTML5新要素の使い方

コーダー／マークアップエンジニアのためのHTML5入門。使用頻度の高いtime要素、figure要素、figcaption要素、mark要素と、ルビ関連の要素の使い方を解説する。

  • 0
  • 0
DESIGN HTML5でこんなに変わったinput要素を徹底解説

WebPro

HTML5でこんなに変わったinput要素を徹底解説

コーダー／マークアップエンジニアのためのHTML5入門。今回はHTML5で追加されたフォーム関連の要素と属性をまとめて解説する。まずは大幅に機能強化されたinput要素について学ぼう。

  • 0
  • 0
DESIGN input要素だけじゃない HTML5のフォーム新機能

WebPro

input要素だけじゃない HTML5のフォーム新機能

コーダー／マークアップエンジニアのためのHTML5入門。HTML5のフォーム機能ではinput要素に加えて新しいフォーム要素も追加されている。それぞれの使い方をサンプルで解説する。

  • 0
  • 0
DESIGN サンプルで学ぶHTML5の仕様変更要素・前編

WebPro

サンプルで学ぶHTML5の仕様変更要素・前編

HTML5では、新たに加わった要素だけでなく、HTML4.01やXHTML1.0から意味や使い方などの仕様が変わった要素もある。サンプルで確認しよう。

  • 0
  • 0
DESIGN サンプルで学ぶHTML5の仕様変更要素・中編

WebPro

サンプルで学ぶHTML5の仕様変更要素・中編

HTML5ではHTML4.01やXHTML1.0から意味や使い方が変わった要素もある。今回はimg要素の使い方についてサンプルを交えて詳しく解説する。

  • 0
  • 0
DESIGN サンプルで学ぶHTML5の仕様変更要素・後編

WebPro

サンプルで学ぶHTML5の仕様変更要素・後編

HTML4.01やXHTML1.0から意味や使い方が変わった要素のまとめ。a要素、iframe要素、menu要素の使い方についてサンプルコードとともに詳しく解説する。

  • 0
  • 0
すぐに役立つ！プロの解説記事
一覧へ
ASCII.jp Web Professional