SlideShare una empresa de Scribd logo
1 de 20
HTML5  入門編 その2
前回は、 HTML5 が現在に到るまでの歴史と新しい要素について少し触れましたが、 今回は、前回に引き続き HTML5 で新たに追加された要素、特にレイアウト関連の要素を中心に勉強していきたいと思います。
doctype 宣言 <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> みたいなのが <!DOCTYPE html> だけで OK になった
articleとsection ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
< article > <h1>html5</h1> < section > <h2>article 要素について </h2> … </ section > … </ article >
hgroup ,[object Object]
< article > < hgroup > <h1>html5</h1> <h2> レイアウトの要素 </h2> </ hgroup > <p>…</p> < section > < hgroup > <h1>article 要素について </h1> <h2> 属性 </h2> </ hgroup > … </ section > … </ article >
aside ,[object Object],[object Object]
< section > <h2>article 要素について </h2> <p>…</p> < aside > <p> 補足説明等 </p> </ aside > </ section >
header footer ,[object Object],[object Object]
nav ,[object Object],[object Object]
menu ,[object Object],[object Object],[object Object]
< menu  type=&quot;toolbar&quot;> <li> < menu  label=&quot;File&quot;> <button type=&quot;button&quot; onclick=&quot;fnew()&quot;>New...</button> <button type=&quot;button&quot; onclick=&quot;fopen()&quot;>Open...</button> <button type=&quot;button&quot; onclick=&quot;fsave()&quot; id=&quot;save&quot;>Save</button> <button type=&quot;button&quot; onclick=&quot;fsaveas()&quot;>Save as...</button> </ menu > </li> <li> < menu  label=&quot;Edit&quot;> <button type=&quot;button&quot; onclick=&quot;ecopy()&quot;>Copy</button> <button type=&quot;button&quot; onclick=&quot;ecut()&quot;>Cut</button> <button type=&quot;button&quot; onclick=&quot;epaste()&quot;>Paste</button> </ menu > </li> <li> < menu  label=&quot;Help&quot;> <li><a href=&quot;help.html&quot;>Help</a></li> <li><a href=&quot;about.html&quot;>About</a></li> </ menu > </li> </ menu >
ma r k ,[object Object],<p>I also have some < mark >kitten</ mark >s who are visiting me these days. They're really cute. I think they like my garden! Maybe I should adopt a < mark >kitten</ mark >.</p>
time ,[object Object],<div class=&quot;vevent&quot;> <a class=&quot;url&quot; href=&quot;http://www.web2con.com/&quot;>http://www.web2con.com/</a> <span class=&quot;summary&quot;>Web 2.0 Conference</span>: < time  class=&quot;dtstart&quot; datetime=&quot;2007-10-05&quot;>October 5</ time > - < time  class=&quot;dtend&quot; datetime=&quot;2007-10-20&quot;>19</ time >, at the <span class=&quot;location&quot;>Argent Hotel, San Francisco, CA</span> </div>
HTML5で非推奨の要素 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML5で非推奨の属性 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
考察・まとめ ,[object Object],[object Object],[object Object],[object Object],[object Object]
付録
HTML5 と javascript でここまでできる http://experiments.instrum3nt.com/markmahoney/ball/ http://www.watersheep.org/~markh/html_canvas/game.html http://29a.ch/jswars/

Más contenido relacionado

Destacado

muninで簡単&自在サーバーモニタリング
muninで簡単&自在サーバーモニタリングmuninで簡単&自在サーバーモニタリング
muninで簡単&自在サーバーモニタリングngi group.
 
フラクタリスト技術知識共有会発表資料 090903
フラクタリスト技術知識共有会発表資料 090903フラクタリスト技術知識共有会発表資料 090903
フラクタリスト技術知識共有会発表資料 090903ngi group.
 
SvnからGitへの移行について
SvnからGitへの移行についてSvnからGitへの移行について
SvnからGitへの移行についてngi group.
 
軽量高機能webサーバーnginx
軽量高機能webサーバーnginx軽量高機能webサーバーnginx
軽量高機能webサーバーnginxngi group.
 
正規表現のススメ_20091217
正規表現のススメ_20091217正規表現のススメ_20091217
正規表現のススメ_20091217ngi group.
 
RubyとPost Gis
RubyとPost GisRubyとPost Gis
RubyとPost Gisngi group.
 
Mixiアプリで体験する Open Social
Mixiアプリで体験する Open SocialMixiアプリで体験する Open Social
Mixiアプリで体験する Open Socialngi group.
 
Zshって最強らしい
Zshって最強らしいZshって最強らしい
Zshって最強らしいngi group.
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】MOCKS | Yuta Morishige
 

Destacado (12)

muninで簡単&自在サーバーモニタリング
muninで簡単&自在サーバーモニタリングmuninで簡単&自在サーバーモニタリング
muninで簡単&自在サーバーモニタリング
 
フラクタリスト技術知識共有会発表資料 090903
フラクタリスト技術知識共有会発表資料 090903フラクタリスト技術知識共有会発表資料 090903
フラクタリスト技術知識共有会発表資料 090903
 
SvnからGitへの移行について
SvnからGitへの移行についてSvnからGitへの移行について
SvnからGitへの移行について
 
軽量高機能webサーバーnginx
軽量高機能webサーバーnginx軽量高機能webサーバーnginx
軽量高機能webサーバーnginx
 
The Royal Lagoon Bhubaneswar
The Royal Lagoon Bhubaneswar The Royal Lagoon Bhubaneswar
The Royal Lagoon Bhubaneswar
 
