技術セミナー・研修・出版・書籍・通信教育・eラーニング・講師派遣の テックセミナー ジェーピー

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

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

東京都 開催 会場 開催 1人1台PC実習付き
関連するセミナー・出版物
本セミナーは終了いたしました。
セミナーの再開催を依頼する 関連するセミナー・出版物を探す

概要

本講座は、XHTMLの基礎知識がある方に向け、HTML5の利点と特徴を整理しながら学ぶとともに、実際にHTML5を用いた基本的なWebページを構築できる技術を習得していただきます。
また、CSS3の基本的な機能も併せて学びます。

開催日

  • 2012年3月9日(金) 11時00分 ～ 18時00分

受講対象者

  • XHTML、CSSを理解して書けるマークアップエンジニア、ウェブデザイナー
  • CSSで段組レイアウトができる方
  • 見出し要素の役割 (h1〜h6) を理解している方
  • 「 千貫りこのHTML/CSS中級講座 」の履修相当の理解がある方。

修得知識

  • HTML5の基礎
  • CSS3の基礎
  • HTML5文書作成の実践
  • 埋め込み要素の実践
  • フォームコントロールの実践

使用アプリケーション

  • Adobe Dreamweaver CS5

予備知識

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

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

  • 問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;
}

プログラム

　最近では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の設定
  • カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。
ページのトップヘ

講師

  • 小山田 晃浩 氏
    株式会社ピクセルグリッド フロントエンドエンジニア
ページのトップヘ

会場

ロクナナワークショップ
東京都 渋谷区 神宮前1-1-12 原宿ニュースカイハイツ #203
ロクナナワークショップの地図
ページのトップヘ

主催

ロクナナワークショップ
お支払い方法、キャンセルの可否は、必ずお申し込み前にご確認をお願いいたします。

お問い合わせ

本セミナーに関するお問い合わせは tech-seminar.jpのお問い合わせからお願いいたします。
(主催者への直接のお問い合わせはご遠慮くださいませ。)

受講料

1名様
: 28,381円 (税別) / 29,800円 (税込)
本セミナーは終了いたしました。
セミナーの再開催を依頼する
ページのトップヘ