HTML+CSS研修（１）　オリエンテーション

🗓️ 研修全体の構成（2日間）

日程内容概要
1日目HTMLとCSSの基本、構造と意味、セマンティックなマークアップ、ボックスモデルとレイアウトの基礎
2日目実践的なCSS、Flexbox、簡単なレスポンシブ対応、模擬サイトの作成演習

📘 1日目カリキュラム：HTML/CSSの基礎と構造理解

時間帯内容詳細
10:00〜10:30オリエンテーション研修の目的、ゴールの共有、Web制作の流れの概要
10:30〜11:30HTMLの基礎タグの構造、DOCTYPE、head・body、基本的な要素（h1〜h6, p, a, img, ul/ol, table）
11:30〜12:30セマンティックHTMLheader, nav, main, section, article, footerの使い分けと意味
13:30〜14:30CSSの基本とセレクタ外部CSS、基本セレクタ（要素・クラス・ID）、プロパティの書き方
14:30〜15:30ボックスモデルの理解margin, padding, border, width/height、box-sizingの違い
15:30〜17:00レイアウト基礎と演習display（block, inline, inline-block）、簡単な2カラムレイアウト作成演習

進捗を見ながら
「フォーム（入力フォーム）について」を学習します。１日目最後か、２日目最初になります。

📘 2日目カリキュラム：レイアウト応用と模擬サイト制作

時間帯内容詳細
10:00〜11:30Flexboxの基礎display: flex、主軸・交差軸、justify-content, align-items、横並びレイアウト
11:30〜12:30実務的なCSS設計クラス命名規則（BEM）、再利用性を意識した書き方、:hoverやトランジションの使い方
13:30〜14:30レスポンシブ対応入門meta viewportの説明、@mediaでの簡単なブレイクポイント対応（スマホ・PC）
14:30〜16:30模擬サイト制作（演習）ヘッダー・メイン・フッター構成のLP風ページをコーディング（PC・スマホ対応）
16:30〜17:00発表＆まとめ成果発表、フィードバック、質疑応答、まとめと今後の学習アドバイス

🎯 到達目標（ゴール）

  • HTMLとCSSの基本的な構文を理解し、セマンティックにマークアップできる
  • Flexboxを使ってレイアウトが組める
  • スマホとPCで見た目が切り替わる簡易レスポンシブ対応ができる
  • 1ページ完結のLP的Webページが一人で作れるようになる

💡 補足ポイント（実務に活かすために）

  • Chromeのデベロッパーツールの使い方も軽く触れる
  • 実務に即したテーマ（例：会社紹介、カフェ紹介ページなど）で演習
  • VSCodeなどのエディタ操作も研修内でナビゲートは考慮中

🌐 Web制作の流れ（概要）

Webサイトを作るには、ただHTMLやCSSを書くのではなく、企画から公開・運用までの一連の流れを把握しておくことが大切です。

✅ 全体の流れ（5ステップ）

① 企画・要件定義
↓
② ワイヤーフレーム・デザイン
↓
③ コーディング（HTML/CSS/JS）
↓
④ テスト・確認
↓
⑤ 公開・運用

🔍 各ステップの解説

① 企画・要件定義

  • サイトの目的（例：会社紹介、採用、商品販売など）を明確に
  • ターゲットユーザー、必要なページ、機能を整理
  • 「誰に何を伝えるか？」をはっきりさせる

② ワイヤーフレーム・デザイン作成

  • ワイヤーフレーム：画面のざっくりした設計図（レイアウトの確認）
  • デザインカンプ：実際の見た目に近い完成イメージ（色・フォント含む）
  • 使用ツール：Figma / Adobe XD / Photoshop など

③ コーディング（HTML＋CSS＋JS）

  • HTML：構造を作る（骨組み）
  • CSS：見た目を整える（デザイン）
  • JavaScript（必要に応じて）：動きを加える

📌 この工程を今回の研修で重点的に学習！

④ テスト・確認

  • ブラウザチェック（Chrome, Safari, Edge など）
  • スマホ・タブレット表示の確認（レスポンシブ対応）
  • リンク切れ・画像表示・動作チェック

