小山田晃浩のHTML5マークアップ講座

最近ではHTML5が注目を集めていますが、「何からはじめれば良いのかわからない」という方も多いのではないでしょうか。

本講座では、XHTMLの基礎知識がある方を対象に、HTML5の利点と特徴を整理しながら学びぶとともに、実際にHTML5を用いた基本的なWebページの構築スキルの習得を目的としています。また、旧IEへの対策なども併せて学びます。

HTML5はただ単に「新しいから」という理由で話題になっているわけではありません。HTML5には、これまでのXHTMLになかった新しい文書構造、新しい埋め込み要素、新しいフォームなど、さまざまな新機能が盛り込まれており、さらに多数の周辺技術への発展も考えられているなどの利点があります。

また、HTML5の対応にはGoogle、Apple、Microsoftを始めとするブラウザの開発各社も積極的に取り組んでおり、HTML5は仕様（W3C、WHATWG）と利用する環境（ブラウザー）の両方が整いつつあるのです。それに合わせてHTML5を「書く側」の制作者もHTML5を理解し、利点を最大限に活用するための準備を進めましょう。

講座レベル

■カリキュラム概要

1.HTML5を知る
- HTML5の背景と利点
- HTML5とXHTML1.0の共通点と相違点
- 文書構造の理解
2.HTML5実践
- HTML5文書の作成
- レイアウトを考える
- 大枠のマークアップ
- 文書構造のマークアップ
- 図版のマークアップ
- a要素の新しい利用
- 旧IE向けPolyfill
3.埋め込み要素の実践
- 音声ファイルとaudio要素
- 動画ファイルとvideo要素
- SVGとsvg要素
- canvas要素
4.フォームコントロールの実践
- 様々なinput要素
- その他の入力追加機能
- CSS3とフォームコントロール
- IE向けPolyfill
スモールスクリーン（スマートフォン）への応用
- viewportの設定

＊カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。

使用アプリケーション: Adobe Dreamweaver CS5
講師: 小山田晃浩
定員: 6名
対象: XHTML、CSSを理解して書けるマークアップエンジニア、ウェブデザイナー
CSSで段組レイアウトができる方
見出し要素の役割（h1〜h6）を理解している方
「千貫りこのHTML/CSS中級講座」の履修相当の理解がある方。本ページ下の受講対象レベルチェック問題を理解できる方。
料金: 29,800円（税込み）

2012年7月19日（木）11:00～18:00残り6席

お申し込み：2012年7月19日（木）

受講希望の方は受講規約およびよくある質問のページを閲覧していただき、ご了承の後にお申し込みフォームからお申し込みください。またお申し込みの流れもご参照ください。

■受講対象レベルチェック問題

＊全問正解が受講の必須条件ではなく、受講対象レベルの具体的な目安とお考えください。

問1：

HTMLにおける「タグ」「要素」それぞれの言葉の意味を解説してください。

問2：

次の図のようなレイアウトを行いたい。与えられたHTMLソースコードでこれを実現するにはどのようなCSSを用意すればいいか。CSSの例を答えてください。

<div class="header"></div>
<div class="content">
  <div class="main"></div>
  <div class="sub"></div>
</div>
<div class="footer"></div>

答1：

タグ：「<」と「>」で囲まれた、意味付け（マークアップ）のための文字列
要素：開始タグと終了タグで囲まれることで、意味を持ったHTML文書の構成要素

答2：

.header{
	width:560px;
	margin:0 auto;
	border:1px solid #000;
	background:#ccc;
}
.content{
	width:560px;
	margin:10px auto;
}
.content:after{content : ''; display : block; clear : both; height:0;}
	.content .main{
		width:400px;
		float:right;
		border:1px solid #000;
		background:#ccc;
	}
	.content .sub{
		width:140px;
		float:left;
		border:1px solid #000;
		background:#ccc;
	}
.footer{
	width:560px;
	margin:0 auto;
	border:1px solid #000;
	background:#ccc;
}