メインコンテンツ部分のコーディング

<hgroup class="pageTitle">hgroup…h1～h6などを入れられる、見出しをグループ化する要素。タイトルとサブタイトルが連続して登場する場合にはアウトラインに影響してしまうので、それを避けるために必要。見出しが連続してしまうとそこで新たなセクションがはじまってしまうことになってしまうが、文章のいととしてはh3要素の見出しはあくまでサブタイトルであり、セクションは変わっていない。このような場合にhgroupを使うと、hgroup無いでもっともレベルの高い見出しのみがアウトラインにも採用されるようになる。

　<h2 class="title">Sample Site Blog</h2>

　<h3 class="subTitle">For Web Designing2010</h3>

</hgroup>

　<article class="entry">article…それだけで完結しているセクションを示す新要素。

　　　<time datetime="2011-01-07" pubdate="pubdate">2011年01月07日</time>　<article class="entry">time…時刻や日付を表す要素。コンピュータが認識できる形で記述する必要がある。YYYY-MM-DDフォーマットなど。

　　　</header>

　　　<section>section…article要素とあわせて、HTML5コーディングに重要なポイントであるセクショとアウトラインに関わる内容。

　　　<h3>テストについて</h3>

　　　<p>テストといえば…<p>

　　　</section>

　　　<footer class="articleFooter">footer…新要素。

　　　　<ul>

　　　　　<li><a href="/.../...">comment</a></li>

　　　　　<li><a href="/.../...">TrackBack</a></li>

　　　　</ul>

　　　</footer>

　　</article>

　</article class="entry">

...

</div>　　　　　

ヘッダー

<header id="test">　headerという要素が新要素。

　　<li><a href="/docs">Sample Siteについて</a></li>

　</ul>

　<nav id="globalNav">　navという要素が新要素。主要なことなど。

　<ul>

　　<li><a href="/about/">About</a></li>　　

　　<li><a href="/contact/">Contact</a></li>　　

　</ul>

</nav>

</header>

HTML5の基本セット

DOCTYPE宣言
<!DOCTYPE html> IE6でも問題が発生しない。

html要素
<html lang="ja">

meta要素による文字コードの指定
<meta charset="UTF-8" />

script要素
<script src="http://example.com/html5.js "></script>

link要素
<link rel="stylesheet" href="site.css" />

基本的なHTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
　<meta charset="UTF-8" />
　<title></title>
　<meta name="keywords" content="" />
　<meta name="description" content="" />
　
　<link rel="stylesheet" href="site.css" />
</head>

</body>
</html>

という条件分岐コメント部分でIE対応のスクリプト（html5.js）を読み込んでいる。
IEは未知の要素（ここではHTML5の新要素）に対してDOMをうまく構成できないので手動で対応する必要がある。
具体的には、対象の要素にJavaScriptで「Document.createElement()」するだけでよい。

Hijax(ハイジャックス)

プログレッシブエンハンスメントにおけるAjaxやJavaScriptのありかたを平易に表現すると

・Ajaxは（JavaScriptが使えるユーザーに対しては）より良いユーザーエクスペリエンス を提供するもの。
・Ajaxによるユーザーインターフェースは、「無くても困らないけどあれば便利」なもの。

ちなみに、プログレッシブエンハンスメントの概念に準じたAjaxの使いかたを、

Hijax（ハイジャックス）と呼ぶことがある。

英国のWeb開発者、Jeremy Keith（ジェレミー・キース）氏が名付けた表現であり、

「ハイジャック（飛行機の乗っ取り）」と「Ajax」をかけた造語。

これは、本来の姿（伝統的な仕組みによる、サーバーとのリクエストのやりとり）はそのまま残しておいて、

より快適なユーザーエクスペリエンスを享受できる環境にあるユーザーに対しては、

Ajaxを施すことによって、その伝統的な仕組みを「乗っ取る」

（サーバーとのやりとりが発生するのをブロックして、

ユーザーの使用しているブラウザの中だけで、

よりスムーズなインタラクションを実現する）という考えかたである。

グレースフルデグレデーション

リッチなインタラクションを前提としていて、

下位の閲覧環境（パソコン用のモダンブラウザ以外の環境、

たとえば携帯機器やテキストブラウザ、支援技術など）に対しては、

使えるインタラクションを減らしてゆく、という考えかた。

現実世界でたとえるならば「バリアフリー」に近い概念と言えるかもしれない。

これに対して、プログレッシブエンハンスメントは、

最初から様々な環境に配慮することを前提としているので、

その意味では、グレースフルデグレデーションを「バリアフリー」にたとえるならば、

プログレッシブエンハンスメントは「ユニバーサルデザイン」に近い概念と言えそうである。

<< 前ページ次ページ >>

choco

Design,Photo

メインコンテンツ部分のコーディング

ヘッダー

HTML5の基本セット

Hijax(ハイジャックス)

グレースフルデグレデーション