コーディングチェックポイント

制作フォルダをダウンロード

1. 学校サーバー「HTML講座」内から制作フォルダ「osarai_recruit」をダウンロードします。
   ※ダウンロード先：ローカル（自分のPC内）の「HTML講座」内にダウンロード
2. 「osarai_recruit」を「h05_XX（出席番号）」に変更してください。
3. フォルダ内の下記ファイルを使用してコーディングしてください。
   ※2ページ以上必要な場合は適宜ファイルを作成してください
   • index.html：トップページ
   • css/style.css：デザイン定義ファイル
   • imgフォルダ：画像保管フォルダ

生成AIにコードを書いてもらう

1. Figmaで作成したデザインカンプをエクスポートします。
2. エクスポートした画像を使って生成AIにコードを書いてもらいます。
   ※グループでよいコードが生成できた時は共有しましょう
   　学校サーバの「コード共有フォルダ」を使ってください。
   ※必要に応じてプロンプトを書き換えましょう

# 命令
あなたは熟練したフロントエンドエンジニアです。
添付したデスクトップのデザインカンプ（画像）を分析し、それを忠実に再現する HTML と CSS のコードを作成してください。

# 制約条件と技術スタック
1. **HTML構造:**
   - HTML5、セマンティックなマークアップ（header, main, section, footer, article等）を徹底してください。
   - アクセシビリティ（a11y）を考慮し、画像には文脈に沿ったalt属性を含めてください。
2. **CSSスタイリング:**
   - **標準CSS（Vanilla CSS）**を使用してください。
   - **CSS変数（Custom Properties）**は使用しないでください。
   - **ResetCSS**: `destyle.css` のCDNリンクをHTMLに記述してください。
   - **命名規則**: BEM（Block Element Modifier）を採用してください。
   - **レイアウト**: FlexboxとCSS Gridを適材適所で使い分けてください（不要なdivネストを避けること）。
   - **レスポンシブ**: デスクトップファースト（`max-width`）で記述し、640px以下をSP表示として調整してください。
     ※SP時のレイアウトは、一般的なWebの作法（カラム落ちなど）に従ってよしなに調整してください。
3. **デザイン解釈のルール:**
   - **デザインの変更、文章の修正、表現の改善は絶対に行わないでください。**
   - フォント: Google Fonts「Noto Sans JP」または「Roboto」を読み込んでください。
   - 数値の正規化: 画像から読み取れる余白やサイズは、**8pxまたは4pxの倍数**に近い値に正規化して定義してください（例: 17pxに見えたら16pxにする）。
   - 画像: `https://placehold.jp/{width}x{height}.png` を使用し、デザインに近いサイズを指定してください。
  
# 出力形式
- HTMLファイルとCSSファイルを別々のコードブロックで出力してください。

# 命令
あなたは熟練したフロントエンドエンジニアです。
添付したデスクトップのデザインカンプ（画像）を分析し、それを忠実に再現する HTML と CSS のコードを作成してください。

# 制約条件と技術スタック
1. **HTML構造:**
   - HTML5、セマンティックなマークアップ（header, main, section, footer, article等）を徹底してください。
   - アクセシビリティ（a11y）を考慮し、画像には文脈に沿ったalt属性を含めてください。
2. **CSSスタイリング:**
   - **標準CSS（Vanilla CSS）**を使用してください。
   - **CSS変数（Custom Properties）**は使用しないでください。
   - **ResetCSS**: `destyle.css` のCDNリンクをHTMLに記述してください。
   - **命名規則**: BEM（Block Element Modifier）を採用してください。
   - **レイアウト**: FlexboxとCSS Gridを適材適所で使い分けてください（不要なdivネストを避けること）。
   - **レスポンシブ**: デスクトップファースト（`max-width`）で記述し、640px以下をSP表示として調整してください。
     ※SP時のレイアウトは、一般的なWebの作法（カラム落ちなど）に従ってよしなに調整してください。
3. **デザイン解釈のルール:**
   - **デザインの変更、文章の修正、表現の改善は絶対に行わないでください。**
   - フォント: Google Fonts「Noto Sans JP」または「Roboto」を読み込んでください。
   - 数値の正規化: 画像から読み取れる余白やサイズは、**8pxまたは4pxの倍数**に近い値に正規化して定義してください（例: 17pxに見えたら16pxにする）。
   - 画像: `https://placehold.jp/{width}x{height}.png` を使用し、デザインに近いサイズを指定してください。
  
# 出力形式
- HTMLファイルとCSSファイルを別々のコードブロックで出力してください。

精度が悪い時の対応方法

「新しいチャット」や「一時チャット」で試しましょう

過去のやり取りが原因でよりよいコードが生成されないことがあります。左パネル内の「チャットを新規作成」や「一時チャット」を利用してコードを生成してみましょう。

「Gemini」は「思考モード」を使いましょう（1日の回数制限あり）

Geminiの「思考モード」を使うことで画像解析の精度があがります。ただし回数制限があるので最初のベースコード生成に利用し、細かいデザイン調整では「高速モード」を利用しましょう。

ページ全体ではなくセクション（パーツ）単位でコードを生成しましょう

ページ全体でよいコードが生成されない時はセクション（パーツ）単位で画像をエクスポートしてコードを生成してみましょう。

「Claude」も利用してみましょう

コーディングやプログラミングに強い生成AI「Claude」を使ってコードを生成してましょう。

グループで精度の良いコードを共有しましょう

同じデザインで課題に取り組んでいます。他の人のコードをうまく取り入れて対応していきましょう。

学校サーバの「コード共有フォルダ」を使ってください。

コーディング

1. HTMLファイル内のテキストを正しいテキストに変更しましょう。
2. Figmaから画像をエクスポートしてimgフォルダに書き出しましょう。
   ※書き出しファイル名は「半角英数」でつけること
   ※適切なファイル形式を選択すること
   • 写真：「JPG」
   • 透明・半透明があるばあい：「PNG」
   • ロゴ：「SVG」
3. HTMLやCSS内の画像部分を変更しましょう。
4. デベロッパーツールを使って細かいデザインを調整しましょう。
   • Figmaの値を確認しながらCSSを変更しましょう。
   • 実現したいデザインを言語化しながらコードを考えましょう。
   • 生成AIに作業しているパーツのHTMLとCSS、言語化した実現したいことを伝えてコードの提案を受けましょう。
     ※マークダウンのコードブロックをうまく使うこと：MarkDown記法

グループ構成確認のコード

div,
header,
footer,
nav,
article,
section,
figure {
  border: solid 3px #666;
  margin: 20px;
}

div,
header,
footer,
nav,
article,
section,
figure {
  border: solid 3px #666;
  margin: 20px;
}

アップロード

学校サーバの「h05」フォルダ内に完成した「h05_XX（出席番号）」フォルダをアップしてください。