HTML5/CSS3研修

HTML5/CSS3研修はHTML5/CSS3コーディング、アーキテクチャ、各種APIの機能を理解し、ウェブやスマホサイトの制作技術を学ぶ研修です。

集合研修 ・ オンラインライブ研修が選べるようになりました

HTML5/CSS3研修の概要

HTML5/CSS3研修概要をご覧いただき、この概要をベースに貴社のご要望にあわせた内容にカスタマイズして研修をご提供いたします。研修ご検討にともない、研修実施までの流れ研修会場もご確認いただき、助成金を活用した研修新入社員研修をご検討されている企業さまは各ページをご覧ください。

研修名

HTML5/CSS3研修

研修概要 HTML5/CSS3(JavaScriptを含む)を中心にWeb技術を習得します。本研修は、マークアップ、プログラミング技術を向上させる研修として、さらに、各技術、機能の概要や特徴を踏まえ体系的に技術を定着させていきます。そして、HTML5/CSS3のコーディング、アーキテクチャ、各種APIの機能を理解し、HTML5/CSS3を使ったPCサイト/スマートフォンサイト/Webアプリケーションの構築手順やプログラミング手法についての技術を習得します。
到達目標
  • HTML5/CSS3のコーディング技術
  • アーキテクチャ、各種APIの機能の理解
  • HTML5/CSS3を使ったPCサイト/スマートフォンサイト制作技術
  • Webアプリケーションの構築手順やプログラミング技術
対象者 HTML / CSS / JavaScript の基礎を理解している方、Web制作、Webアプリ開発技術に活かされたい方 レベル 基礎、応用
学習時間/期間 45時間/6日 実施時間 9:00~17:30(休憩含)
研修会場
使用ソフトウェア テキストエディタ
その他、備考 貴社独自のカリキュラムを構築することが可能です。その他、ご要望、ご相談はお問い合わせください。

研修に関するご質問・ご相談」「お見積り

電話でのお問い合わせ
03-6863-4805(平日10:00~17:00)

研修について聞いてみる

助成金を活用して受講

国の助成金制度を活用することで、
1事業所あたり最大1億円が支給されます

助成金の詳細を確認する

HTML5/CSS3研修のカリキュラム

アイクラウド研修サービスのHTML5/CSS3研修のカリキュラムの一例となります。ご要望を反映したオーダーメイドのHTML5/CSS3研修カリキュラムでの研修実施も可能でございます。

