80回目授業内容　HTML5の基本

[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]

HTML5の基本

  • 2012年12月17日に勧告候補がリリース
  • HTML5.1
    • HTML5の次期バージョンとしてW3Cがリリースしている規格
  • HTML Living Standard
  • セマンティック（semantics）Web
    • 意味付けによってページの中身を人間以外のものが理解できるようにすること
    • どれが何の見出しであるかまで明示する
      • imgのaltの仕様上注意が必要

「何月何日ナニのもの」的な説明が必要。
分からなければ書かずに無くした方が良い。

  • タグの省略
    • 現時点では難しいので付けておくべし。
  • a(アンカー）でDiv要素を囲むことが出来る。

新しいフォームパーツ

  • type="datetime"
  • type="number"
  • type="range"
  • type="color"
  • type="url"
  • type="email"
  • type="tel"
  • type="search"

フォーム以外のインターフェイス

  • progress要素
  • meter要素

outline

  • headerは必須！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5の基本</title>
</head>
<body id="top">
<div id="container">
<header>
<h1>章見出し</h1>
<p>要約</p>
</header>
	<section>
	<h2>節見出し</h2>
		<section>
		<h3>本文見出し1</h3>
		<p>本文をここに書きます。</p>
		<div class="note">
		注意：デザイン上の都合でsection要素は使用しません。
		</div>
		</section>
		<section>
		<h3>本文見出し2</h3>
		<p>本文をここに書きます。</p>
		</section>
	</section>
<footer>
<p><small>&copy;Tokyo Q Studio</small></p>
<address>お問合せ：tokiyo@tqs.jp</address>
</footer>
</div>
</body>
</html>

article要素

  • ブログなどの記事に使う
  • 独立した記事として成立する内容に使う
  • 仕様上弱い記事内容であれば使わない方が良い。

aside要素

  • 前で言うsidebar
  • contentと同等の扱いになる（outline上のsectionと同等）

nav要素

  • 主要なナビゲーションに使う

header要素とfooter要素

  • 必須！必ず付ける！

IE対策

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>

microdata

  • 次世代のSEOになり得るのか？
  • 見本として
<article itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="headline">????? ??????</h1>
  <p itemprop="author">17 ?????? ???</p>
  <p itemprop="articleBody">12 ??? ?????? ?????????? ?? 8 ??? ?????? ???, ?????? ????? ????, ??????-kyo ?????????? ???? ??? ?????????????.</p>
</article>

論理構造を意識したアウトライン

HTML5を打ってみる

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>生活を楽しくする情報をもっと身近にお届けします | Green Leaf</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>

<div id="container">
<header>
<h1><img src="images/logo.gif" width="168" height="32" alt="Green Leaf"></h1>
<h2>生活を楽しくする情報をもっと身近にお届けします | Green Leaf</h2>
</header>
<nav>
<ul>
		<h1>menu</h1>
    <li class="nav_top"><a href="#">トップ</a></li>
    <li><a href="#">森の工房について</a></li>
    <li><a href="#">季節のイベント</a></li>
    <li><a href="#">お問い合わせ</a></li>
    <li><a href="#">ブログ</a></li>
</ul>
</nav>



<section id="tree">
<h2>森の工房について</h2>
<img src="images/photo01.jpg" width="250" height="165">
<p>Forest Studioでは、自然の中にある「森の工房」を運営しています。森の工房では、四季を通してイベントを開催したり、さまざまな商品の開発を行っています。
森の中にある工房</p>

<p>森の中の様子 森の工房は、木々のあふれる森の中にあります。森の入口から細い小道を通り、森の奥に進んでください。しばらくすると、森の中にある小さな丘に出てきます。その丘の上にある木造の建物が「森の工房」です。</p>

<p>この丘はちょうど森の中央に位置しており、森の中を散歩したり、自然の中で遊んだりするときにも、ちょうどいい拠点になります。森全体を見渡すことも可能で、夜は満点の星空を満喫できます。</p>
</section>


<section id="shiki">
<h2>四季を楽しむことができる場所</h2>
<img src="images/photo02.jpg" width="250" height="165">
<p>冬の風景 森の工房では、春、夏、秋、冬と、四季折々の自然を楽しむことができます。</p>
<p>春には、雪解け水の中から芽を出す新しい命や、新緑の鮮やかな緑。夏には、緑濃く茂った木々の間を吹き抜けるさわやかな風に、川の清流での水遊び。秋には、森全体が赤や黄色に染まり、色鮮やかな紅葉に包まれます。木々の葉が落ち、冬になると、ここは雪に覆われて一面の銀世界になります。</p>
</section>

<section id="animal">
<h2>工房のまわりにいる動物たち</h2>
<img src="images/photo03.jpg" width="250" height="165">
<p>キツネさん 工房のまわりにはいろいろな動物たちが棲んでいます。キツネ、タヌキ、イタチ、ウサギ、リス、シカ、イノシシ…。森の中で出会うこともあれば、ひょこっと工房に顔を出すこともあります。土や雪の上に残った足跡から、正体を探るのも楽しみです。</p>

<p>ただし、森の工房では彼らに餌をやることはしていません。自然にあるがままの姿で、いっしょに生活していきたいと考えているからです。彼らに出会ったときには、びっくりさせないように遠くからそっと眺めてあげてください。</p>
</section>


<footer>
<address>
<small>Copyright (C) Green Leaf, All rights reserved.</small>
</address>
</footer>
</div>
</body>
</html>

@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}

#container {
	margin: 0 auto;
	width: 760px;
}
header {
	background-image: url(../images/sky.jpg);
	background-repeat: no-repeat;
	width: 760px;
	height: 230px;
}
header h1 {
	padding: 20px;
}
header h2 {
	padding: 0 0 0 20px;
	color: #FFF;
}

nav {
	height: 25px;
	background-color: #960;
	margin-bottom: 10px;
}
nav h1 {
	float: left;
	display: inline;
	font-size: 18px;
	margin: 3px 10px;
	color: #FC6;
	line-height: 18px;
}
nav li {
	float: left;
	display: inline;
	width: auto;
	border-right: solid 1px #fff;
	line-height: 28px;
}
nav .nav_top {
	border-left: solid 1px #fff;
}
nav a {
	margin: 5px 10px;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
nav a:hover {
	color: #F00;
}

section {
	clear: both;
}

section h2 {
	background-image: url(../images/bar-darkblue.png);
	background-repeat: no-repeat;
	width: 564px;
	height: 46px;
	padding: 4px 0 0 20px;
	color: #FFF;
}
#tree {
	height: 280px;
}
#tree img{
	float: left;
	display: inline;
	margin: 5px 10px 5px 0;
	width: 250px;
}
section p{
	font-size: 14px;
	margin: 5px 0 10px 0;
}
#shiki {
	height: 240px;
}
#shiki img{
	float: left;
	display: inline;
	margin: 5px 10px 5px 0;
	width: 250px;
}
#animal img{
	float: left;
	display: inline;
	margin: 5px 10px 5px 0;
	width: 260px;
}
footer {
	margin-top: 40px;
	text-align: right;
	clear: both;
}

脱線話（復活）

[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。