10/10(Thu)
コンピュータをよく使う人なら一度は耳にしたことがある「HTML」。HTMLとは、Hyper Text Markup Languageの頭文字を取ったもので、直訳すると「ハイパーテキストのための、（文章に）目印を付ける文法（言語）」という意味です。つまり、私たちが普段読み書きする文章の、見出し・段落・箇条書きなどの要素をコンピュータに捉えさせるための文法ですね。初期のHTML1.0が開発されたのが1993年、それからバージョンアップを重ね、1999年12月にバージョンアップされたHTML4.01が昨今までホームページを作る言語としてWebを支えてきました。
そして、2014年10月28日にHTML5が勧告されました。特に「HTML5」は今多くの注目を集めています。今回はHTML5を使って出来ること、従来のHTML4との違いをまとめました。
■目次
1. どんなデバイスでも再生出来る動画や音声データを埋め込める
2. ウェブアプリケーションが構築しやすい
3. より明確に文書構造を示すことが出来る
4. CSS3を駆使すれば、描画表現の幅が広がる
5. HTML5を使って作られたサイト3選
これまでのHTMLでは、動画を使うには「Flash」を使っていました。しかしHTML5では、動画や音声データをHTMLから扱えるようになります。 新しく追加される＜video＞や＜audio＞を使用し、（＜img＞で画像を扱うように）動画や音声をシンプルに扱えるようになります。
HTML5では、高度な機能を実現するための様々なAPIが新たに追加されています。APIとは、Application Programming Interfaceの頭文字を取ったもので、 アプリケーションをプログラミングする際の決まりごとです。 つまり、何らかの機能を実現する際に指定する命令や関数の記述ルールを定めたものです。新しく加わった主な機能として以下のものが挙げられます。
・ドラッグ＆ドロップ機能
・ユーザー位置情報
・オフライン使用
・ファイル操作
・履歴操作
それぞれのAPIで定められた命令や関数を指定すれば、 簡潔な記述でこれらの機能を実現することが出来ます。HTML5ではこれらのAPIを利用することで、 単にHTML文書を作成するだけではなく、 より高度な機能を持ったウェブアプリケーションをウェブ標準として構築することが可能になります。
今まではHTMLでWebページを構築すると、“”タグで文章が埋め尽くされてしまいました。 HTML5では、文書構造を表す新しい要素が加わることで、ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようになります。代表的なタグを以下に示します。
・article … 記事の部分
・aside … 関連リンクなど
・figcaption … figureした部分の脚注
・figure … 画像や映像などを範囲設定をする
・footer … 文書のフッター部分で、作者情報や著作権などを書くことが可能
・header … 文書のヘッダー部分
・hgroup … 見出しタグをグルーピングする場合に使用する
・mark … 文字列な中のハイライト。例えば、検索結果の中に「検索ワード」をハイライトしたい場合に使用する
・nav … ナビゲーション
・section … 文書のそれぞれの要素を囲む
・time … 文字列が時間や日付の場合に使用する
これらを利用することで、それぞれの役割に応じて適切な要素に割り当てることが出来るようになります。
z
（HTMLクイックリファレンスより引用）
HTML５とセットで紹介されるCSSの新しい技術「CSS3」を使えば、下記のような処理をJavascriptを使わず、簡単に実現することが出来ます。
・透過処理
・角丸
・ドロップシャドウ
・線形グラデーション
・円形グラデーション
・回転
・縮小
・傾斜
・アニメーション
これまでプログラマでなければ扱うことが難しかったJavascript。CSS3を使えばアニメーションも使うことが出来ます。
HTML5ではJavascriptやFlashを使うことなく、下記のようなWebサイトが作ることが出来ます。従来のサイトにはない動きをするところに注目です。
HTML5への変化による効果に興味のあるあなたにHTMLを学ぶための授業3選をご紹介します！ これらの授業を通じて、HTML5とプラットフォームとの関わりや、具体的なHTMLの基礎知識などについて理解することができます。 ぜひこれらの授業を受講し、HTML5に関する知識を身につけましょう！
本授業では、単なる Web ブラウザ向けの技術にとどまらず、様々なプラットフォームで利用可能な Web 技術の一つであるHTML5 を学びます。
HTML5を中心とした Web 技術で、コンテンツを様々なプラットフォームへ移行する方法や手順を学んでいきます。
本授業ではRuby on Railsを使ったWebアプリケーション開発を行うために、まず必要なHTML/CSSの基礎について学んでいきます。
プログミラングを学ぶ上での基礎となるHTML/CSSをしっかりと学び、使用できる言語の幅を広げていきましょう。
本授業は、コーディング初心者が中級者にレベルアップするための実践型授業です。コーディングテクニックを単に知識として学ぶだけではなく、実践的に身につけることを目指します。
本授業は、Schooでもおなじみ「HTML5＆CSS3デザインレシピ集」の著者である狩野 祐東先生が、初心者のためのテクニックをLIVEで実演します。 実演を見ることでしか分からないコツや、初心者がつまづきやすいポイントを学んでいきましょう。
いかがでしたでしょうか？
2014年にバージョンが更新されたHTML5では従来の文書を簡潔に記述できるようになっただけでなく、より高レベルでのWebアプリケーションツールとしての機能を確立し始めています。
そしてこれらの授業を受講することで、そのHTML5に関する基本的な知識を身につけることが出来るでしょう。
さらに、これらの授業を通じて、自身がこれからHTML5をどのように実践していこうかを考えることも出来たのではないでしょうか？
スクーではこれら3つの授業以外にHTMLに関する授業を多数開講しています。 ぜひスクーでさまざまな授業を受講し、HTMLに関する知見を深めていきましょう！
