HTML5 SHOWCASE

HTML5のサンプル

イントロ

  1. HTML5について

    HTML,CSS,JavaScriptを簡単に解説しています

SEMANTICS

  1. ページの構造

    一般的に「ホームページ」と言われるWebページを制作する際の要素です

  2. 新しい要素

    HTML5の様々な要素を紹介しています

  3. UTF-8

    HTML5で推奨している文字コード「UTF-8」です。あらゆる国の文字と「絵文字」を使用することが可能です。なお、HTML5にはWebフォントというものもあります

  4. base64で画像を表示

    画像を（ファイルではなく）base64形式の文字列に変換したものを表示できます。ページのソースに埋め込むことが可能ですが、若干重くなることもあります

CSS3

  1. 擬似クラス

    CSS側から要素を指定してスタイルを適用できます

  2. 結合子

    結合子を使って子孫、兄弟の要素を指定してスタイルを適用できます

  3. 優先順位

    「カスケーディング」とは、ある要素のあるプロパティに対する宣言が複数あるとき、宣言の優先順位を定め、うち1つの宣言だけ有効にするしくみです

  4. 属性セレクタ

    属性の値によってCSSを適用させることができます。このサンプルはclass属性を使用しています

  5. 16進数のカラーコード

    redやgreenといったキーワードではなく、16進数の数字を使って色を指定することができます

  6. HSLA

    色相・彩度・明度・透明度で色を指定することができます

  7. RGBA

    赤、緑、青、透明度で色を指定することができます

  8. 画像加工

    filterプロパティは画像を加工することができます

  9. リッチなCSS

    影・角丸・変形をCSSで体験することができます

  10. レスポンシブWebデザイン

    スマホやタブレットでも閲覧できるようにするデザインです

  11. スピナー

    ぐるぐる回転します

  12. サンタ

    CSSでアニメーションができます

  13. ポケモン

    画像を使用せずにキャラクタを描けます

  14. 女の子

    画像を使用せずにキャラクタを描けます

  15. メトロノーム

    CSSアニメーションでメトロノームを作りました

  16. カルーセル

    複数の画像を左から右にアニメーションさせます

  17. 錯覚

    実は同じスピードですが・・・

  18. もみじ

    CSSで紅葉

  19. サッカー

    サッカーボールをクリックしてください。動きます。

  20. 鯉のぼり

    鯉のぼりをCSSで作りました。上下やじるし、F，Bキーを押して操作できます。

  21. カルーセル

    複数の画像を左から右にアニメーションさせます

  22. ページスクロール

    JavaScriptでスクロールの値を取得し、CSSをコントロールしています

  23. 3Dキューブ

    CSSでは三次元を表示できます。このサンプルは３次元でのアニメーションを表示しました

  24. 3Dドミノ

    このサンプルも三次元。ビュンビュン飛んでます

  25. 影で写真を表示

    CSSでは要素に影を作れますが、その影はいくらでも追加できます。それを利用して、1px分の影を数限りなく用意し描画してみました。

JavaScript

DOM

  1. やまびこ

    入力した値をそのまま返します。HTMLのタグが有効です。

  2. 大阪弁変換

    文字列を置換することができます

  3. CSS変化

    JavaScriptでCSSをコントロールできます

  4. ページ遷移

    JavaScriptはコンテンツをページごとに書き換えることができます

  5. 3Dコントロール

    3次元のCSSアニメーションをキーでコントロールできます

Calculate

  1. 計算

    JavaScriptはプログラミング言語ですから計算できます

  2. BMI

    if文(もし〜のとき、〜する)を扱えます

  3. 占い

    乱数で診断アプリを作れます

  4. じゃんけん

    当然じゃんけんゲームも可能です

  5. タイマー

    タイマーもできます

  6. 時計

    時計もできます

  7. カウントダウン

    カウントダウンもできます

  8. 500px競争

    いろいろ組み合わせることで、簡単なゲームができます

OFFLINE & STORAGE

  1. Local Storage

    Key-value方式でデータを貯蔵する「Webストレージ」があります。LocalStorageはブラウザの中に、オリジンごとにデータをずっと保管できます。

DEVICE ACCESS

  1. 重力加速度

    スマホの重力加速度を利用した液体のシミュレーションです（要スマホ）

  2. UFO

    スマホの重力加速度を利用したUFOゲームです。（要スマホ）

  3. 位置情報

    PCやスマホのGPSを使って位置情報を取得し、そのデータをGoogle Mapへ送ることで地図を表示します。スマホの方がより多くのデータを取得します

  4. テキストの読み上げと音声認識

    テキストを読み上げたり、言葉を認識してくれます（要マイク）

  5. AI連携

    音声でAIと会話できます。ただし、AIが覚えてしまうので、自己責任において、個人情報は一切しゃべらないでください。

  6. シンセサイザ

    簡単なメロディは楽器がなくても、ファイルにしなくてもだせるようになりました

