HTML5

HTML5

作成：亀山

1

発表内容
1. HTML5とは
2. HTML5の特徴
3. 対応プラウザ
4. HTML5の主な新機能
5. セマンティックWEB
6. 廃止予定のタグ
7. 削除予定の属性
8. HTML5で実際にCanvas要素を使って四角を書いてみ
よう
9. 参考サイト

2

• HTMLの5回目に当たる大幅な改定版で、XMLの文法で記述する場合、
XHTML5と呼ばれます。

• W3C*より2008年1月22日にドラフト（草案）が発表され、2010年9月頃
に正式版を発表する予定です。

*W3C
WWW（インターネットやイントラネットで標準的に用いられるドキュメントシステム）で利用される技術の
標準化を進める団体。（IT用語辞典より）

4

• セマンティックな構造化言語へと進化します。
サイト内コンテンツの構造化を進める方向性を持っているため、検索エンジン
との親和性が自動的に高くなっています。つまり、何もしなくてもSEO対策に
近いことが出来ます。（詳しい説明は「セマンティックWEB」のところで）

• フォーム機能の大幅な強化　（今回の発表ではパスです。すみません）

• HTML５は後方互換性があるので、今使っているXHTML1文書を簡単にHTML５に変
換する方法があります。

〈!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
↓
<!DOCTYPE html>

6

対応プラウザ

7

Webプラウザ名リリース日 HTML5新機能

IE8 2009年3月 DOMストレージ　*

Safari4 2009年6月 <video>,<audio>

FireFox3.5 2009年6月 <video>,<audio>,
ドラッグ＆ドロップ,
APi
Opera10 2009年6月

Chrome3.0 2009年6月 <video>,<audio>

DOMストレージ
＊Cookieの代わりとなるもので、より大容量で、より安全かつ簡単に情報を保存できるように
設計されています。(https://developer.mozilla.org/Ja/DOM/Storageより)

8

HTML5の主な新機能

9

タグ名機能
<canvas> JavaScriptで描画可能な二次元グラフィックス機能

<video> 動画、音声に特化した埋め込み要素

<audio>
<section> 文章の意味構造を表すセクション要素
　（詳しくは、セマンティックWEBで）
<article>
<aside>
<nav> ナビゲーションエリアを定義する（詳しくは、セマンティックWEBで）

<header> ページグループ化要素（詳しくは、セマンティックWEBで）

<footer>
<figure> 図とキャプションを包含する要素
（<figure>タグで挟まれた部分にあるテキストと画像は、同じ意味を持つ情
報のグループであることを示します。）

<details> 付加情報を囲み、クリックなどで展開可能にするための要素

10

セマンティックWEB

セマンティックWebとは、
Webページおよびその中に記述された内容について、それが何を意味するかを表す情報を一定の規則に従っ
て付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想。
インターネットを単なるデータの集合から知識のデータベースに進化させようという試みがセマンティック
Webである。
現在のWebページはHTMLなどを用いて記述されており、ページやその中に記された個々の情報について、そ
れが何を意味するのかコンピュータが自動的に検知する術がほとんど無く、情報の検索や活用がごく原始的・
単純なレベルに留まっている。
セマンティックWebでは、情報を記述する際に必ずそれが何を意味するかを表すデータを付与することで、
より複雑で精度の高い検索を可能にしたり、特定の種類の情報を収集して活用することができるようになる。
（IT用語辞典より）

11

各セクションを「div」タグでレイアウし、

「div id(class)=“任意の名前”」

でした。

13

<div id=“header”> ヘッダー部分

<div id=“navi”> メニュー

<div id=“main”> 主題部分
<div class=“side”>

<div class=“section”>

<div class=“side”>
<div class=“section”>

<div id=“fotter”> フッター部分

14

DIVタグに代わり、それぞれのレイアウト
要素を新設されたタグによって配置する
ことが可能になりました。

これまでのように、それぞれのホームペ
ージ制作者の癖や意向に左右されること
なく、ホームページレイアウトの方法が
世界共通になります。

16

<header> ヘッダー部分

<navi> メニュー

<article> 主題部分 <aside>
余談や引用、blogの関連
<section> 記事など、ページや記事
の主題から離れたブロック
主題ごとにまとまった一部分
をグループ化するのに利用。
章などの区切り

<aside>
<section>

<fotter> フッター部分

17

廃止予定タグ

18

タグ名理由
basefont , big, center, font, s, strike, tt, CSSで扱った方がよいため
u

frame, frameset, noframes エンドユーザのユーザビリティとアクセ
シビリティに悪影響を及ぼすため

19

削除予定の属性

20

属性タグ名
charset, rev link, a
shape, coords a
longdesc img, frame
target link
nohref area
profile head
version html
name img
（代わりに id を使う）

scheme meta
archive, classid, codebase, object
codetype, declarestandby

valuetype, type param
axis, abbr td, th
scop td

21

属性タグ名
align caption, iframe, img, input, object, legend, table,
hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup,
tbody, td, tfoot, th, thead, tr
alink, link, text, vlink, body body
bgcolor table, tr, td, th, body
border table, object
cellpadding, cellspacing, frame, rules Table
height, nowrap td, th
char, charoff col, colgroup, tbody, td, tfoot, th, thead, tr
clear br
compact dl, menu, ol, ul
frameborder iframe
hspace, vspace img, object
marginwidth iframe, marginheight
noshade hr
scrolling iframe
size hr
type li, ol, ul
valign col, colgroup, tbody, td, tfoot, th, thead, tr
width hr, table, td, th, col, colgroup, pre
22

HTML5で
実際にCanvas要素を使って
四角を書いてみよう

←実際に表示するとこのような四角が書けます。
　（バックの色はスタイルシートで指定しています。）

IE8ではエラーになるので、FireFoxで表示してください。

23

まずHTML4で作成しましょう。

マーカー部分がHTML5ではどう変わるかも注目

注：HTML4では<canvas>タグが存在しないので、HTML5との比較として作成しています。

24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<head>
<title>Canvas のデモ</title>
<script type="text/javascript">
function draw () {
var canvas = document.getElementById ('shikaku');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect (25, 25, 50, 50);
}
}
</script>
<style type="text/css">
canvas { border: 2px solid red; }
</style>
</head>
<body onLoad="draw ();">
<canvas id="shikaku" width="100" height="100"></canvas>
</body>
</html>

