Html5 入門編 その2

  • 7,745 views
Uploaded on

HTML5の入門編 その2

HTML5の入門編 その2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,745
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
22
Comments
0
Likes
4

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  入門編 その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. articleとsection
    • article は、 Web ページの独立した部分を形成する構成からなるページの記事コンテンツを扱うためのコンテナの役割を果たす
    • section は記事をセクションに細分して、コンテンツを識別しやすくする(章や節)
    • こうした格納構造の利点
      • 意味のある目次の自動生成が容易になる
      • 意味のあるやり方でコンテンツをレイアウトしやすくなる
      • Web ページに後で下位のコンテンツを挿入する作業が効率的になる
  • 5. < article > <h1>html5</h1> < section > <h2>article 要素について </h2> … </ section > … </ article >
  • 6. hgroup
    • セクションの見出しを表す。この要素は、小見出し、副題、キャッチフレーズなど、見出しが複数のレベルを持つとき、h1-h6要素のセットをグループ化する為に使う
  • 7. < article > < hgroup > <h1>html5</h1> <h2> レイアウトの要素 </h2> </ hgroup > <p>…</p> < section > < hgroup > <h1>article 要素について </h1> <h2> 属性 </h2> </ hgroup > … </ section > … </ article >
  • 8. aside
    • インラインのサイドバーや関連コンテンツを設定するためのもの
    • 前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクションを表し、コンテンツから分離されてものとしてみなすことができる
  • 9. < section > <h2>article 要素について </h2> <p>…</p> < aside > <p> 補足説明等 </p> </ aside > </ section >
  • 10. header footer
    • headerとfooterはページレベルの補助的な構成要素として使われる。
    • headerは通常は、セクションの見出し(h1-h6)を入れることを想定しているが、これは必須ではなく、セクションの目次や検索フォームや関連ロゴを囲む為にも使用できる
  • 11. nav
    • 他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーションのリンクを伴なうセクションを表す
    • asideと同様に外観よりも意味的な部分に役割がある
  • 12. menu
    • コマンドのリストを表す
    • コンテキストメニューや、ツールバーを定義する為に使う
    • type属性でcontext、toolbar、listを指定する
  • 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. ma r k
    • 引用部分のテキストコンテンツに対して、オリジナルの書き手ではなく、現在の引用者が強調のマーキングを追加するために使う
    <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>
  • 15. time
    • 特定の日付や時刻や期間を意味的なラベルでラップする
    <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>
  • 16. HTML5で非推奨の要素
    • applet
    • marquee
    • acronym
    • dir
    • frame
    • isindex
    • basefont
  • 17. HTML5で非推奨の属性
    • @name
    • @alink
    • @background
    • @bgcolor
    • @link
    • @text
    • @vlink
  • 18. 考察・まとめ
    • セクション関連の要素を使うと文書構造を明示的に表すことができる
    • よく使われている class や id が要素として採用されている( header 、 footer とか)
    • ココら辺の要素は、まだ策定中なので今後ドラスティックに変わる可能性があるので注意
    • HTML5 はただの文書の仕様ではなく、アプリケーションを前提としている
    • アプリケーションと深く関る API 関連の話はまた今度
  • 19. 付録
  • 20. HTML5 と javascript でここまでできる http://experiments.instrum3nt.com/markmahoney/ball/ http://www.watersheep.org/~markh/html_canvas/game.html http://29a.ch/jswars/