CDPをHTML5として運用する

up:

実践

  1. HTMLファイルを開き、1行目から<html lang="ja">直前までのドキュメント宣言を変更します
    変更前
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="ja">
    <head>
    変更後
    <!DOCTYPE html>
    <html lang="ja">
    <head>
  2. 保存してファイルをアップロードします

他にももっとそれらしく

  • HTML5の<hr>はセクション内の話題の区切りなどに用いますのでCDPのdivの区切りとして使われている<hr>は削除
  • <div id="HEADER"></div><header id="HEADER"></header>に変更(その場合はCSSのほうも修正が必要な場合があります:style.css内のdiv#HEADERheader#HEADERに書き換え)※わかるようならID名は替えたほうが気持ちいいかも
    もしくは、<div id="HEADER"></div><header></header>でかこむ
    <header>
    <div id="HEADER">
    <h1>Your site title</h1>
    <ul id="PAN">
      <li>index</li>
    </ul>
    </div>
    </header>
  • <div id="MENU"></div><nav id="MENU"></nav>に変更(その場合はCSSのほうも修正が必要な場合があります:style.css内のdiv#MENUnav#HEADERに書き換え)
    もしくは、<div id="MENU"></div><nav></nav>でかこう
    <nav>
    <div id="MENU">
    <h2>menu</h2>
    <ul>
      <li id="MENU01"><a href="index.html">index</a></li>
    </ul>
    </div>
    </nav>
  • <div id="FOOTER"></div><footer id="FOOTER"></footer>に変更(その場合はCSSのほうも修正が必要な場合があります:style.css内のdiv#FOOTERfooter#FOOTERに書き換え)※わかるようならID名は替えたほうが気持ちいいかも
    もしくは、<div id="FOOTER"></div><footer></footer>でかこむ
    <footer>
    <div id="FOOTER">
    <h2>連絡先</h2>
    <ul>
      <li id="FOOTER01"><a href="#PAGETOP">PAGETOP</a></li>
    </ul>
    </div>
    </footer>

    一例ですので任意で改変してご利用ください。

ブラウザ対応のために

  1. CSSに追加
    header,nav,footer,section,article,figure,figcaption,aside
    {
        display:block;
    }
  2. HTML(<head>内)に追加
    <!--[if lt IE 9]>
    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->