Webアプリ開発入門講座（HTML・CSS・JavaScript）

この講座で身につくこと

• 見出しや入力欄の役割をHTMLで指定した申請画面を作成できます。
• CSSでPCとスマートフォンの幅に合わせた配置を作成できます。
• JavaScriptで必須項目と数量を検査できます。
• 申請データの追加・表示・削除をブラウザ上で実装できます。
• キーボード操作と入力エラーの確認結果を記録できます。

こんな方に

• 社内申請フォームの画面制作を担当する社員
• 既存のWebページの表示崩れや操作不具合を修正する担当者
• Web制作から社内向け画面の開発へ担当範囲を広げる社員

カリキュラム（全30時間）

1. 第1回 HTMLで備品申請の構造を作る5時間
   • HTMLという画面の構造を記述する言語で見出し・表を作成
   • 備品名・数量・用途の入力欄とラベルの配置
   • 自社の業務データ（個人情報を除く）または配布する模擬データで項目設計
   • Visual Studio Codeとブラウザによる表示確認
2. 第2回 CSSで画面の見た目を整える5時間
   • CSSという見た目を指定する言語で文字・色・余白を調整
   • FlexboxとGridによる入力欄と一覧の配置
   • メディアクエリによる画面幅に応じた表示切替
   • キーボード操作時の選択位置と文字の読みやすさの確認
3. 第3回 JavaScriptで入力を処理する5時間
   • JavaScriptというブラウザ上で処理を動かす言語の基本
   • 変数・条件分岐・配列による申請内容の管理
   • DOMという画面要素の構造を操作して値を取得
   • ボタン操作を受けて確認メッセージを表示
4. 第4回 入力検査と一覧更新を実装する5時間
   • 必須項目・数量の範囲を調べる入力検査
   • 不備がある入力欄へのエラー表示
   • 申請一覧への追加・削除と件数表示
   • 入力文字をHTMLとして実行させないtextContentの利用
5. 第5回 ブラウザ内で保存と再表示を行う5時間
   • JSONというデータ記述形式で申請情報を保存
   • localStorageによる同じブラウザ内への保存・読込
   • 保存済みデータが壊れた場合のエラー表示
   • 共有保存や権限管理が必要な箇所を仕様書に記載
6. 第6回 申請画面を検証して引き継ぐ5時間
   • ブラウザの開発者ツールで処理の不具合を調査
   • 入力なし・数量範囲外・再読込のテスト
   • PCとスマートフォン相当の画面幅で表示確認
   • ソースファイルと操作手順・既知の制約を整理

受講後に手元に残るもの

• 備品申請画面のHTML・CSS・JavaScriptファイル
• 模擬データと入力検査のテスト項目表
• 操作手順書と共有化に向けた追加要件一覧

受講の前提と環境

前提：ブラウザの操作とファイルの保存ができることが前提です。プログラミング経験は不要です。教材を編集するソフトの導入と、ローカルサーバーの起動を許可されたPCを用意します。

環境：WindowsまたはMac、Visual Studio Code、ブラウザを使用します。無料の編集ソフトとローカルサーバー用拡張機能で演習できます。公開用サーバーや有料サービスの契約は不要です。

企業ごとの調整

自社の業務データ（個人情報を除く）または配布する模擬データで申請項目を設計します。備品申請を設備予約などに変更し、既存の社内画面に合わせた配色に調整できます。30時間の中で、画面制作と入力処理の演習配分を変更します。

助成金を使う場合

Web制作・社内システム開発の職務で行う、申請画面の作成・入力検査・表示不具合の修正に直結します。助成の可否は計画届の内容に基づき、管轄の都道府県労働局が判断します。

計画届に添付するカリキュラム資料（時間数、回ごとの内容、実施形態）をご用意します。助成金の申請書類の作成・提出の代行は、社会保険労務士の業務のため行いません。事業展開等リスキリング支援コースは令和8年8月3日に改正されています（経過措置あり）。制度の内容は助成金ガイドと、厚生労働省「人材開発支援助成金」でご確認ください。

この講座についてのよくある質問