Your SlideShare is downloading. ×
0
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5

1,540

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,540
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 作成:亀山 1
  • 2. 発表内容 1. HTML5とは 2. HTML5の特徴 3. 対応プラウザ 4. HTML5の主な新機能 5. セマンティックWEB 6. 廃止予定のタグ 7. 削除予定の属性 8. HTML5で実際にCanvas要素を使って四角を書いてみ よう 9. 参考サイト 2
  • 3. HTML5とは 3
  • 4. • HTMLの5回目に当たる大幅な改定版で、XMLの文法で記述する場合、 XHTML5と呼ばれます。 • W3C*より2008年1月22日にドラフト(草案)が発表され、2010年9月頃 に正式版を発表する予定です。 *W3C WWW(インターネットやイントラネットで標準的に用いられるドキュメントシステム)で利用される技術の 標準化を進める団体。(IT用語辞典より) 4
  • 5. HTML5の特徴 5
  • 6. • セマンティックな構造化言語へと進化します。 サイト内コンテンツの構造化を進める方向性を持っているため、検索エンジン との親和性が自動的に高くなっています。つまり、何もしなくてもSEO対策に 近いことが出来ます。(詳しい説明は「セマンティックWEB」のところで) • フォーム機能の大幅な強化 (今回の発表ではパスです。すみません) • HTML5は後方互換性があるので、今使っているXHTML1文書を簡単にHTML5に変 換する方法があります。 〈!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ↓ <!DOCTYPE html> 6
  • 7. 対応プラウザ 7
  • 8. 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
  • 9. HTML5の主な新機能 9
  • 10. タグ名 機能 <canvas> JavaScriptで描画可能な二次元グラフィックス機能 <video> 動画、音声に特化した埋め込み要素 <audio> <section> 文章の意味構造を表すセクション要素  (詳しくは、セマンティックWEBで) <article> <aside> <nav> ナビゲーションエリアを定義する (詳しくは、セマンティックWEBで) <header> ページグループ化要素 (詳しくは、セマンティックWEBで) <footer> <figure> 図とキャプションを包含する要素 (<figure>タグで挟まれた部分にあるテキストと画像は、同じ意味を持つ情 報のグループであることを示します。) <details> 付加情報を囲み、クリックなどで展開可能にするための要素 10
  • 11. セマンティックWEB セマンティックWebとは、 Webページおよびその中に記述された内容について、それが何を意味するかを表す情報を一定の規則に従っ て付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想。 インターネットを単なるデータの集合から知識のデータベースに進化させようという試みがセマンティック Webである。 現在のWebページはHTMLなどを用いて記述されており、ページやその中に記された個々の情報について、そ れが何を意味するのかコンピュータが自動的に検知する術がほとんど無く、情報の検索や活用がごく原始的・ 単純なレベルに留まっている。 セマンティックWebでは、情報を記述する際に必ずそれが何を意味するかを表すデータを付与することで、 より複雑で精度の高い検索を可能にしたり、特定の種類の情報を収集して活用することができるようになる。 (IT用語辞典より) 11
  • 12. 今までは、 12
  • 13. 各セクションを「div」タグでレイアウし、 「div id(class)=“任意の名前”」 でした。 13
  • 14. <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
  • 15. HTML5では、 15
  • 16. DIVタグに代わり、それぞれのレイアウト 要素を新設されたタグによって配置する ことが可能になりました。 これまでのように、それぞれのホームペ ージ制作者の癖や意向に左右されること なく、ホームページレイアウトの方法が 世界共通になります。 16
  • 17. <header> ヘッダー部分 <navi> メニュー <article> 主題部分 <aside> 余談や引用、blogの関連 <section> 記事など、ページや記事 の主題から離れたブロック 主題ごとにまとまった一部分 をグループ化するのに利用。 章などの区切り <aside> <section> <fotter> フッター部分 17
  • 18. 廃止予定タグ 18
  • 19. タグ名 理由 basefont , big, center, font, s, strike, tt, CSSで扱った方がよいため u frame, frameset, noframes エンドユーザのユーザビリティとアクセ シビリティに悪影響を及ぼすため 19
  • 20. 削除予定の属性 20
  • 21. 属性 タグ名 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
  • 22. 属性 タグ名 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
  • 23. HTML5で 実際にCanvas要素を使って 四角を書いてみよう ←実際に表示するとこのような四角が書けます。  (バックの色はスタイルシートで指定しています。) IE8ではエラーになるので、FireFoxで表示してください。 23
  • 24. まずHTML4で作成しましょう。 マーカー部分がHTML5ではどう変わるかも注目 注:HTML4では<canvas>タグが存在しないので、HTML5との比較として作成しています。 24
  • 25. <!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
  • 26. HTML5で作成すると、 26
  • 27. <!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
  • 28. Canvasを利用した作例サイト 28
  • 29. Canvasによる円グラフの例 http://www.html5.jp/canvas/circlegraph_sample.html 29
  • 30. アニメーションのデモ http://www.benjoffe.com/code/demos/canvascape/textures 30
  • 31. 参考資料 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

×