ブラウザ上で、（図1）のようにマウスを右クリックしてコンテキストメニューを表示し、「ページのソースを表示」を選択してみましょう。
（図2）のソースを見ると「<>」といった記号が目立ちますね。これは「タグ」という記号で、「付箋」「荷札」と言った意味です。

そのタグの文法が「HTML」です。HTMLは、「この部分が見出しです」「この部分が画像です」など、Webページの該当部分が何を意味するかを示し、ブラウザや検索エンジン、そのページの情報を活用するプログラムに理解させるための言語です。例えば、Webページで（図3）のようなコンテンツがあるとします。

（図3）のコンテンツをHTMLのコードで記述すると、（図4）のようになります。

「見出し」「段落」は英語でそれぞれ「Heading」「Paragraph」、頭文字を取って「<h> 」「<p> 」タグと記述します。「h」の次の数字は重要度を表しています。大見出しは「<h1> 」、中見出しは「<h2> 」、小見出しは「<h3> 」のようになり、「<h6> 」まであります。ここで、世界で初めてのWebページの復刻版⁽¹⁾をご紹介しましょう。このWebページはHTMLだけで作られています。

（1） The World Wide Web project

こちらのページをご覧になって、どのような印象を抱きましたか？HTMLだけで作られたWebページは、シンプルで、何か物足りないと感じた方もいらっしゃるのではないでしょうか。それは、デザイン的な要素がほとんどないためです。

そこで、「CSS」の登場です。Webページ上のテキストの色や大きさ、フォント、行間、背景の色や間隔などはCSSという文法で（図5）のように記述されます。こちらを見ただけではわかりにくいかもしれませんが、このコードを日本語で表すと（図6）のような意味になります。

「なんとなくわかったけどイメージが湧かない」と感じる方もいらっしゃると思いますので、実際にCSSのシミュレーションができるWebページ⁽²⁾を用意しました。Webページ上のコントロールパネルでテキストの色や大きさなどを調整することで、CSSのコードが自動生成されるようになっています。さらに、最新のCSSではアニメーション表現⁽³⁾もできるため、とてもにぎやかで訴求力のあるWebページを作ることが可能です。以下のサンプルページでCSSの役割を体感することができますので、ご興味のある方はぜひお試しください。

（2）CSSシミュレーション
（3）CSSアニメーション

Webページ上で計算ができる技術のことを皆さんはご存知でしょうか。例えば、Webページ上で閲覧者が入力した値に基づいて見積もりを計算し、閲覧者にマッチした商品やサービスを提案できるアプリケーションなどがあります。住宅ローンや生命保険の見積もり、本学HPの「学費シミュレーター」で利用されたことのある方もいらっしゃるのではないでしょうか。こういったWebの技術には「JavaScript」が使われています。JavaScriptはプログラミング言語の一つで、JavaScriptやHTML、CSSを総体的に「HTML5」と呼びます。HTML5はWebページのみでなく「Webアプリケーション」を作ることができる素晴らしい技術です。例えば、こちらのような BMIアプリを作ることができます。

ここでは、私が作成したWebアプリケーションのサンプルをいくつかご紹介したいと思います。（自己責任でご使用ください）

① 診断アプリ：ランダムに数字を生成する「乱数」という仕組みを使えば、「あなたの前世は…」や「あなたをプログラムにたとえると…」といった診断アプリを作成することができます。結果はTwitterでシェアできます。

②位置情報アプリ：Geolocation API※を使用すれば、位置情報を取得することができます。例えば、位置情報を取得することで近くのおすすめスポットを地図アプリに表示させることができます。
※API：よく使う機能を一から作らなくてもあらかじめ準備されている機能

③描画アプリ：Canvas APIという描画の機能を利用すればゲームアプリを作ることができます。
ここで、Googleが公開している遊び心のあるWebアプリケーションをひとつご紹介します。まずは、ChromeブラウザのURLバーに「chrome://dino/」と入力してください。そして、ページを開いたらスペースキーを押しましょう。そうすると、描画された恐竜くんやサボテンが動くゲームが始まるはずです。その他、HTML5を使えば、スマートフォンアプリやデスクトップアプリ、効果音や動画をコントロールすることもできます。

私は授業で毎回「自分だったら何を作るか」ということを意識して学ぶことを勧めています。なにか新しいものを作るには「技術」だけではなく、「アイデア」も必要です。その２つが両輪となります。「何を作ろうか」を意識しながら学べば、授業が何倍、何十倍、何百倍にも楽しく、実りあるものになるでしょう。アイデアは教科書の中だけではなく、実生活の中にもヒントがあります。さまざまなことに興味を持ち、経験を重ねることで「新たな発見」に出会えると思います。アンテナを張り巡らせ、身の回りのことからアイデアを創出してみてはいかがでしょうか。

ここまで私の担当する「HTML5」技術についてご紹介してきました。アプリケーションを作るための技術は、他にもC言語、PHP、Java、Pythonなどの言語があり、本学ではそれらを基礎から学ぶことができます。