今からハジメるHTML5マークアップ

1. 有限会社futomi 代表取締役羽田野太巳（はたのふとみ） http://www.futomi.com/ http://www.html5.jp/ http://twitter.com/futomi

2. http://www.html5.jp/

3. http://www.amazon.co.jp/gp/product/4798025291/

4.  HTML5のマークアップの基礎  IE対応とスタイリング  セクションとアウトライン  旧来の要素を見直す  ワークショップ

6.  <!DOCTYPE html>  標準モードでのレンダリング  整形式XML  XHTML5での利用も想定  短くて覚えやすい

7. HTML5推奨 <meta charset="UTF-8" /> 下位互換もOK <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

8.  ファイルの先頭から512バイト以内。  よほど大きな理由がない限り"UTF-8"  "Shift_JIS"や"EUC-JP"は非推奨  "UTF-32"も非推奨  charsetコンテンツ属性を持ったmeta要素は1つだけ

9.  HTML5はXHTML的なマークアップもOK  <input type="radio" checked> ○  <input type="radio" checked="checked" /> ○  XHTML的に書いても、Content-Type が text/html である以上、XHTMLではなく、 HTML

10. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>タイトル</title> </head> <body>  </body> </html>

11.  インライン・ブロックという分類は廃止  プレゼンテーショナルな分類を排除  文書構造を表す意味（セマンティクス）に基づいた分類に  新たにコンテンツ・モデルと呼ばれる分類を定義  要素の中に入れても良いコンテンツを、コンテンツ・モデルを使って定義

13.  The W3C Markup Validation Service  http://validator.w3.org/  Validator.nu  http://html5.validator.nu/

14. http://validator.w3.org/

15. http://html5.validator.nu/

17.  DOMツリーが期待通りに構成されない  未知の要素はCSSが効かない

18. <header> <hgroup> <h1>HTML5.JP</h1> <h2>次世代標準 HTML5 情報サイト</h2> </hgoup> </header>

19. 本来のDOM IEのDOM header header └ hgroup hgroup ├ h1 h1 └h2 h2 /hgroup /header

20.  JavaScriptによるハック  document.createElement("要素名");  これだけで解決  appendChild()は不要

21. ie.js (function () { var els = [ 'section', 'article', 'hgroup', 'header', 'footer', 'nav','aside', ]; for (var i=0; i<els.length; i++ ) { document.createElement(els[i]); } })();

22.

23.  未知要素はすべてのブラウザーでインラインとしてレンダリングされてしまう  スタイルシートでブロックとして定義 section, article, aside, nav { display: block; }

25.  section要素（セクション要素）  article要素（セクション要素）  aside要素（セクション要素）  nav要素（セクション要素）  hgroup要素  header要素  footer要素

26.  章や節といった単位を表す（セクション）  見出しと本文をまとめる <section> <h2>マレー空港に到着</h2> <p>名古屋からシンガポールを経由して、やっとマレー空港に到着しました。</p> ... </section>

27.  セクションを表す  ブログの投稿、ニュースサイトの記事、ブログ記事へのコメント、掲示板の投稿  そのコンテンツだけを切り出しても、独立したコンテンツとして再利用可能なものに使う

28. <article> <h1>モルディブ旅行記</h1> <p>新婚旅行にモルディブに行ってきました。そこで起こった出来事をまとめました。</p> <section> <h2>マレ空港に到着</h2> <p>名古屋からシンガポールを経由して、やっとマレー空港に到着しました。</p> ... </section> <section> <h2>ヴァビンファル島</h2> <p>この島に一週間滞在しました。...</p> ... </section> </article>

29.  ナビゲーションを形成するセクション  サイト内のページリンクの集まり <nav> <ul> <li><a href="/">home</a></li> <li><a href="/tutorial/">チュートリアル</a></li> ... </ul> </nav>

30.  メインのコンテンツとは関連が薄く、切り離すことができるコンテンツを表すセクション  補足記事、サイドバー、広告、プル・クォート

31. <article> <h1>モルディブ旅行記</h1> <p>新婚旅行にモルディブに行ってきました。そこで起こった出来事をまとめました。</p> ... <aside> <h2>モルディブとは</h2> <p>...</p> </aside> </article>

32.  見出しと、それに付随する小見出しや副題やキャッチフレーズをグループ化  もっともレベルが高い見出し要素がアウトラインの見出し  それ以外の見出し要素はサブタイトル  <h1>～<h6>しか入れてはいけない

33. <section＞ <hgroup> <h1>岐阜の鵜飼</h1> <h2>長良川の1300年の伝統</h2> </hgroup> <p>長良川の鵜飼いは、...</p> ... </section>

34.  ページやセクションのヘッダー <header> <hgroup> <h1><a href="http://www.html5.jp/">HTML5.JP</a></h1> <h2>次世代 HTML 標準 HTML5 情報サイト</h2> </hgroup> <nav> <ul> <li><a href="/">home</a></li> <li><a href="/tutorial/index.html">HTML5 チュートリアル</a></li> <li><a href="/blog/">ブログ</a></li> ... </ul> </nav> </header>

