0
有限会社futomi
代表取締役 羽田野 太巳(はたの ふとみ)
http://www.futomi.com/
http://www.html5.jp/
http://twitter.com/futomi
http://www.html5.jp/
http://www.amazon.co.jp/gp/product/4798025291/
   HTML5のマークアップの基礎
   IE対応とスタイリング
   セクションとアウトライン
   旧来の要素を見直す
   ワークショップ
   <!DOCTYPE html>
   標準モードでのレンダリング
   整形式XML
     XHTML5での利用も想定
   短くて覚えやすい
HTML5推奨
 <meta charset="UTF-8" />

下位互換もOK
 <meta http-equiv="Content-Type"
  content="text/html; charset=UTF-8" />
   ファイルの先頭から512バイト以内。
   よほど大きな理由がない限り"UTF-8"
   "Shift_JIS"や"EUC-JP"は非推奨
   "UTF-32"も非推奨
   charsetコンテンツ属性を持ったmeta要素...
   HTML5はXHTML的なマークアップもOK
     <input type="radio" checked> ○
     <input type="radio" checked="checked" /> ○


   XHT...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
</head>
<body>
<!-- コンテンツ -->
</body>...
   インライン・ブロックという分類は廃止
   プレゼンテーショナルな分類を排除
   文書構造を表す意味(セマンティクス)
    に基づいた分類に
   新たにコンテンツ・モデルと呼ばれる分
    類を定義
   要素の中に入...
   The W3C Markup Validation Service
     http://validator.w3.org/


   Validator.nu
     http://html5.validator.nu/
http://validator.w3.org/
http://html5.validator.nu/
   DOMツリーが期待通りに構成されない
   未知の要素はCSSが効かない
<header>
 <hgroup>
  <h1>HTML5.JP</h1>
  <h2>次世代 標準 HTML5 情報サイト</h2>
 </hgoup>
</header>
本来のDOM         IEのDOM

header         header
    └ hgroup   hgroup
        ├ h1   h1
        └h2    h2
               /hgr...
   JavaScriptによるハック
   document.createElement("要素名");
   これだけで解決
   appendChild()は不要
