HTML5

Webデザインの勉強

HTML5

  • HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様

広義のHTML5

  • いままでより高度な機能をもつWebページ
  • 特定のOSやブラウザに依存しない
  • CSS3やECMAScript5を含む

HTML5によって実現するアプリケーション

  • Webアプリケーション中心で作業を行うこと：クラウドコンピューティング
  • Webページ内のデータをプログラムで処理しやすくする：セマンティック
  • ユーザーインターフェイスをより使いやすく、表現力を豊かにする：CSS3
  • 自由にグラフィックを描画し、音楽や動画を再生する：Canvas2D・Audio&Video・SVG
  • GPSなどから現在地情報を取得する：Geolocation
  • より柔軟に他のドメインやローカル環境にアクセスできるようにする：Web Storage・FileAPI・WebSocket・WebMessaging
  • インターネットに接続していない状況でもWebアプリケーションを実行可能にする：OfflineWebApplication
  • 複雑な計算処理を並列処理によって高速化する：WebWorers

HTML5の基本形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="">
<script src=""></script>
<!--[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>
	
</body>
</html>

記述のワークフロー

  1. 論理構造を記述する
  2. 視覚化のためのグループ化（divを利用する）

HTML5のテンプレートを生成できるジェネレーター

HTML5テンプレートジェネレーター