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

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

on

  • 54,208 views

SwapSkills2010 vol2

SwapSkills2010 vol2
羽田野太巳

Statistics

Views

Total Views
54,208
Views on SlideShare
53,326
Embed Views
882

Actions

Likes
51
Downloads
236
Comments
0

19 Embeds 882

http://swapskills.info 261
http://busystem.com 167
http://m022.mm.aprico.fujitsu.com 89
http://weblevel1.hatenablog.jp 80
http://ameblo.jp 80
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 4
http://blog.ameba.jp 3
http://itw.pcworks.info 2
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 有限会社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要素 は1つだけ
  •  HTML5はXHTML的なマークアップもOK  <input type="radio" checked> ○  <input type="radio" checked="checked" /> ○  XHTML的に書いても、Content-Type が text/html である以上、XHTMLではなく、 HTML
  • <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>タイトル</title> </head> <body> <!-- コンテンツ --> </body> </html>
  •  インライン・ブロックという分類は廃止  プレゼンテーショナルな分類を排除  文書構造を表す意味(セマンティクス) に基づいた分類に  新たにコンテンツ・モデルと呼ばれる分 類を定義  要素の中に入れても良いコンテンツを、 コンテンツ・モデルを使って定義
  •  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 /hgroup /header
  •  JavaScriptによるハック  document.createElement("要素名");  これだけで解決  appendChild()は不要
  • ie.js (function () { var els = [ 'section', 'article', 'hgroup', 'header', 'footer', 'nav','aside', ]; for (var i=0; i<els.length; i++ ) { document.createElement(els[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>名古屋からシンガポールを経由して、やっとマ レー空港に到着しました。</p> ... </section>
  •  セクションを表す  ブログの投稿、ニュースサイトの記事、 ブログ記事へのコメント、掲示板の投稿  そのコンテンツだけを切り出しても、独 立したコンテンツとして再利用可能なも のに使う
  • <article> <h1>モルディブ旅行記</h1> <p>新婚旅行にモルディブに行ってきました。そこで起こった 出来事をまとめました。</p> <section> <h2>マレ空港に到着</h2> <p>名古屋からシンガポールを経由して、やっとマレー空港に 到着しました。</p> ... </section> <section> <h2>ヴァビンファル島</h2> <p>この島に一週間滞在しました。...</p> ... </section> </article>
  •  ナビゲーションを形成するセクション  サイト内のページリンクの集まり <nav> <ul> <li><a href="/">home</a></li> <li><a href="/tutorial/">チュートリアル</a></li> ... </ul> </nav>
  •  メインのコンテンツとは関連が薄く、切 り離すことができるコンテンツを表すセ クション  補足記事、サイドバー、広告、プル・ クォート
  • <article> <h1>モルディブ旅行記</h1> <p>新婚旅行にモルディブに行ってきました。そ こで起こった出来事をまとめました。</p> ... <aside> <h2>モルディブとは</h2> <p>...</p> </aside> </article>
  •  見出しと、それに付随する小見出しや副 題やキャッチフレーズをグループ化  もっともレベルが高い見出し要素がアウ トラインの見出し  それ以外の見出し要素はサブタイトル  <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 情報サイト</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>
  •  ページやセクションのフッター <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>
  •  ドキュメントのコンテンツを、書籍の目 次のように並べたもの  HTML5では、ドキュメントからアウトラ インを決定するアルゴリズムが規定  h1~h6要素、section, article, aside, nav要素 の入れ子関係に従って決まる
  • <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>でも、期 <p>段落</p> 待通りのアウトライ </section> <section> ンに <h1>見出し3</h1> <p>段落</h2> </section>
  •  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>
  •  段落レベルの区切り  セクション(章や節)の区切りではない
  • <section> <h2>英語が話せなかった私とペラペラの彼</h2> <p>私はまったく英語が話せなかった。もちろん、 まともに聞くこともできなかった。...</p> ... <hr /> <p>彼は英国の大学に通っていた。そのため、彼は 英語がペラペラだ。...</p> ... </section>
  •  細目などの注釈を表す要素として再定義。  免責条項、警告、法的制約、著作権表記、 帰属、ライセンス要件など
  • <footer> ... <p><small>&copy; copyright 2010 Futomi Hatano</small></p> </footer>
  •  重要性を表す要素として再定義  強調を表す要素ではなくなった  強調はem要素を使うべき  strong要素の中にstrong要素を使うと、重 要性が増す
  • <p><strong>注意:最近、第三者によるなりすましの 被害が急増しています。被害を受けた方のほどんどは、 容易に推測できるパスワードを設定されています。パ スワードには<strong>ランダムな文字列を設定 </strong>するようにしてください。また、<strong>定 期的にパスワードを変更</strong>して頂きますよう、 お願いいたします。</strong></p>
  •  声、ムード、技術用語、船の名前など、 印刷表現ではイタリック体で表されるよ うなテキストの範囲  日本では、イタリック表記とする印刷慣 例は少ない  用途を区別するclass属性を入れ、CSSなど でスタイルを調整するのが良い
  • <p>私は、<i class="thought">なんてバカなんだ!</i>と心の 中で叫んだ。みんなが、沈んだ船の話をしていたので、 てっきり<i class="ship">戦艦大和</i>の話と思っていたら、 どうやら<i class="ship">タイタニック号</i>の話だったらし い。どうりでさっぱり話が通じなかったわけだ。みんなに は相当変なヤツと思われたに違いない。まさに、<i class="idiom" lang="en">Oh! My God!</i>って感じだ。
  •  重要性や強調という意味は持たないが、 キーワードといった、他の文章とは区別 したいテキストの範囲  用途を区別するclass属性を入れ、CSSなど でスタイルを調整するのが良い
  • <p>当社が長年かけて研究し改良を重ねた自信作が<b class="product">きらきらカーワックス</b>です。<b class="product">きらきらカーワックス</b>は、サッと磨くだ けで、あなたあの愛車がピカピカになり、それ以降、水洗い 洗車だけで、それが6ヶ月も持続します。一度つかったら、 あなたはもう<b class="product">きらきらカーワークス</b> を手放せません!</p>
  •  見た目しか表さずCSSで対処可能な要素  basefont, big, center, font, s, strike, tt, u  ユーザービリティやアクセシビリティに 悪影響を与える要素  frame, frameset, noframes  ほとんど使われていない要素  acronym, applet, isindex, dir
  •  プレゼンテーショナルな属性  <hr>, <p>などのalign属性  <table>, <td>, <body>などの bgcolor属性  <hr>のnoshade属性とsize属性とwidth属性  <td>, <th>などののnowrap属性とvalign属性  代替方法があり不要となった属性  <a>のshape属性とcoords属性  <td>のscope属性
  •  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