ついに正式勧告--「HTML5」を使いこなすには何が必要か

中島俊治
2014-11-10 06:00:00
  • このエントリーをはてなブックマークに追加

「HTML5は何ができるの?」

 実際の活用例についてはもう程度お答えしましたが、一言皆さんにメッセージをお送りします。

 「皆さんはウェブで何をしたいですか? まず考えてアイデアを出しましょう。そのアイデアを実現するための選択肢のひとつがHTML5です

2. 私にも作れるかな?

 はい! 準備はとても簡単です。

用意するもの

 テキストエディタとブラウザを揃えればOK! テキストエディタは、文字だけを入力するエディタ。例えばTeraPadや秀丸、サクラエディタやmiなど自分にあったエディタをご利用ください。

 ブラウザはウェブページを閲覧するためのソフトですが、プログラムのバグ取りにも利用します。ブラウザによってHTML5への対応状況は異なるのでご注意ください。最初は、Google Chromeで練習していくことをおすすめします。

知識

a. タグでマークアップしよう

 まず、htmlファイルをつくるときには最初に<!DOCTYPE html>と記述しましょう。これはこのウェブページがHTML5のルールで作られているので、そのルールにもとづいて表示するように今から表示させようとしているブラウザに宣言しているものです。とても大事なコードなので書き忘れないよう、覚えてしまいましょう。

 文字コードを指定するために、head要素には<meta charset="utf-8">とマークアップしましょう。文字化けするときはたいていここがおかしいです。

 従来のページの頭の部分は、会社のロゴであるとか、ページの大見出しなどがあり、そこを<header>記述しましょう。

 同様に、グローバルナビゲーションを<nav>で、メインコンテンツを<main>でひとつひとつのコンテンツのかたまりを<section>で、著作権表示の部分を<footer>でマークアップしましょう。

 従来のHTMLでは<div>を多用してページ上のコンテンツの割り振りをしていました。HTML5は<div>の代わりに意味のあるタグを記述し、検索エンジンにわかりやすいコードになります。



b. スタイルシートでデザインを楽しもう

 従来のCSSも、色や大きさ、枠線を引き、とてもきれいなウェブページを作れます。今回のCSS3では、box-shadowを使って影や光彩を表現したり、 border-radiusを使って角を自在に丸くしたり正円や楕円のデザインを作れます。

 グラデーションや反射などの効果や、最近流行っている「レスポンシブウェブデザイン」もCSS3で作れます。

 さらにCSS3には、アニメーションや奥行き感を持った3次元表示など、皆さんが想像している以上に様々な視覚効果が用意されています。

c. JavaScriptを覚えよう

 JavaScriptは計算します。それらのデータを保存することもでき、外部と送信・受信します。ウェブページ上のコンテンツを書き換えたり、タグを追加したり変更したり、CSSを動的に変化させます。

 HTML5では、GPSなどをもとに自分の位置情報を取得します。スマホを傾けるとセンサが働き、傾き具合を知ることができます。それらの値をJavaScriptが受け取り処理します。

 JavaScriptは<canvas>で図形を描きます。アニメーションもでき、好きなタイミングで効果音を鳴らすなどもできます。つまり、ゲームアプリケーションを簡単につくることができます。

 JavaScriptは、その他にもさまざまな機能がてんこ盛りです。JavaScriptは、HTML5では欠くことのできない、とても重要なものです。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]