今からハジメるHTML5マークアップ
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 56,151 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
56,151
On Slideshare
55,260
From Embeds
891
Number of Embeds
19

Actions

Shares
Downloads
239
Comments
0
Likes
52

Embeds 891

http://swapskills.info 262
http://busystem.com 167
http://m022.mm.aprico.fujitsu.com 90
http://weblevel1.hatenablog.jp 84
http://ameblo.jp 81
http://deaclim.com 76
http://max30.ti-da.net 47
http://blog.noppoman.com 40
http://www.slideshare.net 13
http://paper.li 8
https://twitter.com 6
http://outsourcing.makepo.jp 5
http://itw.pcworks.info 3
http://blog.ameba.jp 3
http://webcache.googleusercontent.com 2
http://s.deeeki.com 1
http://twitter.com 1
https://www.chatwork.com 1
http://127.0.0.1 1

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