« ブラウザ | トップページ | IE8 max-height 横スクロールバー »

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 &copy; 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
Firefox_2

IE8、IE7、IE6
Ie7_2

|

« ブラウザ | トップページ | IE8 max-height 横スクロールバー »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: HTML5:

« ブラウザ | トップページ | IE8 max-height 横スクロールバー »