ダレカン和泉Web制作・開発基礎カリキュラム

プロへの道 » フロントエンドコース » ユニット1

フロントエンドコース ユニット1 | 目安: 120時間 (約1.5ヶ月)

模写コーディングとGit ― 実務の土台を作る

フロントエンドの上達法で、世界中のプロが口をそろえるのが模写です。見本そっくりに組む練習は、観察力と実装力を同時に鍛えます。このユニットでは、模写に必要な道具 (意味のあるHTML・Flexbox・Grid・レスポンシブ) と、実務の必需品Gitをまとめて手に入れます。

このユニットのゴール 見本のデザインを「意味のあるHTML + 崩れないCSS」で再現し、Gitで記録しながらGitHubで公開できるようになる。

進め方の地図

週 やること 仕上がるもの
1週目 授業1: 意味のあるHTML 自己紹介ページの書き直し
2週目 授業2: Flexbox徹底 定番レイアウト部品4つ
3週目 授業3: Grid入門 写真ギャラリー
4週目 授業4: レスポンシブ設計 スマホ・PC両対応のカード列
5週目 授業5: Gitの日常運用 GitHubで管理された練習フォルダ
6週目 月末制作: 模写2本 公開された模写LP
演習のリードは3段階です。「リードつき」は1手ずつ案内し、「ヒントだけ」は方針のみ、「リードなし」はお題だけです。後ろほど薄くなるのはわざとです。15分悩んだらヒントか答えを見てOK。写してから理解するのも立派な学習です。

授業1: 意味のあるHTML ― divだらけを卒業する

同じ見た目でも、プロのHTMLは「ここはヘッダー」「ここが本文」と意味で書かれています。意味のあるタグは、検索エンジンにも、読み上げソフトにも、半年後の自分にも優しいコードです。覚える主役は7つだけ ― header / nav / main / section / article / aside / footer。

例題 (リードつき) | divだらけのページに意味をつける
  1. 「悪い例」を見るこういうHTML、Step 2の自分は書いていたはずです。 
    <div class="top">わたしのページ</div>
<div class="naka">
  <div>好きなもの</div>
  <div>猫と音楽です。</div>
</div>
<div class="shita">2026年</div>
  2. 意味タグに置きかえる同じ内容を、意味で書き直します。 
    <header>
  <h1>わたしのページ</h1>
</header>
<main>
  <section>
    <h2>好きなもの</h2>
    <p>猫と音楽です。</p>
  </section>
</main>
<footer>2026年</footer>
  3. 見出しの階層を確かめるh1 はページに1つ、その下は h2 → h3 の順で、飛ばさないのがルールです。
  4. 表示して確認する見た目はほぼ同じです。それでいいのです。変わったのは「機械と人間への伝わりやすさ」です。
演習 1-A (リードつき) | 自分の過去作品を意味タグで書き直す

お題: Step 2で作った自己紹介ページ (または見本) を、7つの意味タグと正しい見出し階層で書き直します。

  1. 紙に区画を描くページを「ヘッダー / 本文 (いくつかのまとまり) / フッター」に区切った簡単な図を描きます。
  2. 区画ごとにタグを決める図の各区画に header・section などのタグ名を書き込みます。
  3. コードに写す図のとおりにHTMLを組み直します。CSSは後回しで構いません。
答え合わせ: 開発者ツール (F12) でこのカリキュラムサイトを覗いてみましょう。header・main・section・footerが、どう使われているかが実例で確認できます。
演習 1-B (ヒントだけ) | 実在サイトのタグ調査

お題: 好きなサイトを2つ開き、開発者ツールで「どの意味タグを使っているか」「h1には何が書いてあるか」を調査してメモします。

ヒント: F12 → 左上の矢印アイコンで要素を選ぶと、対応するHTMLにジャンプします。大手サイトほど意味タグがきれいで、教材として優秀です。

授業2: Flexbox徹底 ― 「並べる」の主砲

Step 4でも触れたFlexboxを、定番部品4つで体に焼きつけます。合言葉は「並べたい子たちの親に display: flex」です。

例題 (リードつき) | 定番その1: ヘッダーナビ
  1. HTML: 
    <header class="site-head">
  <div class="logo">パンの森</div>
  <nav class="menu">
    <a href="#">メニュー</a>
    <a href="#">お知らせ</a>
    <a href="#">アクセス</a>
  </nav>
