Downloaded 365 times
Uploaded byFutomi Hatano
HTML5マークアップの心得と作法
HTML5のマークアップの特徴を一言で表すとすれば「セマンティクス」。それ故に、HTML5では文脈に合わせてマークアップしなければいけません。もはや、マークアップは単純作業ではなくクリエイティブなものになっているのです。マークアップにも心得と作法がよりいっそう重要になってきています。本セッションでは、HTML5仕様ではマークアップに何を求めているのか（心得）、そして、我々はどのようにマークアップをすべきか（作法）、について具体的に解説します。
More Related Content
HTML5マークアップの心得と作法
- 1. Chrome + HTML5 Conference HTML5マークアップの心得と作法 2011年8月21日 有限会社 futomi 代表取締役 羽田野 太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/
- 2.
- 3.
- 4.
- 5. HTML5 = Markup+ API
- 6. アジェンダ 初心 過去の知識が正しいとは限らない 心得 常に心がけていなければならないこと 作法 清く正しく美しく
- 7.
- 8.
- 9. 豊富なボキャブラリー 108個の要素 30個が新たに追加 24個がHTML5で新たに開発
- 10. たったの108個 • 新要素を学ぶだけでは不足 • すべての要素を理解すべし 正しいセマンティクスの理解 <strong>HTML5では旧要素も再定義</strong>
- 11. 旧要素も覚えてますか？ <blockquote>, <q>, <cite>,<dfn>, <abbr>, <var>, <samp>, <kbd> <caption>, <col>, <colgroup>, <thead>, <tbody>, <tfoot> <legend>, <label>
- 12. 再定義された要素 <small> 細目（小さいとは限らない） <dl> <i> <s> <u> 固有名詞・スペルミス（下線とは限らない） <cite> <hr>
- 13. 名前と意味が違う <small> 細目（小さいとは限らない） <dl> 記述リスト（定義リストとは限らない） <i> 声や思考など（斜体とは限らない） <s> 無関係（取り消し線とは限らない） <u> 固有名詞・スペルミス（下線とは限らない） <cite> 作品名（人名には使えない） <hr> 段落レベルの変わり目（罫線とは限らない）
- 14. <small> 細目 小さい文字という役割は廃止 見た目はCSSで
- 15.
- 16. <p> <strong> <small>重要な細目</small> </strong> </p>
- 17.
- 18.
- 19. <s> もう無関係、もう正確でない 取り消し線という役割は廃止 見た目はCSSで
- 20.
- 21. <u> 固有名詞またはスペルミス 下線という役割は廃止 見た目はCSSで
- 22.
- 23.
- 24.
- 25. セマンティクスが強化 ウェブにもユニバーサル・アクセス Apple VoiceOver NVDA
- 26. 文書構造（HTML4） <div>ページヘッダー</div> <div> <div> <div> サイド ナビゲー 記事 バー ション </div > 広告 </div> </div> <div>ページフッター</div>
- 27. 文書構造(HTML5) <header>ページヘッダー</header> <aside > <nav> <article> サイド ナビゲー 記事 バー ション </article > 広告 </nav> </asid e> <footer>ページフッター</footer>
- 28. 文書構造(HTML5) <header>ページヘッダー</header> メイン・コンテンツを 機械的に抽出できる <aside> <nav> <article> サイド ナビゲーショ 記事 バー ン </article > 広告 </nav> </aside> <footer>ページフッター</footer>
- 29. デフォルト・スタイル • デフォルト・スタイルにだまされるな • 日本語に適しているわけではない •読み手に違和感がないスタイルを使うべし
- 30. 英語で使う<i> Alice's Adventures in Wonderland by Lewis Carroll http://www.gutenberg.org/ebooks/11
- 31. 中国語で使う<u> http://en.wikipedia.org/wiki/Proper_name_mark
- 32. <p>平城遷都1300年祭のマスコットキャラクター は<u>せんとくん</u>です。</p> <p><i>ねぇ、かわいいとおもう？</i></p> u { text-decoration:none; } i { font-style: normal; } u:before { content: '「'; } i:before { content: '「'; } u:after { content: '」';} i:after { content: '」';} 平城遷都1300年祭のマスコットキャラクター は「せんとくん」です。 「ねぇ、かわいいとおもう？」
- 33. 見た目を基準にしない スタイルを基準に要素を選んでいませんか？ 見た目はすべてCSSで解決すべし セマンティクスを基準に要素を選択しましょう
- 34. 作法 清く正しく美しく http://www.flickr.com/photos/jenny_b_lopez/1428512172/
- 35. 間違ったセマンティクス <div> <b>記事の見出し</b> <blockquote> <b>小見出し1</b> <blockquote> 本文 文法は正しい </blockquote> </blockquote> セマンティクスは誤り <hr> <blockquote> <b>小見出し2</b> <blockquote> 本文 </blockquote> </blockquote> </div>
- 36. 間違ったセマンティクス 正しいセマンティクス <div> <article> <b>記事の見出し</b> <h1>記事の見出し</h1> <blockquote> <section> <b>小見出し1</b> <h2>小見出し1</h2> <blockquote> <div> 本文 <p>本文</p> </blockquote> </div> </blockquote> </section> <hr> <blockquote> <section> <b>小見出し2</b> <h2>小見出し2</h2> <blockquote> <div> 本文 <p>本文</p> </blockquote> </div> </blockquote> </section> </div> </article>
- 37. スタイルと文書構造 <section> <section> <h1>見出し <h1>見出し <section>本文 <div>本文 文法は正しいが スタイル目的なら <section>の乱用 <div> 不適切なアウトライン
- 38. 裸のテキストと段落 <section> <section> 段落。<br> <h1>見出し</h1> 段落。<br> <p>段落。</p> 段落。<br> <p>段落。</p> <p>段落。</p> 手抜き セクションには見出しを だらしない 裸のテキストは段落 改行と段落を区別
- 39. コンテンツの存在意義 <article> <article> ブログ記事 ブログ記事 <section> <aside> <article>コメント <article>コメント <article>コメント <article>コメント コメントの重要度に違い
- 40. 文法があってればOK? 適合性 conformance 妥当性 validity
- 41. 適合性を目指せ 適合性 conformance 妥当性 文法チェッカーでは validity 判定できない領域が HTML5で拡大
- 42. Chrome + HTML5 Conference ご清聴ありがとうございました 有限会社 futomi 代表取締役 羽田野 太巳 http://www.html5.jp/ http://www.futomi.com/ http://twitter.com/futomi/