Movatterモバイル変換

HTML5 作成：亀山 1

発表内容1. HTML5とは2. HTML5の特徴3. 対応プラウザ4. HTML5の主な新機能5. セマンティックWEB6. 廃止予定のタグ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

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

タグ名理由basefont , big, center, font, s, strike, tt, CSSで扱った方がよいためuframe, frameset, noframes エンドユーザのユーザビリティとアクセシビリティに悪影響を及ぼすため 19

削除予定の属性 20

属性タグ名charset, rev link, ashape, coords alongdesc img, frametarget linknohref areaprofile headversion htmlname img（代わりに id を使う）scheme metaarchive, classid, codebase, objectcodetype, declarestandbyvaluetype, type paramaxis, abbr td, thscop 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, tralink, link, text, vlink, body bodybgcolor table, tr, td, th, bodyborder table, objectcellpadding, cellspacing, frame, rules Tableheight, nowrap td, thchar, charoff col, colgroup, tbody, td, tfoot, th, thead, trclear brcompact dl, menu, ol, ulframeborder iframehspace, vspace img, objectmarginwidth iframe, marginheightnoshade hrscrolling iframesize hrtype li, ol, ulvalign col, colgroup, tbody, td, tfoot, th, thead, trwidth 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.comHTML5.JP http://www.html5.jp/japan.internet.com 大幅に進化した次世代 HTML 規格「HTML5」とは？　（著者：株式会社アイレップ） http://japan.internet.com/busnews/20091027/8.htmlWeb Designing 2009年11月号【HTML5 & CSS3でWebは変わるのか？】 31

Movatterモバイル変換

Change Language

HTML5

Embed presentation

Recommended

More Related Content

Similar to HTML5

More from smallworkshop

HTML5