</header>
  2. CSS: 
    .site-head {
  display: flex;
  justify-content: space-between; /* 両端に分ける */
  align-items: center;            /* 縦の中央をそろえる */
  padding: 16px 24px;
}
.menu {
  display: flex;
  gap: 24px;
}
  3. 実験するブラウザ幅を変えて、ロゴが左・メニューが右に張りつくのを確認します。次に space-between を center に変えて、何が起きるか観察します。変えて壊して戻すのが、CSSの一番の勉強法です。
演習 2-A (リードつき) | 残り3つの定番部品

お題: 次の3部品を、1つのHTMLファイルに作ります。それぞれFlexboxの別の顔を使います。

  1. カード3枚の等幅列: 親に display: flex; gap: 16px;、子に flex: 1;。3枚が等しい幅で並びます。
  2. メディア行 (アイコン + 文章): 親に display: flex; gap: 12px; align-items: flex-start;。アイコンが上ぞろえで横につき、文章が伸びます。お知らせ一覧などの定番です。
  3. ど真ん中配置: 高さのある親に display: flex; justify-content: center; align-items: center;。ヒーロー (大きな看板) の定番です。
答え合わせ: 各部品の文章量を2倍にしても崩れなければ合格です。崩れたら、幅や高さを固定しすぎていないかを疑いましょう。
演習 2-B (リードなし) | このサイトのヘッダーを再現する

お題: いま見ているこのカリキュラムサイトのヘッダー (左にサイト名、右に丸いボタンの並び) を、自分のコードでそっくりに作ります。開発者ツールで覗くのは、詰まってから。

授業3: Grid入門 ― 縦横を一気に決める

Flexboxが「1方向に並べる」道具なら、Grid (グリッド) は「縦横のマス目を一気に敷く」道具です。写真ギャラリーや料金表など、マス目状のレイアウトで威力を発揮します。

例題 (リードつき) | 3列の写真ギャラリー
  1. HTML: class="gallery" の div の中に、画像 (または色つきの div) を6個入れます。素材は pan.png・neko.png・hana.png を使い回せます。
  2. CSS: 
    .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 等幅3列 */
  gap: 16px;
}
  3. 実験するrepeat(3, 1fr) の3を4や2に変えて、列数が一発で変わるのを確認します。Flexboxとの一番の違いは、この「列数を親が決めきる」感覚です。
  4. 1枚だけ大きくする目立たせたい1枚に grid-column: span 2; を指定すると、2列ぶんに広がります。雑誌風レイアウトの入り口です。
演習 3-A (ヒントだけ) | FlexとGridの使い分け表を作る

お題: ここまで作った部品 (ナビ・カード列・メディア行・ど真ん中・ギャラリー) を見直して、「Flexが向く場面 / Gridが向く場面」を自分の言葉で表にまとめます。

ヒント: 迷ったときの実務の定番は「1方向に流すならFlex、マス目を敷くならGrid」です。自分の表がこの結論に近づいていれば、理解は本物です。

授業4: レスポンシブ設計 ― スマホから書く

Step 4の「スマホ対応に改修」では、できあがったページを後から直しました。プロは逆で、最初からスマホ向けに書き、広い画面用の上書きを後から足します (モバイルファースト)。後から足す方が、CSSが短く単純になるからです。

例題 (リードつき) | カード列を「1列 → 3列」に育てる
  1. スマホの形 (縦1列) を基本にする 
    .cards {
  display: flex;
  flex-direction: column; /* まず縦に積む */
  gap: 16px;
}
  2. 広い画面のときだけ横に並べるCSSの下に追記します。 
    @media (min-width: 700px) {
  .cards {
    flex-direction: row; /* 700px以上なら横並び */
  }
}
  3. 動かして確かめるブラウザの幅をゆっくり変えて、700pxを境に切り替わるのを見ます。F12 → デバイスアイコンでスマホ表示の検証もしましょう (Step 4でやった技です)。
  4. viewportを忘れないHTMLの <head> に <meta name="viewport" content="width=device-width, initial-scale=1.0"> があるか確認します。これがないと、スマホ実機で全部が縮小表示されます。
演習 4-A (ヒントだけ) | 過去作品をモバイルファーストに書き直す

お題: 授業2で作った部品ページ全体を、「スマホで自然 → 700px以上で横に展開」のモバイルファーストに書き直します。

ヒント: 直すのは「横並び指定を @media (min-width: 700px) の中へ引っ越す」だけのことが多いです。ナビだけは、スマホでは縦積みより「横スクロール」も定番です (このサイトのナビがその実例です)。

