HTML/CSS 特訓研修パッケージ

公開日：2018/02/01

更新日：2021/09/01

研修内容
説明資料（サンプル）

研修の対象者

Webエンジニア
Webデザイナー

解決できるお悩み・ニーズ

PCやスマートフォンサイト向けにCSSのコーディングスキルを身に着けたい
サイト改善のためのUIパーツを制作できるようになりたい

パッケージの概要

この研修パッケージでは、Webサイトやスマートフォンサイトのコーディングに使えるMediaQueryを使ったCSSのコーデイングテクニックやUIパーツの作成方法について学ぶことができます。HTMLやCSSの基礎知識を身に着け、さらに実践的な内容を学びたいと考えているWebエンジニアやWebデザイナー向けの研修パッケージとなっています。

まずは資料をもらう (簡単10秒)

※こちらは研修パッケージの作成例です。管理画面のテンプレートに含まれていない場合がございます。

研修内容

授業構成（全2講座）

講座名	学習目安
レスポンシブコーディング入門	3時間
レスポンシブコーディング入門 -MediaQueryを実装する-	60分
レスポンシブコーディング入門 -ブレイクポイントを増やす-	60分
レスポンシブコーディング入門 -ブレイクポイントごとのCSS完成-	60分
デザインパターン基礎	8時間
デザインパターン基礎 -Web制作におけるデザインの全体像をつかむ-	60分
デザインパターン基礎 -CSSのみで実装できるデザインテクニック-	60分
デザインパターン基礎 -CSSとjQueryを使ったハンバーガーメニューの実装-	60分
デザインパターン基礎 -CSSとjQueryを使ったプルダウンの実装-	60分
デザインパターン基礎 -カルーセルスライダーslickを用いたスライドの実装-	60分
デザインパターン基礎 -動作に合わせてデザインを変化させるパララックス（視差効果）の実装-	60分
デザインパターン基礎 -スクロール時にTOPを固定させる実装-	60分
デザインパターン基礎 -情報量が多い時に役立つ切り替えタブの実装-	60分

説明資料（サンプル）

担当講師

田中晶子

webデザイナー
小橋優子

フロントエンドエンジニア/フロントエンド講師

研修の内容詳細

1. 「デザインパターン基礎」

学べること

・PCサイトやスマートフォンサイトのデザインパターンとコーディング
・Webデザイン制作の流れ
・CSSやjQueryを使ったデザインテクニック

この授業では、Webサイトを制作するうえで最低限必要となる、デザインの表現方法やコーディングテクニックについて全8回の授業を通して網羅的に学びます。実技を交えつつ、様々なデザインの実装方法について学ぶことができるので、より実践的なスキルを身に着けることができます。講師は、フロントエンジニアとして現場の第一線で活躍され、Web講師としての側面も持つ小橋優子先生です。

受講者の声

ぼんやりと理解していた要素の違いが明確になりました。先生のトークも面白く、楽しみながら理解が深まりました！
とても分かりやすいです。今までCSSを中途半端に理解したままでした。CSSの意味（個性）を知ることで理解を深めることができました。ありがとございます。

2 「レスポンシブコーディング入門」

学べること

・レスポンシブデザインとは何か
・MediaQueryを用いたCSSのコーディング方法

この授業では、スマートフォンがWebサイトの主流となっている中で、UIのデバイス切り替えを可能にするレスポンシブデザインについて学びます。実演を交えながらMediaQueryを用いたCSSのコーディング方法について全3回の授業を通して学ぶことができます。講師はこれまで広告・出版・Web業界でのデザイナーを経て、Webフロントエンドの企業・個人研修講師として活躍されている田中晶子先生です。

まずは資料をもらう (簡単10秒)