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

  • 55,474 views
Uploaded on

SwapSkills2010 vol2 …

SwapSkills2010 vol2
羽田野太巳

More in: Education
  • 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
55,474
On Slideshare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
241
Comments
0
Likes
51

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. 有限会社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対応とスタイリング  セクションとアウトライン  旧来の要素を見直す  ワークショップ
  • 5.  <!DOCTYPE html>  標準モードでのレンダリング  整形式XML  XHTML5での利用も想定  短くて覚えやすい
  • 6. HTML5推奨 <meta charset="UTF-8" /> 下位互換もOK <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  • 7.  ファイルの先頭から512バイト以内。  よほど大きな理由がない限り"UTF-8"  "Shift_JIS"や"EUC-JP"は非推奨  "UTF-32"も非推奨  charsetコンテンツ属性を持ったmeta要素 は1つだけ
  • 8.  HTML5はXHTML的なマークアップもOK  <input type="radio" checked> ○  <input type="radio" checked="checked" /> ○  XHTML的に書いても、Content-Type が text/html である以上、XHTMLではなく、 HTML
  • 9. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>タイトル</title> </head> <body> <!-- コンテンツ --> </body> </html>
  • 10.  インライン・ブロックという分類は廃止  プレゼンテーショナルな分類を排除  文書構造を表す意味(セマンティクス) に基づいた分類に  新たにコンテンツ・モデルと呼ばれる分 類を定義  要素の中に入れても良いコンテンツを、 コンテンツ・モデルを使って定義
  • 11.  The W3C Markup Validation Service  http://validator.w3.org/  Validator.nu  http://html5.validator.nu/
  • 12. http://validator.w3.org/
  • 13. http://html5.validator.nu/
  • 14.  DOMツリーが期待通りに構成されない  未知の要素はCSSが効かない
  • 15. <header> <hgroup> <h1>HTML5.JP</h1> <h2>次世代 標準 HTML5 情報サイト</h2> </hgoup> </header>
  • 16. 本来のDOM IEのDOM header header └ hgroup hgroup ├ h1 h1 └h2 h2 /hgroup /header
  • 17.  JavaScriptによるハック  document.createElement("要素名");  これだけで解決  appendChild()は不要
  • 18. ie.js (function () { var els = [ 'section', 'article', 'hgroup', 'header', 'footer', 'nav','aside', ]; for (var i=0; i<els.length; i++ ) { document.createElement(els[i]); } })();
  • 19. <!--[if IE]><script src="ie.js"></script><![endif]-->
  • 20.  未知要素はすべてのブラウザーでインラ インとしてレンダリングされてしまう  スタイルシートでブロックとして定義 section, article, aside, nav { display: block; }
  • 21.  section要素(セクション要素)  article要素(セクション要素)  aside要素(セクション要素)  nav要素(セクション要素)  hgroup要素  header要素  footer要素
  • 22.  章や節といった単位を表す(セクション)  見出しと本文をまとめる <section> <h2>マレー空港に到着</h2> <p>名古屋からシンガポールを経由して、やっとマ レー空港に到着しました。</p> ... </section>
  • 23.  セクションを表す  ブログの投稿、ニュースサイトの記事、 ブログ記事へのコメント、掲示板の投稿  そのコンテンツだけを切り出しても、独 立したコンテンツとして再利用可能なも のに使う
  • 24. <article> <h1>モルディブ旅行記</h1> <p>新婚旅行にモルディブに行ってきました。そこで起こった 出来事をまとめました。</p> <section> <h2>マレ空港に到着</h2> <p>名古屋からシンガポールを経由して、やっとマレー空港に 到着しました。</p> ... </section> <section> <h2>ヴァビンファル島</h2> <p>この島に一週間滞在しました。...</p> ... </section> </article>
  • 25.  ナビゲーションを形成するセクション  サイト内のページリンクの集まり <nav> <ul> <li><a href="/">home</a></li> <li><a href="/tutorial/">チュートリアル</a></li> ... </ul> </nav>
  • 26.  メインのコンテンツとは関連が薄く、切 り離すことができるコンテンツを表すセ クション  補足記事、サイドバー、広告、プル・ クォート
  • 27. <article> <h1>モルディブ旅行記</h1> <p>新婚旅行にモルディブに行ってきました。そ こで起こった出来事をまとめました。</p> ... <aside> <h2>モルディブとは</h2> <p>...</p> </aside> </article>
  • 28.  見出しと、それに付随する小見出しや副 題やキャッチフレーズをグループ化  もっともレベルが高い見出し要素がアウ トラインの見出し  それ以外の見出し要素はサブタイトル  <h1>~<h6>しか入れてはいけない
  • 29. <section> <hgroup> <h1>岐阜の鵜飼</h1> <h2>長良川の1300年の伝統</h2> </hgroup> <p>長良川の鵜飼いは、...</p> ... </section>
  • 30.  ページやセクションのヘッダー <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>
  • 31.  ページやセクションのフッター <body> ... <footer> <ul> <li><a href="/about/profile.html">サイト運営者情報</a></li> ... </ul> <p id="copyright"><small>Copyright &#169; 2007 - 2009 <a href="http://www.futomi.com/">Futomi Hatano</a> All Rights Reserved.</small></p> </footer> </body>
  • 32.  ドキュメントのコンテンツを、書籍の目 次のように並べたもの  HTML5では、ドキュメントからアウトラ インを決定するアルゴリズムが規定  h1~h6要素、section, article, aside, nav要素 の入れ子関係に従って決まる
  • 33. <h1>見出し1</h1> 見出し1 <p>段落</p> ├見出し2 <h2>見出し2</h2> └見出し3 <p>段落</p> <h2>見出し3</h2> <p>段落</h2>
  • 34. <h1>見出し1</h1>  見出しレベルはセク <p>段落</p> ション要素のネス <section> ト・レベルと一致 <h1>見出し2</h1>  すべて<h1>でも、期 <p>段落</p> 待通りのアウトライ </section> <section> ンに <h1>見出し3</h1> <p>段落</h2> </section>
  • 35.  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>
  • 36.  段落レベルの区切り  セクション(章や節)の区切りではない
  • 37. <section> <h2>英語が話せなかった私とペラペラの彼</h2> <p>私はまったく英語が話せなかった。もちろん、 まともに聞くこともできなかった。...</p> ... <hr /> <p>彼は英国の大学に通っていた。そのため、彼は 英語がペラペラだ。...</p> ... </section>
  • 38.  細目などの注釈を表す要素として再定義。  免責条項、警告、法的制約、著作権表記、 帰属、ライセンス要件など
  • 39. <footer> ... <p><small>&copy; copyright 2010 Futomi Hatano</small></p> </footer>
  • 40.  重要性を表す要素として再定義  強調を表す要素ではなくなった  強調はem要素を使うべき  strong要素の中にstrong要素を使うと、重 要性が増す
  • 41. <p><strong>注意:最近、第三者によるなりすましの 被害が急増しています。被害を受けた方のほどんどは、 容易に推測できるパスワードを設定されています。パ スワードには<strong>ランダムな文字列を設定 </strong>するようにしてください。また、<strong>定 期的にパスワードを変更</strong>して頂きますよう、 お願いいたします。</strong></p>
  • 42.  声、ムード、技術用語、船の名前など、 印刷表現ではイタリック体で表されるよ うなテキストの範囲  日本では、イタリック表記とする印刷慣 例は少ない  用途を区別するclass属性を入れ、CSSなど でスタイルを調整するのが良い
  • 43. <p>私は、<i class="thought">なんてバカなんだ!</i>と心の 中で叫んだ。みんなが、沈んだ船の話をしていたので、 てっきり<i class="ship">戦艦大和</i>の話と思っていたら、 どうやら<i class="ship">タイタニック号</i>の話だったらし い。どうりでさっぱり話が通じなかったわけだ。みんなに は相当変なヤツと思われたに違いない。まさに、<i class="idiom" lang="en">Oh! My God!</i>って感じだ。
  • 44.  重要性や強調という意味は持たないが、 キーワードといった、他の文章とは区別 したいテキストの範囲  用途を区別するclass属性を入れ、CSSなど でスタイルを調整するのが良い
  • 45. <p>当社が長年かけて研究し改良を重ねた自信作が<b class="product">きらきらカーワックス</b>です。<b class="product">きらきらカーワックス</b>は、サッと磨くだ けで、あなたあの愛車がピカピカになり、それ以降、水洗い 洗車だけで、それが6ヶ月も持続します。一度つかったら、 あなたはもう<b class="product">きらきらカーワークス</b> を手放せません!</p>
  • 46.  見た目しか表さずCSSで対処可能な要素  basefont, big, center, font, s, strike, tt, u  ユーザービリティやアクセシビリティに 悪影響を与える要素  frame, frameset, noframes  ほとんど使われていない要素  acronym, applet, isindex, dir
  • 47.  プレゼンテーショナルな属性  <hr>, <p>などのalign属性  <table>, <td>, <body>などの bgcolor属性  <hr>のnoshade属性とsize属性とwidth属性  <td>, <th>などののnowrap属性とvalign属性  代替方法があり不要となった属性  <a>のshape属性とcoords属性  <td>のscope属性
  • 48.  HTML5で要素のセマンティクスが強化  マークアップはセマンティクスのみ  プレゼンテーションはCSSで
  • 49.  アウトラインを意識したコンテンツ作り が重要  マークアップ・スキルだけでなく、文書 構成スキルも重要に
  • 50. 適切な要素を考えてください
  • 51. <header> <nav> <aside>
  • 52. <section> <article> <article>
  • 53. <article> <header> <section> <section> <footer>
  • 54. 有限会社futomi 代表取締役 羽田野 太巳(はたの ふとみ) http://www.futomi.com/ http://www.html5.jp/ http://twitter.com/futomi