授業5: Gitの日常運用 ― 作業を記録する文化

Git (ギット) は「ファイルのセーブポイント」を残す道具で、現場では空気のように毎日使います。Step 4のフロントエンドコースで触れた人も、ここで日常の型に固めます。コマンドは、まず4つで十分です。

例題 (リードつき) | 練習フォルダをGit管理にして、GitHubへ
  1. Gitを入れるgit-scm.com からインストールします (設定は全部そのまま「Next」でOKです)。VS Codeのターミナル (Ctrl + @) で git --version と打ち、数字が出れば成功です。
  2. 名乗る (最初の1回だけ) 
    git config --global user.name "yamada"
git config --global user.email "自分のメールアドレス"
  3. セーブポイントを作るこのユニットの練習フォルダで、 
    git init
git add .
git commit -m "ユニット1の練習: 意味タグとFlexbox"
    init は最初の1回、add → commit が毎回のセーブです。
  4. GitHubに置き場を作るGitHubで「New repository」を作り、画面に表示される git remote add origin … と git push -u origin main の2行を、そのままターミナルに貼って実行します。
  5. ブラウザで確認するGitHubのページを再読み込みして、自分のコードが上がっていれば完了です。以後は add → commit → push の3拍子だけで更新できます。
コミットメッセージの型: 「何をしたか」を短く書きます。良い例:「ナビをFlexboxで横並びに」。避けたい例:「修正」「いろいろ」。1つの変更ごとに1コミットが理想です。未来の自分への置き手紙だと思って書きましょう。
演習 5-A (ヒントだけ) | 1週間、毎日コミットする

お題: ここから1週間、学習した日は必ず1コミット以上を積みます。GitHubのプロフィールに緑のマスが並んでいきます。

ヒント: この緑のマスは「継続の見える化」で、採用側も見る場所です。卒業時に数ヶ月分の緑が並んでいたら、それ自体が「学び続けられる人」の証明になります。

月末制作: 模写2本 ― 見て、組んで、答え合わせ

月末制作

このユニットの卒業試験は模写です。答えつきなので、安心して挑んでください。

  1. 1本目: パンの森LP完成画像 mihon-lp.png だけを見て、ゼロからHTML / CSSで組みます。コード見本 lp-mihon.html は最後の答え合わせまで開かない、が腕試しのルールです (詰まったら15分ルールで開いてOK)。
  2. 答え合わせ自分のコードと見本を見比べて、「見本の方が短い・きれいな場所」を3つ探してメモします。差分こそが教材です。
  3. 2本目: 実在サイトの1画面好きな実在サイトのトップ1画面を選び、模写します。画像は灰色の四角で代用してOKです。文章・色・余白はできる限り正確に写します。
  4. レスポンシブにする2本ともスマホ幅で自然に見えるよう、メディアクエリを入れます。
  5. 公開して発表するGitHubにpushし、GitHub Pages (リポジトリのSettings → Pages → Branchをmainにして保存) で公開します。URLをスタッフに送り、工夫した点を3つ話しましょう。
模写の公開マナー: 実在サイトの模写は、練習の証拠としてはOKですが、ロゴや写真をそのまま使った公開は避けます。「◯◯サイトの模写練習」と明記し、画像は差しかえましょう。

つまずきやすいポイント

CSSが効かないとき: 原因の御三家は「スペルミス」「セミコロン忘れ」「親子の取り違え (flexを子に書いた)」です。開発者ツールで要素を選び、書いたはずのCSSが出てくるかを最初に確かめましょう。打ちまちがいなら、その場で取り消し線つきで表示されます。
Gitが怖いとき: 壊れたように見えても、コミットさえしてあれば必ず戻れます。困ったら、エラー文をそのままAIに貼って「どういう状態? どう戻す?」と聞きましょう。Gitのエラーは新人全員が通る道です。

発展チャレンジ (余力のある方へ)

発展チャレンジ
  • 模写1本目を「デザインコースのカンプから実装」に差しかえてみましょう。デザインコースの利用者さんがいれば、カンプをもらって実装する ― 本物の分業体験ができます。
  • git log --oneline で自分の歴史を眺め、「メッセージだけで作業内容を思い出せるか」を採点してみましょう。
  • CSSの :hover と transition で、カードがふわっと浮く動きをつけてみましょう (このサイトのカードが実例です)。

できたチェック