この記事を読むのに必要な時間は約 8 分です。
はい、どーも
はるねこ（@hal_neko）です。
今日は久々に技術系の記事です。
というか自分用メモです。
HTML5はHTML4と比べて何が変わったか
結構前の話になってしまいますが
艦これで ＨＴＭＬ５ 対応が行われた事で
ついに！😆
ｉＯＳ 端末でも！😆
プレイ可能に！😆
当時「ついに外出先でもプレイできる！」と喜んだものです😌
今回は、HTML4 と HTML5 でどういった所が変わったか
お話できればと思います。
気になったきっかけ
艦これ以前に、注目していた話題としましては
バンナム、HTML5活用の新作ゲーム「アイドルマスター シャイニーカラーズ」発表
↑上記の記事の通り
アイマスの新作がブラウザゲーで出る！？
という所で「HTML5」を意識するようになりました。
そもそもＨＴＭＬって？
今更ですが、HTML は
Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略。
Webページを作成するためのMarkup（マークアップ）言語となります。
HP制作を行う上で欠かせないHTML。 しかし、「HTMLって実際どんなことができるの？」「そもそもHTMLってなんぞや…
こちらのサイトが詳しいです。
HTML5！
HTML5 は、HTMLのバージョン5の事です。
- 初期のHTML1が開発されたのが1993年
- 1999年12月に HTML4 が 開発されました。
- そして、2014年10月HTML5が発表されました。
現在では、ほとんどのブラウザで対応しています。
HTML５の基本的な機能はIE9以降から対応しているようです。
（IE8以下へも「JavaScript」を用いれば対応は可能）
HTML4 との違い
HTMLがスッキリ書けるようになった
HTML4
HTML5
文書構造がシンプルになった
今までのHTML4でWEBページを構築すると
タグで文章が埋め尽くされてしまいました。
HTML5では、文書構造を表す新しい要素が加わる事で
シンプルに見やすくなっただけでなく
ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようにもなりました。
例えば
ヘッダを示す＜header＞フッタを示す＜footer＞
一つのセクションであることを示す＜section＞
記事であることを示す＜article＞
ナビゲーションであることを示す＜nav＞などの要素が追加されており
それぞれの役割に応じて適切な要素に割り当てることができるようになりました。
動画や音声の埋め込みが簡単になった
HTML4まで
- サイト内で動画を再生させるためには
「Flash」という技術を使って作成する必要があった。 - しかし、Flashを作成するにはHTMLと別の知識が必要になり
初心者の人にはハードルが高かった。
HTML5から
- <video>や<audio>といったのタグを使う事で
動画や音声の再生ができるようになった。 - パソコンでもスマホでも同じタグを使うことが出来るので
機種を気にする必要がなくなった。
ウェブアプリケーションを作りやすくなった
HTNL5では、HTML4までは実現が難しかった
ウェブアプリケーションが作りやすくなりました。
- ユーザーの位置情報を取得したり
- ドラッグ&ドロップ機能を追加したり
ということが簡単に可能。
HTML5になってから高度な機能を実現する為の
様々なAPIが追加されたためです。
CSS3を同時に使用すれば、表現の幅が広がる。
HTML5とセットで使われることの多い「CSS3」という技術を使えば
Javascriptを使わずにアニメーションやフラットボタンの作成が可能です。
これまでJavascriptでなければ作れなかった表現を
CSSとHTMLで作れるようになれば、デザイナーで対応できる範囲が広がります。
すごいぞ！ canvas ！
また、HTML5には、Webアプリの制作に役立つ
「canvas」という要素があります。
クライアント側の処理だけで動的に描画！
特別なプラグイン不要！
Flash を使用しない！ Flash のスキルも不要！
ゲームは勿論、ビジネス用途での応用も期待！
というわけで canvas を利用すると、こんな事ができるよ！
というサンプルになりそうなものを探してきたの以下に
記載したいと思います。
↑参考サイト様
お絵かきソフト
線の太さ10
透 明 度100
感想
知っているようで知らなかった HTML5 について調べてみました。
HTML4 と比べると、大幅に快適になった印象ですね。
シンプルに、かつ色々な事が簡単にできるようになったようです。
特にWEBアプリケーションを作成できるようになった事で
艦これなんかも恩恵を受けているんでしょうね😃
自分も簡単なものでよいので HTML5 で何か作ってみたいなぁって思いました。
では、今回はこの辺で👋
HTML5サンプル集 HTML5リファレンス
