より現実的なHTML5+WAI-ARIA
過去二回の努力
自分が納得できるゴールは見つかっていないところに、プロジェクトは走りだす。このままじゃ泥船決定なので今まで以上にがんばる。
あたらしい情報
http://www.w3.org/TR/wai-aria/とレイアウトで使うランドマークのrole属性【アクセシビリティ】【WAI-ARIA】 - E-riverstyle Vanguard | CSSやXHTML,Javascriptやweb製作に関する事を紹介というのを見た。
（余談：さいきんトラックバックって奴の使い方を忘れかけている人が多いと思う）
いきなり検証
E-riverstyle Vanguardさんのhttp://blog.e-riverstyle.com/2011/01/26/image/blog1101251.gifを念頭に始めます。
<body role="application"> <article role="document"> <header id="banner" role="banner"> ヘッダー </header> <nav id="globalnavi" role="navigation"> ぐろーばるなびげーしょん </nav> <section id="main" role="main"> <nav id="breadcrumbs" role="navigation"> パンくず </nav> メイン </section> <aside id="complementary" role="complementary"> サブメニュー </aside> <footer id="contentinfo" role="contentinfo"> フッター </footer> </article> </body>
mainの所はsectionなのかdivなのか？ここにだけdivの登場はカッコ悪い感じがするのでsection採用！
idを使うのはCSSで使う予定のため。うーん完全なる入れ子構造になったら不要かもしれない。
bodyの他も考える
はじめてのHTML5 第1回『HTML5の基本の書き方を覚える』を参考にする
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サイトのタイトル</title> <link rel="stylesheet" type="text/css" href="css/html5reset.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> //ここにうえの奴をいれる </body> </html>
html5resetをみると長い期間をかけてバージョンアップしているっぽい。2011/02/08の時点では1.6.1（2010/9/17）が最新になる。
あとはUTF8を意識すること。＞自分
スタイルシートの切り替え
SWITCH STYLESHEETS WITH JQUERYをつかう。使い方はスタイルシートを切り替えるjQueryプラグイン「Switch stylesheets with jQuery」を参考にする。
こんな感じのCSS構成にしてstyle.cssに全てに共通のcssを書く、それぞれ用のCSSを書く。desktopが規定値にする。
<link rel="stylesheet" href="common/css/style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="common/css/style_desktop.css" title="style_desktop" type="text/css" media="screen" /> <link rel="alternate stylesheet" href="common/css/style_mobile.css" title="style_mobile" type="text/css" media="screen" /> <link rel="alternate stylesheet" href="common/css/style_print.css" title="style_print" type="text/css" media="screen" />
jQueryを使うので召喚魔法を書く
<!--Google AJAX Feed API http://www.ajaxtower.jp/googleajaxfeed/ -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA9BHquyX5cAMhD7r3X1Y9UxQ-q_YF59VMleFrVRQvt1o_ZrnckBSrz0Xw-wzDsGENBEKcT55BU5g2aA"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
<script type="text/javascript" src="common/js/styleswitch.js"></script>切り替えはheaderのなかに書く
<div id="css_view"> <ul> <li class="label">Views:</li> <li><a href="#" rel="style_desktop" class="styleswitch" title="Desktop Style">desktop</a></li> <li><a href="#" rel="style_mobile" class="styleswitch" title="Mobile Style">mobile</a></li> <li><a href="#" rel="style_print" class="styleswitch" title="Mobile Print">print</a></li> </ul> </div>
がったい
すべてをまとめてみた。だらだらになってしまったが後悔していない
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
<!--りせっと-->
<link rel="stylesheet" type="text/css" href="css/html5reset.css" />
<!--共通CSS-->
<link rel="stylesheet" href="common/css/style.css" type="text/css" media="screen" />
<!--個別CSS-->
<link rel="stylesheet" href="common/css/style_desktop.css" title="style_desktop" type="text/css" media="screen" />
<link rel="alternate stylesheet" href="common/css/style_mobile.css" title="style_mobile" type="text/css" media="screen" />
<link rel="alternate stylesheet" href="common/css/style_print.css" title="style_print" type="text/css" media="screen" />
<!--IE9未満対策-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--Google AJAX Feed API http://www.ajaxtower.jp/googleajaxfeed/ -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA9BHquyX5cAMhD7r3X1Y9UxQ-q_YF59VMleFrVRQvt1o_ZrnckBSrz0Xw-wzDsGENBEKcT55BU5g2aA"></script>
<!--jquery召還魔法-->
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
<!--SWITCH STYLESHEETS WITH JQUERY召還-->
<script type="text/javascript" src="common/js/styleswitch.js"></script>
</head>
<body role="application">
<article role="document">
<header id="banner" role="banner">
ヘッダー
<!--スタイル切替-->
<div id="css_view">
<ul>
<li class="label">Views:</li>
<li><a href="#" rel="style_desktop" class="styleswitch" title="Desktop Style">desktop</a></li>
<li><a href="#" rel="style_mobile" class="styleswitch" title="Mobile Style">mobile</a></li>
<li><a href="#" rel="style_print" class="styleswitch" title="Mobile Print">print</a></li>
</ul>
</div>
</header>
<nav id="globalnavi" role="navigation">
ぐろーばるなびげーしょん
</nav>
<div id="container">
<section id="main" role="main">
<nav id="breadcrumbs" role="navigation">
パンくず
</nav>
メイン
</section>
</div>
<aside id="complementary" role="complementary">
サブメニュー
</aside>
<footer id="contentinfo" role="contentinfo">
フッター
</footer>
</article>
</body>
</html>
リキッドレイアウトにしたいのでリキッドレイアウトの最大横幅を固定する-minmax.jsのCSSを参考にする
