HTML+CSS研修テキスト（2日間）

HTML+CSS研修テキスト（概略）

オリエンテーション

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

🕙 10:30〜11:30 HTMLの基礎

◆ タグの構造と基本

  • HTMLは <タグ名>〜</タグ名> で囲む
  • <!DOCTYPE html> はHTML5の宣言

◆ head・body構造

  • <head>: メタ情報（タイトル・文字コードなど）
  • <body>: 表示される本体部分

◆ 基本要素

  • h1〜h6: 見出し
  • p: 段落
  • a: リンク
  • img: 画像
  • ul / ol / li: リスト
  • table: 表
<p><a href="https://example.com">リンク</a></p>
<img src="sample.jpg" alt="画像">

🕚 11:30〜12:30 セマンティックHTML

◆ セマンティックタグとは？
→ 構造に意味を持たせるHTML5の要素

◆ 主なタグと役割

  • <header>: ヘッダー
  • <nav>: ナビゲーション
  • <main>: 主コンテンツ（1ページに1つ）
  • <section>: 意味ある区切り
  • <article>: 独立した記事
  • <footer>: フッター
<body>
  <header>サイトロゴ</header>
  <nav>メニュー</nav>
  <main>
    <section>サービス</section>
    <article>ブログ</article>
  </main>
  <footer>会社情報</footer>
</body>

🕜 13:30〜14:30 CSSの基本とセレクタ

◆ CSSとは？
→ 見た目を装飾するためのスタイル指定

◆ 書き方の種類

  • インライン、内部、外部（推奨）

◆ セレクタ

  • 要素セレクタ: p { color: red; }
  • クラス: .blue { color: blue; }
  • ID: #main { font-size: 20px; }

◆ 基本構文

セレクタ {
  プロパティ: 値;
}

🕟 14:30〜15:30 ボックスモデル

◆ ボックス構造

  • margin: 外側余白
  • border: 枠線
  • padding: 内側余白
  • width/height: 内容サイズ

◆ box-sizing

  • content-box（初期値）: paddingやborderはwidthに含まれない
  • border-box（実務で推奨）: 全部含めて指定サイズになる
.box {
  padding: 20px;
  border: 2px solid black;
  box-sizing: border-box;
}

🕠 15:30〜17:00 レイアウト基礎と演習

◆ display の種類

  • block: 縦に並ぶ（div, pなど）
  • inline: 横に並ぶ（a, spanなど）
  • inline-block: 横並び＋幅/高さ指定可能

◆ 2カラムレイアウト例

.left {
  float: left;
  width: 30%;
}
.right {
  float: right;
  width: 70%;
}

◆ Flexbox版（発展）

.container {
  display: flex;
}

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

🕙 10:00〜11:30 Flexboxの基礎

◆ display: flex の基本

  • 子要素を横に並べるには親要素に display: flex を指定

◆ 主軸と交差軸

  • 主軸: 横方向（row）/ 縦方向（column）
  • 交差軸: 主軸と直交する方向

◆ 主なプロパティ

  • justify-content: 主軸方向の配置
  • align-items: 交差軸方向の揃え
<div class="flex-container">
  <div>①</div><div>②</div><div>③</div>
</div>
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

🕚 11:30〜12:30 実務的なCSS設計

◆ BEM命名規則

  • .btn, .btn__icon, .btn--large のように構造的に命名

◆ 再利用性を意識した設計

  • 汎用的なクラスを分離して使い回す

◆ :hover や transition

.button {
  background: blue;
  color: white;
  transition: background 0.3s;
}
.button:hover {
  background: darkblue;
}

🕜 13:30〜14:30 レスポンシブ対応入門

◆ meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

◆ メディアクエリ例

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

🕟 14:30〜16:30 模擬サイト制作（演習）

◆ ページ構成

  • <header>: ロゴ、ナビゲーション
  • <main>: サービス紹介など
  • <footer>: 会社情報、問い合わせ

◆ 要件

  • Flexboxでのレイアウト
  • ホバー効果、transition使用
  • レスポンシブ対応（PC・スマホ両方）