⑤ 公開・運用

  • サーバーへアップロード（FTPやGitなど）
  • ドメイン設定（URLの決定）
  • 公開後は更新・改善・アクセス解析も重要！

💡 現場ではこんな役割分担があることも

担当役割
ディレクター要件整理、進行管理
デザイナーワイヤー・デザイン制作
コーダーHTML/CSS/JSでコーディング
エンジニアサーバー設定、システム開発など

🧾 まとめ（初心者向けポイント）

  • HTML/CSSは全体の中の「見た目づくり」パート
  • 自分がどこを担当しているのか、上流〜下流の流れを知っておくと◎
  • 実務ではチーム連携も大切！

☕ Javaプロジェクトにおける デザインと実装の進め方（概要）

Javaを用いたプロジェクトでは、Web制作よりも仕様やアーキテクチャの設計が重視されます。
ここでは一般的なJavaプロジェクト（Webアプリや業務システム）における進め方を紹介します。

✅ 全体の流れ（6ステップ）

① 要件定義
② 画面設計 / 処理設計
③ アーキテクチャ設計
④ 実装（バックエンド / フロントエンド）
⑤ 単体・結合テスト
⑥ 本番公開・運用

🔍 各工程の補足

① 要件定義（ビジネス要件の整理）

  • お客様や業務部門と相談して、必要な機能や業務フローを明確にする
  • 機能一覧やデータ項目の洗い出し
  • Javaの場合、帳票・バッチ処理・データ連携なども多く関わる

② 画面設計 / 処理設計（UI・機能の設計）

  • 画面設計（UI設計）：画面遷移図、画面レイアウト、入力項目の定義など
  • 処理設計：ボタンを押した時の動きや、DBとのやり取りの流れ
  • よく使う資料：
    • 画面一覧、画面遷移図
    • 入出力仕様書（I/O）
    • 処理フロー図（ロジック設計）

③ アーキテクチャ設計（技術構成の設計）

  • フレームワーク選定（Spring Bootなど）
  • パッケージ構成、レイヤー構成（MVC、DDDなど）
  • データベース構造の設計（ER図、テーブル定義書）

📌 Javaでは「設計の型（パターン）」を守ることが重要
→ 「Controller」「Service」「Repository」などの役割を明確に

④ 実装（開発作業）

  • バックエンド（Java）：ビジネスロジック、DBアクセス、API実装など
  • フロントエンド（HTML/CSS/JavaScript）：画面表示、入力チェックなど（JavaではJSPやThymeleafを使うケースも）

👉 フルスタックJavaの場合、フロントもサーバー側で制御することが多い
＊「フルスタックJava（Full Stack Java）」とは、Javaを使ってWebアプリケーションの「フロントエンドからバックエンドまで」を一貫して開発できるスキルや構成のことを指します。

⑤ テスト（単体・結合・総合）

  • 単体テスト：メソッドやクラス単位での検証（JUnitなど使用）
  • 結合テスト：複数機能のつながり確認
  • 総合テスト：要件通りに動作するか、業務シナリオで検証

⑥ 本番公開・運用

  • WAR/JARファイルのビルドとデプロイ
  • 本番用サーバー（Tomcat, JBossなど）にリリース
  • 障害対応・ログ監視・保守開発

🏗 Javaプロジェクト特有のポイント

項目内容
型が厳密事前にクラス設計・インターフェース設計が必要
レイヤー分離Controller / Service / DAOなどに責務を分ける
フレームワーク利用Spring, Struts, JSFなど多数。選定に注意
設計ドキュメントが重要クラス図・ER図・シーケンス図などを活用

📘 Web制作との違い（簡単比較）

項目Web制作Javaシステム開発
主体見た目重視（HTML/CSS）ロジック重視（Java）
設計軽め（ワイヤー中心）重め（クラス図やDB設計も）
工程短期で完結しやすい要件・設計が長期に渡ることも
テスト主に表示確認単体・結合など多段階テスト

✍ まとめ

  • Java開発では、「動く前に設計」する文化が強い
  • 設計と命名のルール（パッケージ・クラス・メソッド）がプロジェクト品質に直結
  • UI/UXやHTML/CSSの知識も持っていると、画面側との連携がスムーズ