CONNECTIVITY

MULTIMEDIA

  1. オーディオ

    オーディオファイルの再生、スピード、ボリュームをコントロールできます。

  2. ビデオ

    映像ファイルの再生、スピード、ボリュームをコントロールできます。

  3. カメラ

    PCの映像を取得します。

3D, GRAPHICS & EFFECTS

  1. ハート

    Canvasは描画が可能です。それをJavaScriptでコントロールできます

  2. 横スクロールゲーム

    Canvasで横スクロールゲームを作ってみました。

  3. お絵かき

    Canvasでお絵かきアプリができます

  4. フラクタル

    Canvasで数学のシミュレーションができます

  5. 放物線

    Canvasで物理のシミュレーションができます

  6. 放物ゲーム

    放物線でゲームを作りました

  7. 円周率

    数学の円周率をモンテカルロ法で解きます

  8. 湘南

    Canvasで湘南の風景を描きました

  9. 習字

    線の太さをコントロールして習字ができます

  10. テキストエディタ

    ソースコードの演習用のテキストエディタを作りました

  11. 降水確率

    他のサイトのデータをJSON形式で読み込めます。ここでは東京電力のデータをCanvasでグラフにしています

  12. スマホタッチゲーム

    マリオ風の簡単なゲームです（要スマホ）

  13. ホワイトボード

    文字と線が書けるホワイトボードです

  14. 座標

    マウスポインタの座標を取得します

  15. CO

    WebGLを使えば三次元を表示できます

  16. ドーナツ

    WebGLでドーナッツのシミュレーションができます

  17. トーラス

    WebGLでトーラスができます。リロードするごとに巻き数を変えています

  18. 物理演算

    Matter.jsを使って物理の法則に従った動きです

PERFORMANCE & INTEGRATION

  1. requestAnimationFrame JavaScriptでは、高速で動作する仕組みが備わっています。

Machine Learning

  1. 値を予測

    TensorFlow.jsを用いれば、複数の(x,y)があればそれを学習し、「任意のxに対応するy」を求めることができます

  2. ポーズを予測

    TensorFlowで骨格の位置を定めることができます。それをCanvasで棒人間として表示しています

HTML5で作られた外部サイト

動画の背景

  1. SONIA

    動画がメインのきれいなサイトです

シングルページ・パララックス・ロングスクロールページ

  1. Tokyo Music Odyssey

    コンテンツと背景がバラバラに動作し、縦にとても長いページです。

３次元

  1. BEERCAMP

    スクロールすれば三次元的にコンテンツが変化します

  2. WebGL Water

    プールにボールが浮かんでいるシミュレーションです

Google doodles

  1. UFO

    Googleの検索ページのロゴでHTML5を使ったものがよくでてきます

WoT

  1. Web of Things

    IoTのWeb版であるWoT(Web of Things)でセンサの値を取得したり、モータを動かすことができます

  2. ロボットアーム

    JavaScriptでプログラムを組み、サーボモータでロボットを動かすシミュレーションです

Canvas

  1. グラディウス

    昔懐かしのインベーダシューティングです

  2. ミミズ君

    にょろにょろといたミミズ君のゲームです

  3. ３Dレーシング

    Flashでもあったような三次元レーシングゲームです

  4. もぐらたたき

    名前のとおりです

  5. Capman

    パックマンのようなゲームです

W3C関連

W3C

  1. World Wide Web

    世界で最初のWebページ(CERN研究所・ティム・バーナーズ=リー博士が中心になって開発)の復刻版です

  2. HTML 5.2

    HTML5の最新仕様です

  3. HTML4との違い

    HTML4とHTML5との違いを説明しています

  4. W3C用語集

    W3Cによる用語の説明です。ただし統制は取れていないので、あくまでも参考に

WHATWG

  1. WHATWG

    現在のHTML5の仕様を検討しているWHATWGのサイトです。日本語はこちら

MDN

  1. MDN Web Docs

    Webに関する技術ドキュメントです。Mozzillaにより開始され、現在ではMicrosoft、Googleなども協力しています。

その他

参考

  1. GitHub Pagesの作り方

    Webページの公開方法です。

  2. Visual Studio Code

    テキストエディタVSCodeの使い方です。

  3. Web技術振興協会

    HTML5の検定団体です。標準教科書はこちらです

  4. HTML5エキスパート
  5. Monaca

    スマホのアプリをHTML5の技術で作る「ハイブリッドアプリケーション」サイトのひとつです