html5 入門編 その2
Post on 18-Dec-2014
7.763 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML5HTML5 入門編 入門編その２その２
前回は、前回は、 HTML5HTML5 が現在に到るまでのが現在に到るまでの歴史と新しい要素について少し触れま歴史と新しい要素について少し触れましたが、したが、今回は、前回に引き続き今回は、前回に引き続き HTML5HTML5 で新で新たに追加された要素、特にレイアウトたに追加された要素、特にレイアウト関連の要素を中心に勉強していきたい関連の要素を中心に勉強していきたいと思います。と思います。
doctypedoctype 宣言宣言
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
みたいなのが
<!DOCTYPE html>
だけで OK になった
articlearticle とと sectionsection
articlearticleは、は、WebWebページの独立した部分を形成するページの独立した部分を形成する構成からなるページの記事コンテンツを扱うため構成からなるページの記事コンテンツを扱うためのコンテナの役割を果たすのコンテナの役割を果たす
sectionsectionは記事をセクションに細分して、コンテンは記事をセクションに細分して、コンテンツを識別しやすくする（章や節）ツを識別しやすくする（章や節）
こうした格納構造の利点こうした格納構造の利点意味のある目次の自動生成が容易になる意味のある目次の自動生成が容易になる意味のあるやり方でコンテンツをレイアウトしやすく意味のあるやり方でコンテンツをレイアウトしやすくなるなる
WebWebページに後で下位のコンテンツを挿入する作業がページに後で下位のコンテンツを挿入する作業が効率的になる効率的になる
<article>
<h1>html5</h1>
<section>
<h2>article要素について </h2>
…
</section>
…
</article>
hgrouphgroup
セクションの見出しを表す。この要素は、セクションの見出しを表す。この要素は、小見出し、副題、キャッチフレーズなど、小見出し、副題、キャッチフレーズなど、見出しが複数のレベルを持つとき、見出しが複数のレベルを持つとき、 h1-h6h1-h6要素のセットをグループ化する為に使う要素のセットをグループ化する為に使う
<article>
<hgroup>
<h1>html5</h1>
<h2> レイアウトの要素 </h2>
</hgroup>
<p>…</p>
<section>
<hgroup>
<h1>article 要素について </h1>
<h2> 属性 </h2>
</hgroup>
…
</section>
…
</article>
asideaside
インラインのサイドバーや関連コンテンインラインのサイドバーや関連コンテンツを設定するためのものツを設定するためのもの
前後のコンテンツには関係しているけれ前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触ども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成れておきたいようなコンテンツから構成されるページのセクションを表し、コンされるページのセクションを表し、コンテンツから分離されてものとしてみなすテンツから分離されてものとしてみなすことができることができる
<section>
<h2>article要素について </h2>
<p>…</p>
<aside>
<p>補足説明等 </p>
</aside>
</section>
headerheader footerfooter
headerheaderとと footerfooter はページレベルの補助的はページレベルの補助的な構成要素として使われる。な構成要素として使われる。
headerheaderは通常は、セクションの見出しは通常は、セクションの見出し（（ h1-h6h1-h6）を入れることを想定している）を入れることを想定しているが、これは必須ではなく、セクションのが、これは必須ではなく、セクションの目次や検索フォームや関連ロゴを囲む為目次や検索フォームや関連ロゴを囲む為にも使用できるにも使用できる
navnav
他のページやそのページ内の部分へリン他のページやそのページ内の部分へリンクするページのセクション、つまりナビクするページのセクション、つまりナビゲーションのリンクを伴なうセクションゲーションのリンクを伴なうセクションを表すを表す
asideaside と同様に外観よりも意味的な部分にと同様に外観よりも意味的な部分に役割がある役割がある
menumenu
コマンドのリストを表すコマンドのリストを表すコンテキストメニューや、ツールバーをコンテキストメニューや、ツールバーを定義する為に使う定義する為に使う
typetype属性で属性で contextcontext 、、 toolbartoolbar 、、 listlist を指を指定する定する
<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>
mama ｒｒ 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>
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>
HTML5HTML5 で非推奨の要素で非推奨の要素appletappletmarqueemarqueeacronymacronymdirdir frameframe isindexisindexbasefontbasefont
HTML5HTML5 で非推奨の属性で非推奨の属性@name@name@alink@alink@background@background@bgcolor@bgcolor@link@link@text@text@vlink@vlink
考察・まとめ考察・まとめセクション関連の要素を使うと文書構造を明示セクション関連の要素を使うと文書構造を明示的に表すことができる的に表すことができる
よく使われているよく使われている classclassやや ididが要素として採用が要素として採用されている（されている（ headerheader 、、 footerfooter とか）とか）
ココら辺の要素は、まだ策定中なので今後ドラココら辺の要素は、まだ策定中なので今後ドラスティックに変わる可能性があるので注意スティックに変わる可能性があるので注意
HTML5HTML5はただの文書の仕様ではなく、アプリケはただの文書の仕様ではなく、アプリケーションを前提としているーションを前提としている
アプリケーションと深く関るアプリケーションと深く関る APIAPI関連の話はま関連の話はまた今度た今度
付録付録
HTML5HTML5 とと javascriptjavascript でここまでででここまでできるきる
http://experiments.instrum3nt.com/markmahoney/ball/
http://www.watersheep.org/~markh/html_canvas/game.html
http://29a.ch/jswars/
top related