正規表現のススメ_20091217
正規表現のススメ_20091217正規表現のススメ_20091217
正規表現のススメ_20091217
 
RubyとPost Gis
RubyとPost GisRubyとPost Gis
RubyとPost Gis
 
Mixiアプリで体験する Open Social
Mixiアプリで体験する Open SocialMixiアプリで体験する Open Social
Mixiアプリで体験する Open Social
 
Tokyo Cabinet
Tokyo CabinetTokyo Cabinet
Tokyo Cabinet
 
Zshって最強らしい
Zshって最強らしいZshって最強らしい
Zshって最強らしい
 
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedeeしょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
 

Similar a Html5 入門編 その2

京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座annulus
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 
IT研修講座
IT研修講座IT研修講座
IT研修講座annulus
 
it研修講座
it研修講座it研修講座
it研修講座annulus
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008annulus
 
kyoto IT
kyoto ITkyoto IT
kyoto ITannulus
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座annulus
 
webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術ina job
 
it研修講座 aki
it研修講座 akiit研修講座 aki
it研修講座 akiannulus
 
it研修講座
it研修講座it研修講座
it研修講座annulus
 
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップHTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップShumpei Shiraishi
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月annulus
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門柴田 篤志
 
2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoopsTom Hayakawa
 
2005 11 29_template_customize_seminer_04
2005 11 29_template_customize_seminer_042005 11 29_template_customize_seminer_04
2005 11 29_template_customize_seminer_04Tom Hayakawa
 
HTML仕様書を読んでみよう
HTML仕様書を読んでみようHTML仕様書を読んでみよう
HTML仕様書を読んでみようSaeki Tominaga
 

Similar a Html5 入門編 その2 (20)

最速HTML勉強会
最速HTML勉強会最速HTML勉強会
最速HTML勉強会
 
京都IT研修講座
京都IT研修講座京都IT研修講座
京都IT研修講座
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
IT研修講座
IT研修講座IT研修講座
IT研修講座
 
it研修講座
it研修講座it研修講座
it研修講座
 
It01
It01It01
It01
 
itkensyukouza2008
itkensyukouza2008itkensyukouza2008
itkensyukouza2008
 
kyoto IT
kyoto ITkyoto IT
kyoto IT
 
京都 IT研修講座
京都 IT研修講座京都 IT研修講座
京都 IT研修講座
 
webを飾る技術
webを飾る技術webを飾る技術
webを飾る技術
 
it研修講座 aki
it研修講座 akiit研修講座 aki
it研修講座 aki
 
it研修講座
it研修講座it研修講座
it研修講座
 
HTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップHTML5でセマンティックなマークアップ
HTML5でセマンティックなマークアップ
 
京都 IT講座 9月
京都 IT講座 9月京都 IT講座 9月
京都 IT講座 9月
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門
 
Module02
Module02Module02
Module02
 
2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops2005 10 07_kof2005_xoops
2005 10 07_kof2005_xoops
 
2005 11 29_template_customize_seminer_04
2005 11 29_template_customize_seminer_042005 11 29_template_customize_seminer_04
2005 11 29_template_customize_seminer_04
 
HTML仕様書を読んでみよう
HTML仕様書を読んでみようHTML仕様書を読んでみよう
HTML仕様書を読んでみよう
 

Html5 入門編 その2

  • 2. 前回は、 HTML5 が現在に到るまでの歴史と新しい要素について少し触れましたが、 今回は、前回に引き続き HTML5 で新たに追加された要素、特にレイアウト関連の要素を中心に勉強していきたいと思います。
  • 3. doctype 宣言 <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> みたいなのが <!DOCTYPE html> だけで OK になった
  • 4.
  • 5. < article > <h1>html5</h1> < section > <h2>article 要素について </h2> … </ section > … </ article >
  • 6.
  • 7. < article > < hgroup > <h1>html5</h1> <h2> レイアウトの要素 </h2> </ hgroup > <p>…</p> < section > < hgroup > <h1>article 要素について </h1> <h2> 属性 </h2> </ hgroup > … </ section > … </ article >
  • 8.
  • 9. < section > <h2>article 要素について </h2> <p>…</p> < aside > <p> 補足説明等 </p> </ aside > </ section >
  • 10.
  • 11.
  • 12.
  • 13. < menu type=&quot;toolbar&quot;> <li> < menu label=&quot;File&quot;> <button type=&quot;button&quot; onclick=&quot;fnew()&quot;>New...</button> <button type=&quot;button&quot; onclick=&quot;fopen()&quot;>Open...</button> <button type=&quot;button&quot; onclick=&quot;fsave()&quot; id=&quot;save&quot;>Save</button> <button type=&quot;button&quot; onclick=&quot;fsaveas()&quot;>Save as...</button> </ menu > </li> <li> < menu label=&quot;Edit&quot;> <button type=&quot;button&quot; onclick=&quot;ecopy()&quot;>Copy</button> <button type=&quot;button&quot; onclick=&quot;ecut()&quot;>Cut</button> <button type=&quot;button&quot; onclick=&quot;epaste()&quot;>Paste</button> </ menu > </li> <li> < menu label=&quot;Help&quot;> <li><a href=&quot;help.html&quot;>Help</a></li> <li><a href=&quot;about.html&quot;>About</a></li> </ menu > </li> </ menu >
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 20. HTML5 と javascript でここまでできる http://experiments.instrum3nt.com/markmahoney/ball/ http://www.watersheep.org/~markh/html_canvas/game.html http://29a.ch/jswars/