25

HTML5で作成すると、

26

<!DOCTYPE html>
<meta charaset="UTF-8“>
<link rel="stylesheet" href="style.css" />

<head>
<title>Canvas のデモ</title>
<script>
function draw () {
var canvas = document.getElementById ('shikaku');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect (25, 25, 50, 50);
}
}
</script>
<style>
canvas { border: 2px solid red; }
</style>
</head>
<body onLoad="draw ();">
<canvas id="shikaku" width="100" height="100"></canvas>
</body>
</html>

27

Canvasを利用した作例サイト

28

Canvasによる円グラフの例

http://www.html5.jp/canvas/circlegraph_sample.html

29

アニメーションのデモ

http://www.benjoffe.com/code/demos/canvascape/textures

30

参考資料
Think　IT
【即実践！HTML+CSS】ポストWebコーディング
　第1回：結構良さそうだぞHTML 5！　（著者：吉田光利）
http://www.thinkit.co.jp/article/48/1/index.html
　第2回：HTML 5の機能を試す！　（著者：吉田光利）
http://www.thinkit.co.jp/article/48/2/

HTML5がつくり出す新しいWebの世界
http://www.html5-guide.com

HTML5.JP
http://www.html5.jp/

japan.internet.com
大幅に進化した次世代 HTML 規格「HTML5」とは？　（著者：株式会社アイレップ）
http://japan.internet.com/busnews/20091027/8.html

Web Designing 2009年11月号
【HTML5 & CSS3でWebは変わるのか？】

31

HTML5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie HTML5

Ähnlich wie HTML5 (20)

Mehr von smallworkshop

Mehr von smallworkshop (12)

Kürzlich hochgeladen

Kürzlich hochgeladen (7)

HTML5