HTML5 SHOWCASE

HTML5のサンプル

イントロ

  1. HTML5について

SEMANTICS

  1. ページの構造
  2. 要素
  3. UTF-8
  4. base64で画像を表示

CSS3

  1. 擬似クラス
  2. 結合子
  3. 優先順位
  4. 属性セレクタ
  5. カラーコード
  6. HSLA
  7. RGBA
  8. リッチなCSS
  9. レスポンシブWebデザイン
  10. サンタ
  11. まるこ
  12. ページスクロール
  13. 3Dキューブ
  14. 3Dドミノ

JavaScript

DOM

  1. やまびこ
  2. 大阪弁変換
  3. CSS変化
  4. ページ遷移
  5. 3Dコントロール

Calculate

  1. 計算
  2. BMI
  3. 占い
  4. じゃんけん
  5. カウントダウン
  6. 500px競争

OFFLINE & STORAGE

  1. Local Storage

DEVICE ACCESS

  1. カメラ
  2. 重力加速度
  3. UFO
  4. 位置情報
  5. 音声認識読み上げ
  6. AI連携
  7. シンセサイザ

CONNECTIVITY

MULTIMEDIA

  1. オーディオ
  2. ビデオ

3D, GRAPHICS & EFFECTS

  1. ハート
  2. スクロール
  3. お絵かき
  4. フラクタル
  5. 放物線
  6. 放物ゲーム
  7. 円周率
  8. 湘南
  9. 習字
  10. テキストエディタ
  11. 電気使用量
  12. スマホタッチゲーム
  13. ホワイトボード
  14. 座標
  15. CO
  16. ドーナツ
  17. トーラス

PERFORMANCE & INTEGRATION

  1. requestAnimationFrame

HTML5で作られた外部サイト

動画の背景

  1. SONIA

シングルページ・パララックス・高級ペライチ

  1. Tokyo Music Odyssey
  2. buzzhook
  3. peugeot hybrid4

3次元

  1. find your way to oz
  2. BEERCAMP
  3. helloracer
  4. WebGL Water

Google doodles

  1. google Doodles
  2. UFO

WoT

  1. Web of Things
  2. ロボットアーム

Canvas

  1. グラディウス
  2. スライダーパズル
  3. ミミズ君
  4. レーシング
  5. 3Dレーシング
  6. もぐらたたき
  7. Capman

W3C関連

W3C

  1. 世界で最初のWeb
  2. 最新のHTML仕様
  3. HTML5の差異
  4. W3C用語集

WHATWG

  1. WHATWG
  2. 日本語

MDN

  1. Web Docs

その他の参考リンク

参考リンク

  1. HTML5の検定
  2. HTML5エキスパート
  3. ハイブリッドアプリ
  4. jsdoit