Chapter 1HTML・CSSの基本
1.
インターネットとサーバーについて
2.
研修で使用するソフトウェアについて
3.
HTMLの役割、CSSの役割
4.
HTMLのタグ、CSSを使ってみる
5.
HTMLのタグを正しくつける意味
6.
HTMLの基本知識
7.
HTMLのバージョンについて
8.
CSSの基本知識
9.
CSSのバージョンについて
10.
大文字と小文字の区別
Chapter 2ページ全体の枠組み
1.
HTMLの全体構造
2.
CSSの組み込み方
3.
グローバル属性
4.
背景の指定
5.
HTML4.01とXHTML1.0のDOCTYPE宣言
6.
CSSファイルの文字コードの指定方法
7.
CSSの中にさらに別のCSSを読み込む
8.
背景画像のURLについて
Chapter 3テキスト
1.
テキスト関連の要素
2.
色の指定方法
3.
テキスト関連のプロパティ
4.
ページ内の特定場所へのリンク
5.
値の継承について
Chapter 4CSSの適用先の指定方法
1.
よく使う主要なセレクタ
2.
その他のセレクタ
3.
セレクタの組み合わせ方
4.
指定が競合した場合の優先順位
Chapter 5ページ内の構造
1.
基本構造を示す要素
2.
画像・動画・音声関連要素
3.
ボックス関連プロパティ
4.
背景を指定する
5.
配置方法を指定するプロパティ
6.
HTML5の新要素に古いIEに認識させる方法
7.
Widthとheightの発音
8.
絶対配置による段組み
Chapter 6ナビゲーション
1.
ナビゲーションに関連する要素
2.
リスト関連のプロパティ
3.
表示形式を変えるプロパティ
4.
ナビゲーションの作り方
Chapter 7フォームとテーブル
1.
フォーム関連の要素
2.
フォーム関連のプロパティ
3.
テーブル関連の要素
4.
テーブル関連のプロパティ
5.
Textarea要素にbox-shadowプロパティが適用されない現象について
Chapter 8JavaScript
Ajax/jQuery
1.
JavaScriptの基本構造
2.
DOM
3.
JavaScriptイベント
4.
JavaScriptのメソッド
5.
Ajaxの基本と使い方
6.
jQueryの基本と使い方
Chapter 9その他の機能とテクニック
1.
その他の要素
2.
その他のプロパティ
3.
Clearfixについて
4.
メディアクエリ
Chapter 10変形とアニメーション
1.
トランスフォーム関連プロパティ
2.
トランジション関連プロパティ
3.
アニメーション関連プロパティ
Chapter 11スマートフォンサイトの
設計
1.
モバイルファースト
2.
設計の方針
3.
レスポンシブデザイン
4.
レイアウトパターン/アイコン・装飾パーツ
5.
マークアップ
Chapter 12ビジュアル系/オフライン系API
1.
ドラッグ&ドロップAPI
2.
File API
3.
ドロップファイルの読み取り
4.
並列処理
5.
位置情報
6.
オフラインコンテンツの仕組み
7.
オフラインWebアプリ
8.
JavaScriptによるキャッシュ更新
9.
Web Storageの概要
10.
Web Storageの利用環境
11.
セッションストレージ
12.
ローカルストレージ
Chapter 13その他のHTML5機能
1.
クロスドキュメントメッセージング
2.
サーバーと双方向通信
3.
バックグラウンドでJavaScript実行
Chapter 14高度化するテキスト表現
1.
フレージング要素
2.
属性セレクタ
3.
target疑似クラス
4.
要素のナンバリング
5.
Webフォントの利用
Chapter 15スマートデバイスへの対応
1.
共用指針
2.
クライアント環境の判別
3.
ページの切り替え
4.
リクエストへの対応
5.
PCサイトからの最適化
Chapter 16演習
Canvas & SVG-画像
1.
赤色強調フィルタ作成
2.
Flash不要のお絵かきツール
3.
SVGで描くミニゲーム
Chapter 17演習
Video-動画
1.
jQuery UIを使ったパノラマ動画プレーヤー
2.
テロップが流れる動画プレーヤー
3.
リアルタイムでエフェクトをかけるビデオエフェクター
4.
SafariでOgg形式を再生する
Chapter 18演習
Audio-音楽
1.
iTunes風音楽プレーヤー
2.
iPad対応ブラウザーピアノ
3.
Audio Data APIでFirefoxにソフトシンセ
4.
Audio Data APIでブラウザーにシーケンサー
Chapter 19演習
関連技術を使う
1.
File APIを使ってローカルファイルをブラウザーから操作
2.
File APIを使って自作するEPUBビューアー
3.
Web Storageを使ってローカルディスクに保存
4.
Web Workersを使った並列処理
5.
iPhone/iPadでは制約の多いHTML5 Video&Audio

カリキュラムはすべてオーダーメイド

貴社のご要望を反映した、
独自の研修カリキュラムを構築いたします

お問い合わせはこちら

助成金申請書類の作成サポート

申請に必要な書類」「書類の作成方法」など、
専任担当者が分かりやすくアドバイスいたします

助成金を活用する

研修の実施方法は2パターン

実施方法は会場に集って受講する集合研修(講師派遣)、オンラインライブ研修から選択いただけます。オンラインライブ研修は、自宅や職場から受講することができ、対面での集合研修同様、双方向性を持ったコミュニケーション重視の研修を実施しています。集合研修・オンラインライブ研修ともに、カリキュラム内容や日時など貴社のご要望に合わせ自由にカスタマイズいただけます。

集合研修(講師派遣)とオンラインライブ研修

集合研修(講師派遣)

貴社会議室、またはアイクラウド研修会場にて実施するオフライン研修です。ご相談、お打ち合わせは対面、オンラインにて対応いたします。

アイクラウド研修会場

オンラインライブ研修

自宅や職場から企業研修を受講いただけるオンライン研修です。ご相談からお打ち合わせ、研修実施までをオンラインで完結できます。

ぜんぶオンラインの詳細

研修実施にともなう確認事項

助成金を活用してコスト削減

厚生労働省で取扱っている支援金は、条件さえ満たせばどんな会社でも貰うことができ、返済する必要はありません。助成金の種類は50種類以上(雇用や教育訓練など)あり、社員教育に関連した助成金は、「人材開発支援助成金」が多く利用されています。アイクラウド研修サービスは、研修のご提供だけでなく、助成金サポートも行っております。 助成金の詳しいご説明はこちら

HTML5/CSS3研修に関連する研修

ウェブマーケティング研修 Googleアナリティクス研修 ウェブ解析資格対策 ウェブ制作研修 開発/プログラミング研修 マイクロソフト365研修 プレゼンテーション研修

研修に関するご質問」「ご相談」「お見積り

研修に関するご相談、お見積りのご依頼など、下記までお問い合わせください