Weitere ähnliche Inhalte
Ähnlich wie 今からハジメるHTML5マークアップ (20)
今からハジメるHTML5マークアップ
- 4. HTML5のマークアップの基礎
IE対応とスタイリング
セクションとアウトライン
旧来の要素を見直す
ワークショップ
- 6. <!DOCTYPE html>
標準モードでのレンダリング
整形式XML
XHTML5での利用も想定
短くて覚えやすい
- 8. ファイルの先頭から512バイト以内。
よほど大きな理由がない限り"UTF-8"
"Shift_JIS"や"EUC-JP"は非推奨
"UTF-32"も非推奨
charsetコンテンツ属性を持ったmeta要素
は1つだけ
- 9. HTML5はXHTML的なマークアップもOK
<input type="radio" checked> ○
<input type="radio" checked="checked" /> ○
XHTML的に書いても、Content-Type が
text/html である以上、XHTMLではなく、
HTML
- 11. インライン・ブロックという分類は廃止
プレゼンテーショナルな分類を排除
文書構造を表す意味(セマンティクス)
に基づいた分類に
新たにコンテンツ・モデルと呼ばれる分
類を定義
要素の中に入れても良いコンテンツを、
コンテンツ・モデルを使って定義
- 13. The W3C Markup Validation Service
http://validator.w3.org/
Validator.nu
http://html5.validator.nu/
- 17. DOMツリーが期待通りに構成されない
未知の要素はCSSが効かない
- 18. <header>
<hgroup>
<h1>HTML5.JP</h1>
<h2>次世代 標準 HTML5 情報サイト</h2>
</hgoup>
</header>
- 19. 本来のDOM IEのDOM
header header
└ hgroup hgroup
├ h1 h1
└h2 h2
/hgroup
/header
- 20. JavaScriptによるハック
document.createElement("要素名");
これだけで解決
appendChild()は不要
- 21. ie.js
(function () {
var els = [
'section', 'article', 'hgroup', 'header',
'footer', 'nav','aside', ];
for (var i=0; i<els.length; i++ ) {
document.createElement(els[i]);
}
})();
- 23. 未知要素はすべてのブラウザーでインラ
インとしてレンダリングされてしまう
スタイルシートでブロックとして定義
section, article, aside, nav { display: block; }
- 25. section要素(セクション要素)
article要素(セクション要素)
aside要素(セクション要素)
nav要素(セクション要素)
hgroup要素
header要素
footer要素
- 26. 章や節といった単位を表す(セクション)
見出しと本文をまとめる
<section>
<h2>マレー空港に到着</h2>
<p>名古屋からシンガポールを経由して、やっとマ
レー空港に到着しました。</p>
...
</section>
- 27. セクションを表す
ブログの投稿、ニュースサイトの記事、
ブログ記事へのコメント、掲示板の投稿
そのコンテンツだけを切り出しても、独
立したコンテンツとして再利用可能なも
のに使う
- 29. ナビゲーションを形成するセクション
サイト内のページリンクの集まり
<nav>
<ul>
<li><a href="/">home</a></li>
<li><a href="/tutorial/">チュートリアル</a></li>
...
</ul>
</nav>
- 30. メインのコンテンツとは関連が薄く、切
り離すことができるコンテンツを表すセ
クション
補足記事、サイドバー、広告、プル・
クォート
- 32. 見出しと、それに付随する小見出しや副
題やキャッチフレーズをグループ化
もっともレベルが高い見出し要素がアウ
トラインの見出し
それ以外の見出し要素はサブタイトル
<h1>~<h6>しか入れてはいけない
- 34. ページやセクションのヘッダー
<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>
- 35. ページやセクションのフッター
<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>
- 37. ドキュメントのコンテンツを、書籍の目
次のように並べたもの
HTML5では、ドキュメントからアウトラ
インを決定するアルゴリズムが規定
h1~h6要素、section, article, aside, nav要素
の入れ子関係に従って決まる
- 38. <h1>見出し1</h1> 見出し1
<p>段落</p> ├見出し2
<h2>見出し2</h2> └見出し3
<p>段落</p>
<h2>見出し3</h2>
<p>段落</h2>
- 39. <h1>見出し1</h1> 見出しレベルはセク
<p>段落</p> ション要素のネス
<section> ト・レベルと一致
<h1>見出し2</h1> すべて<h1>でも、期
<p>段落</p>
待通りのアウトライ
</section>
<section> ンに
<h1>見出し3</h1>
<p>段落</h2>
</section>
- 40. 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>
- 42. 段落レベルの区切り
セクション(章や節)の区切りではない
- 44. 細目などの注釈を表す要素として再定義。
免責条項、警告、法的制約、著作権表記、
帰属、ライセンス要件など
- 46. 重要性を表す要素として再定義
強調を表す要素ではなくなった
強調はem要素を使うべき
strong要素の中にstrong要素を使うと、重
要性が増す
- 48. 声、ムード、技術用語、船の名前など、
印刷表現ではイタリック体で表されるよ
うなテキストの範囲
日本では、イタリック表記とする印刷慣
例は少ない
用途を区別するclass属性を入れ、CSSなど
でスタイルを調整するのが良い
- 50. 重要性や強調という意味は持たないが、
キーワードといった、他の文章とは区別
したいテキストの範囲
用途を区別するclass属性を入れ、CSSなど
でスタイルを調整するのが良い
- 52. 見た目しか表さずCSSで対処可能な要素
basefont, big, center, font, s, strike, tt, u
ユーザービリティやアクセシビリティに
悪影響を与える要素
frame, frameset, noframes
ほとんど使われていない要素
acronym, applet, isindex, dir
- 53. プレゼンテーショナルな属性
<hr>, <p>などのalign属性
<table>, <td>, <body>などの bgcolor属性
<hr>のnoshade属性とsize属性とwidth属性
<td>, <th>などののnowrap属性とvalign属性
代替方法があり不要となった属性
<a>のshape属性とcoords属性
<td>のscope属性
- 55. HTML5で要素のセマンティクスが強化
マークアップはセマンティクスのみ
プレゼンテーションはCSSで
- 56. アウトラインを意識したコンテンツ作り
が重要
マークアップ・スキルだけでなく、文書
構成スキルも重要に
- 63. <article>
<header>
<section>
<section>
<footer>