HTML5
巷で噂されているHTML5で試しにページをコーディングしてみた。
確認ブラウザはIE8（英語版）、IE7、IE6、Firefox3.6.3(Win/Mac)、Safari4.0.5(Win/Mac)、Opera(Win10.51/Mac10.10)
9つ。
ソースは下記の通り。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5-Xeno-Designworks｜トップ</title>
<meta name="description" content="HTML5でコーディングしてみました。" />
<meta name="keywords" content="HTML5" />
<link rel="stylesheet" type="text/css" href="../resources/css/top/import.css" media="all">
</head>
<body>
<div id="totop" class="px-ct">
<header>
<div class="headerbox clearfix">
<h1><img src="resources/images/logo.gif" width="241" height="17" alt="XENO DESIGNWORKS" /></h1>
<form action="./" method="post">
<p class="seacrhbox"><input type="text" value="" class="seacrh"></p>
</form>
</div>
<nav>
<ul class="clearfix">
<li>
<a href="#" title="ホーム" class="home">
<span>ホーム</span>
</a>
</li>
<li>
<a href="#" title="会社案内" class="company">
<span>会社案内</span>
</a>
</li>
<li>
<a href="#" title="プロダクト" class="product">
<span>プロダクト</span>
</a>
</li>
<li>
<a href="#" title="サービス" class="service">
<span>サービス</span>
</a>
</li>
<li>
<a href="#" title="実績紹介" class="tecnology">
<span>技術情報</span>
</a>
</li>
<li>
<a href="#" title="実績紹介" class="result">
<span>実績紹介</span>
</a>
</li>
<li>
<a href="#" title="採用情報" class="recruit">
<span>採用情報</span>
</a>
</li>
</ul>
</nav>
</header>
<div class="wrapper clearfix">
<section class="west">
<h2 class="ttl">NEWS</h2>
<section>
<dl>
<dt>2010年</dt>
<dd>
<a href="#">ニュースニュースニュースニュースニュースニュースニュースニュースニュースニュース</a>
</dd>
</dl>
</section>
</section>
<aside class="east">
<ul>
<li>
<a href="#" title=""><img src="resources/images/top/bannwer_r5_c1.png" width="200" height="40" alt="開発事例" /></a>
</li>
<li>
<a href="#" title=""><img src="resources/images/top/bannwer_r7_c1.png" width="200" height="42" alt="ご相談お見積もりはこちら" /></a>
</li>
</ul>
</aside>
</div>
</div>
<footer>
<address>Copyright © 2010 Xeno.CO.,LTD All rights Reserved.</address>
</footer>
</body>
</html>
コーディングしてみて便利だなあと思ったのは、今まで、<div id="header">、<div id="footer">といった感じでheaderとフッターを
区切っていたのが、HTML5だと<header>や<footer>といったタグが用意されていること。
ただ、これらのタグはブロック要素として認識しないようで、「display: block;」としてやる。
まあ、header,footer,nav,section,aside {display: block;}と一括で指定すればいいかと。
今回のサンプルでHTML5のタグを使用したのは以下の5つ。
・header(ヘッダであることを示す。)
・footer(フッタであることを示す。)
・nav(ナビゲーションであることを示す。)
・section(一つのセクションであることを示す。)
・aside(余談であることを示す。)
「section」と少し似た要素で「article」というタグがあるが今回は使用しなかった。
この二つの違いは、「section」は「意味や機能のまとまりをグループ化したもので、
ウェブページ内のセクションとしては、例えば 導入部分、新着情報、連絡先など。」、
「article」は「内容が単体で完結するセクションであることを示す際に使用し。
例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなど」らしい。
ブラウザ確認してわかったことはとIE7、IE6はHTML5の新要素
（header、footer、nav、section、asideなど）対応していない（CSSが適用されていなかった）ということ。
IE8もCSSが適用されていなかったが調べて見るとIE8はサポートしているらしい。
これはVirtual PC内のIE8(英語版だからだろうか？)のせいだろうか。
次はIE8の日本語版で見てみよう。
調べた結果、IEに新要素を認識させるためには、javascriptを使用しなければならないようだ。
機会があれば適用させてみようと思います。
追記
Firefox3.6.3
IE8、IE7、IE6
| 固定リンク
| コメント (0)
| トラックバック (0)
最近のコメント