html5 入門編 その2

20
HTML5 HTML5 入入入 入入入 入入入入

Upload: ngi-group

Post on 18-Dec-2014

7.763 views

Category:

Documents


5 download

DESCRIPTION

HTML5の入門編 その2

TRANSCRIPT

Page 1: Html5 入門編 その2

HTML5HTML5 入門編 入門編その2その2

Page 2: Html5 入門編 その2

前回は、前回は、 HTML5HTML5 が現在に到るまでのが現在に到るまでの歴史と新しい要素について少し触れま歴史と新しい要素について少し触れましたが、したが、今回は、前回に引き続き今回は、前回に引き続き HTML5HTML5 で新で新たに追加された要素、特にレイアウトたに追加された要素、特にレイアウト関連の要素を中心に勉強していきたい関連の要素を中心に勉強していきたいと思います。と思います。

Page 3: Html5 入門編 その2

doctypedoctype 宣言宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

みたいなのが

<!DOCTYPE html>

だけで OK になった

Page 4: Html5 入門編 その2

articlearticle とと sectionsection

articlearticleは、は、WebWebページの独立した部分を形成するページの独立した部分を形成する構成からなるページの記事コンテンツを扱うため構成からなるページの記事コンテンツを扱うためのコンテナの役割を果たすのコンテナの役割を果たす

sectionsectionは記事をセクションに細分して、コンテンは記事をセクションに細分して、コンテンツを識別しやすくする(章や節)ツを識別しやすくする(章や節)

こうした格納構造の利点こうした格納構造の利点意味のある目次の自動生成が容易になる意味のある目次の自動生成が容易になる意味のあるやり方でコンテンツをレイアウトしやすく意味のあるやり方でコンテンツをレイアウトしやすくなるなる

WebWebページに後で下位のコンテンツを挿入する作業がページに後で下位のコンテンツを挿入する作業が効率的になる効率的になる

Page 5: Html5 入門編 その2

<article>

<h1>html5</h1>

<section>

<h2>article要素について </h2>

</section>

</article>

Page 6: Html5 入門編 その2

hgrouphgroup

セクションの見出しを表す。この要素は、セクションの見出しを表す。この要素は、小見出し、副題、キャッチフレーズなど、小見出し、副題、キャッチフレーズなど、見出しが複数のレベルを持つとき、見出しが複数のレベルを持つとき、 h1-h6h1-h6要素のセットをグループ化する為に使う要素のセットをグループ化する為に使う

Page 7: Html5 入門編 その2

<article>

<hgroup>

<h1>html5</h1>

<h2> レイアウトの要素 </h2>

</hgroup>

<p>…</p>

<section>

<hgroup>

<h1>article 要素について </h1>

<h2> 属性 </h2>

</hgroup>

</section>

</article>

Page 8: Html5 入門編 その2

asideaside

インラインのサイドバーや関連コンテンインラインのサイドバーや関連コンテンツを設定するためのものツを設定するためのもの

前後のコンテンツには関係しているけれ前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触ども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成れておきたいようなコンテンツから構成されるページのセクションを表し、コンされるページのセクションを表し、コンテンツから分離されてものとしてみなすテンツから分離されてものとしてみなすことができることができる

Page 9: Html5 入門編 その2

<section>

<h2>article要素について </h2>

<p>…</p>

<aside>

<p>補足説明等 </p>

</aside>

</section>

Page 10: Html5 入門編 その2

headerheader    footerfooter

headerheaderとと footerfooter はページレベルの補助的はページレベルの補助的な構成要素として使われる。な構成要素として使われる。

headerheaderは通常は、セクションの見出しは通常は、セクションの見出し(( h1-h6h1-h6)を入れることを想定している)を入れることを想定しているが、これは必須ではなく、セクションのが、これは必須ではなく、セクションの目次や検索フォームや関連ロゴを囲む為目次や検索フォームや関連ロゴを囲む為にも使用できるにも使用できる

Page 11: Html5 入門編 その2

navnav

他のページやそのページ内の部分へリン他のページやそのページ内の部分へリンクするページのセクション、つまりナビクするページのセクション、つまりナビゲーションのリンクを伴なうセクションゲーションのリンクを伴なうセクションを表すを表す

asideaside と同様に外観よりも意味的な部分にと同様に外観よりも意味的な部分に役割がある役割がある

Page 12: Html5 入門編 その2

menumenu

コマンドのリストを表すコマンドのリストを表すコンテキストメニューや、ツールバーをコンテキストメニューや、ツールバーを定義する為に使う定義する為に使う

typetype属性で属性で contextcontext 、、 toolbartoolbar 、、 listlist を指を指定する定する

Page 13: Html5 入門編 その2

<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">New...</button> <button type="button" onclick="fopen()">Open...</button> <button type="button" onclick="fsave()" id="save">Save</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button" onclick="ecut()">Cut</button> <button type="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li></menu>

Page 14: Html5 入門編 その2

mama rr kk

引用部分のテキストコンテンツに対して、引用部分のテキストコンテンツに対して、オリジナルの書き手ではなく、現在の引オリジナルの書き手ではなく、現在の引用者が強調のマーキングを追加するため用者が強調のマーキングを追加するために使うに使う<p>I also have some <mark>kitten</mark>s who are visiting methese days. They're really cute. I think they like my garden! Maybe Ishould adopt a <mark>kitten</mark>.</p>

Page 15: Html5 入門編 その2

timetime

特定の日付や時刻や期間を意味的なラベ特定の日付や時刻や期間を意味的なラベルでラップするルでラップする

<div class="vevent"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a> <span class="summary">Web 2.0 Conference</span>: <time class="dtstart" datetime="2007-10-05">October 5</time> - <time class="dtend" datetime="2007-10-20">19</time>, at the <span class="location">Argent Hotel, San Francisco, CA</span> </div>

Page 16: Html5 入門編 その2

HTML5HTML5 で非推奨の要素で非推奨の要素appletappletmarqueemarqueeacronymacronymdirdir frameframe isindexisindexbasefontbasefont

Page 17: Html5 入門編 その2

HTML5HTML5 で非推奨の属性で非推奨の属性@name@name@alink@alink@background@background@bgcolor@bgcolor@link@link@text@text@vlink@vlink

Page 18: Html5 入門編 その2

考察・まとめ考察・まとめセクション関連の要素を使うと文書構造を明示セクション関連の要素を使うと文書構造を明示的に表すことができる的に表すことができる

よく使われているよく使われている classclassやや ididが要素として採用が要素として採用されている(されている( headerheader 、、 footerfooter とか)とか)

ココら辺の要素は、まだ策定中なので今後ドラココら辺の要素は、まだ策定中なので今後ドラスティックに変わる可能性があるので注意スティックに変わる可能性があるので注意

HTML5HTML5はただの文書の仕様ではなく、アプリケはただの文書の仕様ではなく、アプリケーションを前提としているーションを前提としている

アプリケーションと深く関るアプリケーションと深く関る APIAPI関連の話はま関連の話はまた今度た今度

Page 19: Html5 入門編 その2

付録付録

Page 20: Html5 入門編 その2

HTML5HTML5 とと javascriptjavascript でここまでででここまでできるきる

http://experiments.instrum3nt.com/markmahoney/ball/

http://www.watersheep.org/~markh/html_canvas/game.html

http://29a.ch/jswars/