マークアップエンジニアコース
HTML/CSSで正しい構造と表現を習得し、保守性の高いフロント実装力を養います。
このような課題を抱えていませんか?
スキルがなくて、
案件にアサインできない…
社員が自発的に学習をしてくれない…
ロースキルで契約更新ができない…
基礎から現場ベースのカリキュラムを通して
実務に確実に結びつく研修をご案内します。
カリキュラム概要
Web制作の基礎から応用までを体系的に学べる研修
HTML：セマンティックHTML、構造設計、アクセシビリティ基礎
CSS：命名規則、一般的なコーディングルール、レスポンシブ対応
JavaScript：DOM操作、アニメーション
デザインカンプの再現、パフォーマンスの最適化、コードレビュー等を含む、実務に直結する課題で構成しています。
この研修がおすすめな方
初心者や若手エンジニア
単価アップや案件継続率の向上を目指している
若手の離職率を下げたい
即戦力の育成を目的として実践的な課題が多く取り入れているため、確実に力を身につけることができます。
取り扱う言語・技術
HTML/CSS
HTMLやCSSの基礎を手を動かしながら学びます。レスポンシブを考慮した、LPサイトの作成ができるようになります。
JavaScript
JavaScriptの基礎を、課題を行いながら学びます。Webサイトにアニメーションをつけたり、基礎的な構文は読み書きができるようになります。
Sass/Vite
CSSの拡張言語であるScssを学びます。Viteを使った環境構築と、コンパイルの概念を理解し、効率的な開発ができるようになります。
Git
Gitを使ってソースコードのバージョン管理を学びます。基本操作から、開発フロー、pull request によるコードレビューまで、チーム開発を想定した実践的なGitの使い方を身につけます。
講義内容
HTMLタグの基礎を学ぼう
HTMLタグの基本構文を理解し、Webページの基礎を作る
CSSプロパティの基礎を学ぼう
CSSの基本構文を理解し、Webページの基礎を作る
レスポンシブデザインを学ぼう
「Flex」と「Grid」を利用したレイアウトに関するCSSを学ぶ
デザインからコーディングをしてみよう
デザインを基に、基礎的なサイト構成を理解する
フォームを作成してみよう
inputタグやlabelタグを用いて、フォームを作成する
動きのあるUIを作成してみよう
CSSアニメーションやホバー時の挙動を学び、実際に実装する
サイトを作ってみよう①
これまで学んだHTMLとCSSを使い、基本的なWebサイトを作成する
サイトを作ってみよう②
これまで学んだHTMLとCSSを使い、基本的なWebサイトを作成する
Git操作の一連の流れ
add・commit・pushなど、Gitの基本操作の流れを理解する
コミットの粒度を意識しよう
内容ごとに適切な単位でコミットする考え方を学ぶ
理解度チェック&コンフリクト解消手順
Gitへの理解度の確認と、コンフリクトの解消方法を実践する
定数と演算子の基本
変数・定数などJavaScriptの基礎文法を学ぶ
DOM操作とイベント処理
DOMの取得・操作と、クリックなどのイベント処理を実装する
if文や三項演算子を使った条件分岐
if文や三項演算子を使って処理を分岐させる方法を学ぶ
ループ処理の基礎
for文などを使い、繰り返し処理の基本を理解する
関数を使ったカウント処理
関数の定義について学び、カウント処理を実装する
配列の操作とメソッドの活用
配列の基本操作と、代表的なメソッドの使い方を学ぶ
オブジェクトの基本操作
オブジェクトの定義とプロパティの操作方法を理解する
非同期処理とAPI連携
非同期処理の仕組みを理解し、APIからデータを取得する
UI実装演習
ハンバーガーメニューなどのよく利用されるUIを実装する
入力フォームとバリデーション
フォームを作成し、入力内容のチェック処理を実装する
Swiperを使ったスライダーの実装
Swiperを用いて、画像のスライダーを実装する
Viteでの開発/タスクランナーについて
Viteを使った開発環境構築とタスクランナーの役割を理解する
Scssでのスタイリング方法
Scssについて、入れ子や変数などの基本的な記法を学ぶ
サイト制作
HTML、CSS、Sass、JavaScript等を総合的に用いてWebサイトを構築する
講義内容
HTMLタグの基礎を学ぼう
HTMLタグの基本構文を理解し、Webページの基礎を作る
CSSプロパティの基礎を学ぼう
CSSの基本構文を理解し、Webページの基礎を作る
レスポンシブデザインを学ぼう
「Flex」と「Grid」を利用したレイアウトに関するCSSを学ぶ
デザインからコーディングをしてみよう
デザインを基に、基礎的なサイト構成を理解する
フォームを作成してみよう
inputタグやlabelタグを用いて、フォームを作成する
動きのあるUIを作成してみよう
CSSアニメーションやホバー時の挙動を学び、実際に実装する
サイトを作ってみよう①
これまで学んだHTMLとCSSを使い、基本的なWebサイトを作成する
サイトを作ってみよう②
これまで学んだHTMLとCSSを使い、基本的なWebサイトを作成する
Git操作の一連の流れ
add・commit・pushなど、Gitの基本操作の流れを理解する
コミットの粒度を意識しよう
内容ごとに適切な単位でコミットする考え方を学ぶ
理解度チェック&コンフリクト解消手順
Gitへの理解度の確認と、コンフリクトの解消方法を実践する
定数と演算子の基本
変数・定数などJavaScriptの基礎文法を学ぶ
DOM操作とイベント処理
DOMの取得・操作と、クリックなどのイベント処理を実装する
if文や三項演算子を使った条件分岐
if文や三項演算子を使って処理を分岐させる方法を学ぶ
ループ処理の基礎
for文などを使い、繰り返し処理の基本を理解する
関数を使ったカウント処理
関数の定義について学び、カウント処理を実装する
配列の操作とメソッドの活用
配列の基本操作と、代表的なメソッドの使い方を学ぶ
オブジェクトの基本操作
オブジェクトの定義とプロパティの操作方法を理解する
非同期処理とAPI連携
非同期処理の仕組みを理解し、APIからデータを取得する
UI実装演習
ハンバーガーメニューなどのよく利用されるUIを実装する
入力フォームとバリデーション
フォームを作成し、入力内容のチェック処理を実装する
Swiperを使ったスライダーの実装
Swiperを用いて、画像のスライダーを実装する
Viteでの開発/タスクランナーについて
Viteを使った開発環境構築とタスクランナーの役割を理解する
Scssでのスタイリング方法
Scssについて、入れ子や変数などの基本的な記法を学ぶ
サイト制作
HTML、CSS、Sass、JavaScript等を総合的に用いてWebサイトを構築する
成果物の例
POINT
現場を想定したフローでWebサイトを作成
01 Figmaでデザインを確認
Figmaでレイアウトを確認し、画像の書き出しなどを行います
02 学んだことを活かして開発
デザインを基に、CSSやJavaScriptを用いてサイトを制作します
03 テスト
制作したサイトの動きやレイアウトに問題がないか自身でテストします
研修の進み方
STEP01
現在の案件やスキルをベースに、目標を設定します。Web開発やアプリケーション開発に精通した現役エンジニアの講師と一緒に考え、具体的な目標の設定を行います。
STEP02
学習進捗に合わせて、課題のレビューをハンズオン形式で行います。受講者がコーディングしたデータを画面共有しながらレビューすることで、問題点をすぐに改善することが可能です。
料金形態
パーソナルコース
講師が個々の習熟度に合わせて行う個別学習コースです。講師とマンツーマンで実施するため、疑問点を細かく解消でき、理解度を高めながら効率的にスキルを習得できます。
料金
336,000 円（税抜）
講義回数
42 回
グループコース
同一内容を複数名で受講する集合型の学習コースです。講師の解説だけでなく、他受講者との質疑応答を通して理解を深め、実務への応用力を養います。※受講人数3名〜
料金（3名）
705,600 円（税抜）
講義回数
42 回
MATERIAL
資料ダウンロード
提供サービスの内容や実績/事例についてご紹介します。
CONTACT
お問い合わせ
まずはお気軽にご相談ください。