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

有限会社futomi
代表取締役羽田野太巳（はたのふとみ）
http://www.futomi.com/
http://www.html5.jp/
http://twitter.com/futomi

http://www.amazon.co.jp/gp/product/4798025291/

 HTML5のマークアップの基礎
 IE対応とスタイリング
 セクションとアウトライン
 旧来の要素を見直す
 ワークショップ

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

 <!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/

 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]);
}
})();

 未知要素はすべてのブラウザーでインラ
インとしてレンダリングされてしまう

 スタイルシートでブロックとして定義

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 © 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>  見出しレベルはセク
<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>

 細目などの注釈を表す要素として再定義。
 免責条項、警告、法的制約、著作権表記、
帰属、ライセンス要件など

 重要性を表す要素として再定義
 強調を表す要素ではなくなった
 強調は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で

 アウトラインを意識したコンテンツ作り
が重要
 マークアップ・スキルだけでなく、文書
構成スキルも重要に

適切な要素を考えてください

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

Recommended

More Related Content

What's hot (20)

Similar to 今からハジメるHTML5マークアップ (20)

More from SwapSkills (12)

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

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.