ie.js
(function () {
 var els = [
   'section', 'article', 'hgroup', 'header',
   'footer', 'nav','aside', ];
 for (var i=...
<!--[if IE]><script src="ie.js"></script><![endif]-->
   未知要素はすべてのブラウザーでインラ
    インとしてレンダリングされてしまう

   スタイルシートでブロックとして定義

    section, article, aside, nav { display: block; }
   section要素(セクション要素)
   article要素(セクション要素)
   aside要素(セクション要素)
   nav要素(セクション要素)
   hgroup要素
   header要素
   footer...
   章や節といった単位を表す(セクション)
   見出しと本文をまとめる

    <section>
     <h2>マレー空港に到着</h2>
     <p>名古屋からシンガポールを経由して、やっとマ
    レー空港に到着しまし...
   セクションを表す
   ブログの投稿、ニュースサイトの記事、
    ブログ記事へのコメント、掲示板の投稿
   そのコンテンツだけを切り出しても、独
    立したコンテンツとして再利用可能なも
    のに使う
<article>
<h1>モルディブ旅行記</h1>
<p>新婚旅行にモルディブに行ってきました。そこで起こった
出来事をまとめました。</p>
<section>
 <h2>マレ空港に到着</h2>
 <p>名古屋からシンガポールを経由して...
   ナビゲーションを形成するセクション
   サイト内のページリンクの集まり
    <nav>
    <ul>
     <li><a href="/">home</a></li>
     <li><a href="/tutoria...
   メインのコンテンツとは関連が薄く、切
    り離すことができるコンテンツを表すセ
    クション
   補足記事、サイドバー、広告、プル・
    クォート
<article>
<h1>モルディブ旅行記</h1>
<p>新婚旅行にモルディブに行ってきました。そ
こで起こった出来事をまとめました。</p>
...
<aside>
 <h2>モルディブとは</h2>
 <p>...</p>
</asid...
   見出しと、それに付随する小見出しや副
    題やキャッチフレーズをグループ化
   もっともレベルが高い見出し要素がアウ
    トラインの見出し
   それ以外の見出し要素はサブタイトル
   <h1>~<h6>しか入れてはい...
<section>
<hgroup>
 <h1>岐阜の鵜飼</h1>
 <h2>長良川の1300年の伝統</h2>
</hgroup>
<p>長良川の鵜飼いは、...</p>
...
</section>
   ページやセクションのヘッダー
<header>
<hgroup>
 <h1><a href="http://www.html5.jp/">HTML5.JP</a></h1>
 <h2>次世代 HTML 標準 HTML5 情報サイト</h...
   ページやセクションのフッター
<body>
...
<footer>
  <ul>
  <li><a href="/about/profile.html">サイト運営者情報</a></li>
    ...
  </ul>
  <p i...
   ドキュメントのコンテンツを、書籍の目
    次のように並べたもの
   HTML5では、ドキュメントからアウトラ
    インを決定するアルゴリズムが規定
   h1~h6要素、section, article, aside, n...
<h1>見出し1</h1>   見出し1
<p>段落</p>       ├見出し2
<h2>見出し2</h2>   └見出し3
<p>段落</p>
<h2>見出し3</h2>
<p>段落</h2>
<h1>見出し1</h1>       見出しレベルはセク
<p>段落</p>            ション要素のネス
<section>            ト・レベルと一致
 <h1>見出し2</h1>      すべて<h1>でも、...
   HTML5 Outliner
     http://gsnedders.html5.org/outliner/
                    <h1>HTML5</h1>
                    <p>HT...
   段落レベルの区切り
   セクション(章や節)の区切りではない
<section>
<h2>英語が話せなかった私とペラペラの彼</h2>
<p>私はまったく英語が話せなかった。もちろん、
まともに聞くこともできなかった。...</p>
...
<hr />
<p>彼は英国の大学に通っていた。そのため、彼は
...
   細目などの注釈を表す要素として再定義。
   免責条項、警告、法的制約、著作権表記、
    帰属、ライセンス要件など
<footer>
...
<p><small>&copy; copyright 2010 Futomi
Hatano</small></p>
</footer>
   重要性を表す要素として再定義
   強調を表す要素ではなくなった
   強調はem要素を使うべき
   strong要素の中にstrong要素を使うと、重
    要性が増す
<p><strong>注意:最近、第三者によるなりすましの
被害が急増しています。被害を受けた方のほどんどは、
容易に推測できるパスワードを設定されています。パ
スワードには<strong>ランダムな文字列を設定
</strong>するようにし...
   声、ムード、技術用語、船の名前など、
    印刷表現ではイタリック体で表されるよ
    うなテキストの範囲
   日本では、イタリック表記とする印刷慣
    例は少ない
   用途を区別するclass属性を入れ、CSSなど
 ...
<p>私は、<i class="thought">なんてバカなんだ!</i>と心の
中で叫んだ。みんなが、沈んだ船の話をしていたので、
てっきり<i class="ship">戦艦大和</i>の話と思っていたら、
どうやら<i class="s...
   重要性や強調という意味は持たないが、
    キーワードといった、他の文章とは区別
    したいテキストの範囲
   用途を区別するclass属性を入れ、CSSなど
    でスタイルを調整するのが良い
<p>当社が長年かけて研究し改良を重ねた自信作が<b
class="product">きらきらカーワックス</b>です。<b
class="product">きらきらカーワックス</b>は、サッと磨くだ
けで、あなたあの愛車がピカピカになり、そ...
   見た目しか表さずCSSで対処可能な要素
     basefont, big, center, font, s, strike, tt, u

   ユーザービリティやアクセシビリティに
    悪影響を与える要素
     fr...
   プレゼンテーショナルな属性
       <hr>, <p>などのalign属性
       <table>, <td>, <body>などの bgcolor属性
       <hr>のnoshade属性とsize属性とwid...
   HTML5で要素のセマンティクスが強化
   マークアップはセマンティクスのみ
   プレゼンテーションはCSSで
   アウトラインを意識したコンテンツ作り
    が重要
   マークアップ・スキルだけでなく、文書
    構成スキルも重要に
適切な要素を考えてください
<header>




<nav>              <aside>
<section>



<article>


<article>
<article>
            <header>



            <section>

            <section>

            <footer>
有限会社futomi
代表取締役 羽田野 太巳(はたの ふとみ)
    http://www.futomi.com/
      http://www.html5.jp/
    http://twitter.com/futomi
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
Upcoming SlideShare
Loading in...5
×

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

61,006

Published on

SwapSkills2010 vol2
羽田野太巳

Published in: Education
0 Comments
58 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
61,006
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
256
Comments
0
Likes
58
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×