35.  ページやセクションのフッター <body> ... <footer> <ul> <li><a href="/about/profile.html">サイト運営者情報</a></li> ... </ul> <p id="copyright"><small>Copyright © 2007 - 2009 <a href="http://www.futomi.com/">Futomi Hatano</a> All Rights Reserved.</small></p> </footer> </body>

37.  ドキュメントのコンテンツを、書籍の目次のように並べたもの  HTML5では、ドキュメントからアウトラインを決定するアルゴリズムが規定  h1～h6要素、section, article, aside, nav要素の入れ子関係に従って決まる

38. <h1>見出し1</h1> 見出し1 <p>段落</p> ├見出し2 <h2>見出し2</h2> └見出し3 <p>段落</p> <h2>見出し3</h2> <p>段落</h2>

39. <h1>見出し1</h1>  見出しレベルはセク <p>段落</p> ション要素のネス <section> ト・レベルと一致 <h1>見出し2</h1>  すべて<h1>でも、期 <p>段落</p> 待通りのアウトライ </section> <section> ンに <h1>見出し3</h1> <p>段落</h2> </section>

40.  HTML5 Outliner  http://gsnedders.html5.org/outliner/ <h1>HTML5</h1> <p>HTML5とは...</p> <h2>要素</h2> <p>要素とは...</p> <h3>section要素</h3> <p>section要素とは...</p> <h3>article要素</h3> <p>article要素とは...</p> <h2>DOM</h2> <p>DOMとは...</p>

42.  段落レベルの区切り  セクション（章や節）の区切りではない

43. <section> <h2>英語が話せなかった私とペラペラの彼</h2> <p>私はまったく英語が話せなかった。もちろん、まともに聞くこともできなかった。...</p> ... <hr /> <p>彼は英国の大学に通っていた。そのため、彼は英語がペラペラだ。...</p> ... </section>

44.  細目などの注釈を表す要素として再定義。  免責条項、警告、法的制約、著作権表記、帰属、ライセンス要件など

46.  重要性を表す要素として再定義  強調を表す要素ではなくなった  強調はem要素を使うべき  strong要素の中にstrong要素を使うと、重要性が増す

47. <p><strong>注意：最近、第三者によるなりすましの被害が急増しています。被害を受けた方のほどんどは、容易に推測できるパスワードを設定されています。パスワードには<strong>ランダムな文字列を設定 </strong>するようにしてください。また、<strong>定期的にパスワードを変更</strong>して頂きますよう、お願いいたします。</strong></p>

48.  声、ムード、技術用語、船の名前など、印刷表現ではイタリック体で表されるようなテキストの範囲  日本では、イタリック表記とする印刷慣例は少ない  用途を区別するclass属性を入れ、CSSなどでスタイルを調整するのが良い

49. <p>私は、<i class="thought">なんてバカなんだ！</i>と心の中で叫んだ。みんなが、沈んだ船の話をしていたので、てっきり<i class="ship">戦艦大和</i>の話と思っていたら、どうやら<i class="ship">タイタニック号</i>の話だったらしい。どうりでさっぱり話が通じなかったわけだ。みんなには相当変なヤツと思われたに違いない。まさに、<i class="idiom" lang="en">Oh! My God!</i>って感じだ。

50.  重要性や強調という意味は持たないが、キーワードといった、他の文章とは区別したいテキストの範囲  用途を区別するclass属性を入れ、CSSなどでスタイルを調整するのが良い

51. <p>当社が長年かけて研究し改良を重ねた自信作が<b class="product">きらきらカーワックス</b>です。<b class="product">きらきらカーワックス</b>は、サッと磨くだけで、あなたあの愛車がピカピカになり、それ以降、水洗い洗車だけで、それが6ヶ月も持続します。一度つかったら、あなたはもう<b class="product">きらきらカーワークス</b> を手放せません！</p>

52.  見た目しか表さずCSSで対処可能な要素  basefont, big, center, font, s, strike, tt, u  ユーザービリティやアクセシビリティに悪影響を与える要素  frame, frameset, noframes  ほとんど使われていない要素  acronym, applet, isindex, dir

53.  プレゼンテーショナルな属性  <hr>, <p>などのalign属性  <table>, <td>, <body>などの bgcolor属性  <hr>のnoshade属性とsize属性とwidth属性  <td>, <th>などののnowrap属性とvalign属性  代替方法があり不要となった属性  <a>のshape属性とcoords属性  <td>のscope属性

55.  HTML5で要素のセマンティクスが強化  マークアップはセマンティクスのみ  プレゼンテーションはCSSで

56.  アウトラインを意識したコンテンツ作りが重要  マークアップ・スキルだけでなく、文書構成スキルも重要に

57. 適切な要素を考えてください

59. <header> <nav> <aside>

61. <section> <article> <article>

63. <article> <header> <section> <section> <footer>

64. 有限会社futomi 代表取締役羽田野太巳（はたのふとみ） http://www.futomi.com/ http://www.html5.jp/ http://twitter.com/futomi

今からハジメるHTML5マークアップ

今からハジメるHTML5マークアップ

Recommended

More Related Content

What's hot

What's hot(20)

Similar to 今からハジメるHTML5マークアップ

Similar to 今からハジメるHTML5マークアップ(20)

More from SwapSkills

More from SwapSkills(12)

今からハジメるHTML5マークアップ