Downloaded 365 times
Uploaded byFutomi Hatano
14,214 views
HTML5マークアップの心得と作法
HTML5のマークアップの特徴を一言で表すとすれば「セマンティクス」。それ故に、HTML5では文脈に合わせてマークアップしなければいけません。もはや、マークアップは単純作業ではなくクリエイティブなものになっているのです。マークアップにも心得と作法がよりいっそう重要になってきています。本セッションでは、HTML5仕様ではマークアップに何を求めているのか（心得）、そして、我々はどのようにマークアップをすべきか（作法）、について具体的に解説します。
Recommended
More Related Content
What's hot
Viewers also liked
Similar to HTML5マークアップの心得と作法
More from Futomi Hatano
HTML5マークアップの心得と作法
- 1.Chrome + HTML5 ConferenceHTML5マークアップの心得と作法 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/