HTML5 + CSS3 + レイアウトデモ

js

HTML5 + CSS3 + クロスブラウザ + リキッドレイアウト なデモです。


<!doctype html><html class="ifnojs"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5 demo</title>
<style>
@import url(html5.bone.css);
@import url(html5.efx.css);
</style>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script>
window.UUMETA_DEBUG = 1;
window.UUALTCSS_ENABLE_MAXMIN = 1;
</script>
<script src="uuAltCSS-20090820.js"></script>
</head><body>

<div class="view">
  <header class="round">
    header
  </header>
</div>
<div class="view">
  <nav class="round">
    nav
  </nav>
</div>

  <div class="tbl">
    <div class="cell1">

      <div class="view">
        <article class="round">
          article
          <div class="view">
            <section class="round">section</section>
          </div>
          <div class="view">
            <section class="round">
              section
              <br />section
              <br />section
              <br />section
              </section>
          </div>
          <div class="view">
            <section class="round">section</section>
          </div>
        </article>
      </div>

    </div>
    <div class="cell2">

      <div class="view">
        <aside class="round">
          aside
        </aside>
      </div>

    </div>
  </div>

<div class="view">
  <footer class="round">
    footer
  </footer>
</div>

</body></html>

header,nav,article,section,aside,footer {
  display: block;
  padding: 5px;
}
.view {
  padding: 5px;
}
.tbl {
  width: 100%;
  display: table;
  -uu-display: table;
}
.tbl>.cell1 {
  display: table-cell;
  width: 70%;
/*
  background-color: pink;
 */
}
.tbl>.cell2 {
  display: table-cell;
  width: 25%;
/*
  background-color: skyblue;
 */
}
aside {
  min-height: 200px;
}
html.ifie67 .cell1,
html.ifsafari31 .cell1,
html.ifsafari32 .cell1 {
  vertical-align: top;
}

.round {
  color: white;
  border: 3px solid #222;
  background-color: gray;
}
html.ifnojs .round {
  -webkit-box-shadow: gray 5px 5px 5px;
  -webkit-border-radius: 10px;
}
html.ifjs .round {
  -uu-background-color: gray;
  -uu-box-shadow: gray 5px 5px 5px;
  -uu-border-radius: 10px;
}
header {
  -uu-background: -uu-gradient(linear, 0% 0%, 0% 100%,
                               from(#630707), to(#AB8EA2), color-stop(.3,#D44E76));
}
nav {
  -uu-background: -uu-gradient(linear, 0% 0%, 0% 100%, from(#1F39E0), to(#E1FAF7));
}
article {
  -uu-background: -uu-gradient(linear, 0% 0%, 0% 100%, from(#BFE019), to(#E1FAF7));
}
aside {
  -uu-background: -uu-gradient(linear, 0% 0%, 100% 100%, from(#FF0B02), to(#F8FF22));
}
article>div:nth-child(even)>section {
  -uu-background-image: url(cover09.jpg);
}
footer {
  -uu-background: -uu-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FFFFFF),
                               color-stop(.3,#CCC72D),color-stop(.6,#525252));
}

HTML5のタグの概要については、http://www.alistapart.com/articles/previewofhtml5/ を参照下さい。

デモ

IE6+,Firefox3+,Safari3+,Opera9.5+,Google Chrome2+ 用
http://pigs.sourceforge.jp/blog/20090820/html5_tag/html5.html

Firefox2 用
http://pigs.sourceforge.jp/blog/20090820/html5_tag/html5.xhtml

JavaScript OFF版
http://pigs.sourceforge.jp/blog/20090820/html5_tag/html5.nojs.html

Firefox2 だけ違うのはなぜ?

Firefox2 は、未知のタグ(header等)の親子関係を理解しません。

 <header>
   <div>node...</div>
 </header>
   ↓
 <header>
 </header>
 <div>node...</div>

これを回避するため、DOCTYPEを持たない application/xhtml+xml な文書として処理しています。

Firefox2 では application/xhtml+xml な文書に <!doctype html> があるとパースエラーになるので削除しています。doctype 削った時点で HTML5 とは言えませんね。

<html class="ifnojs" lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

詳しくは、http://journal.mycom.co.jp/articles/2009/08/18/html5/index.html を参照してください。

今回は Firefox2 にも対応していますが、Firefox2 のシェアは、現時点で 1.2〜1.4% しかないため、無視できる無理に対応しなくてもよいブラウザになりつつあります。