第2回課題ガイド

HTML+CSS入門 — 課題のやり始め方

2026.04.19

前提

このガイドの前提

配布した素材であるalgorithm2026/02_20260416/assignment フォルダをVSCodeで開いた状態からスタートします。（右のキャプチャ画像参照）

そもそもこの状態にできないよ！という方は、ご遠慮なくメールでご連絡ください！

STEP 1

HTMLをブラウザで開く

操作

ブラウザで開く（1/2）

VSCodeのエクスプローラーで assignment/index.html を右クリック
「Finder で表示」（Mac） / 「エクスプローラーで表示」（Windows）を選ぶ

操作

ブラウザで開く（2/2）

開いたウィンドウから index.html をダブルクリックすると、index.htmlの中身がブラウザに表示されます！

表示されたページは真っ白ですが、真っ白で問題ありません！

操作

Live Server が入っている人は、こちらの方が楽

VSCodeで assignment/index.html を右クリック
「Open with Live Server」を選ぶ
Chromeが立ち上がり、ページが表示される

保存するたびにブラウザが自動で再読み込みされます。
プラグイン入れてない方！設定方法はオリエン動画関連フォルダの中の03_vscode-plugin.mp4で解説していますよ！

STEP 2

文字起こしテキストをHTMLに貼り付ける

操作

文字起こしテキストはどこに貼る？

assignment/orientation_text.md を開いてテキストをコピー
assignment/index.html の <body> と </body> の間に貼り付け

<body>
  <!-- ここに貼り付け -->
</body>

講義

貼り付けたらどうする？

STEP 1 で表示した真っ白なブラウザ画面に戻って、 Ctrl + R（Macは Cmd + R）で再読み込みしてください。

Live Server を使っている人は自動で更新されます。

                改行もない長い文字列が表示されればOK！

                画面に表示したい情報は、<body> と </body> の間に書くと覚えてください。

STEP 3

タグで意味付けしていく

推奨

タグを書く前に、まず「文字起こしテキストの要約」しよう

お渡しした文字起こしテキストは話し言葉で冗長です
そのまま全部マークアップは地獄になります
まずは動画から読み取った意図を踏まえて骨子に縮めましょう

            要約は AIに頼んでOK。

            ただし「動画で話している内容」と矛盾が生じないように注意！

操作

Google AI Studio で要約する

Google AI Studio を開く
文字起こしテキストを貼り付け
下のような指示を添えて送信

このオリエンテーション動画の文字起こしを、
内容が改変されないようにしつつ、
構造（見出し・本文・リスト）が
分かるように要約してください。

操作

要約テキストを、もう一度 `index.html` に貼り直す

AIが作った要約をすべてコピー
index.html を開いて、<body>〜</body> 内の文字をすべて削除
AIが要約したテキストを同じ場所に貼りつけ直す

ブラウザを再読み込みすると、内容が要約版に切り替わっているはずです。

講義

2〜3個だけタグで囲んでみる

<h1>オリエンテーション</h1>
<p>こんにちは。担当のコスゲです。</p>
<h2>この授業について</h2>

保存して更新すると、見出しと本文が見た目で区別されます。

講義

動画を見て意図を汲み取り、HTMLタグで囲んでいきましょう

動画から読み取った意図がコンピューターにも伝わるように、各テキストをタグで囲んでいきます。

強調されていた箇所 → <strong> で囲む
話の構造（主・補足・例） → 見出しレベル <h1> <h2> で表現
順番が大事なリスト → <ol>、順番不問 → <ul>

動画を見て意図を汲み取ること、これが課題の中心です。

STEP 4

CSSの基本を書く

操作

`style.css` に書いていく（1/2）

h1 {                  /* h1タグのデザインを変えたい！ */
  color: #2D4084;     /* 文字の色を紺色にする！ */
  font-size: 28px;    /* 文字の大きさを28pxにする！ */
}

p {                   /* pタグのデザインを変えたい！ */
  line-height: 1.8;   /* 行と行の間隔を1.8にしたい */
}

保存したらブラウザで Ctrl + R（Macは Cmd + R）で再読み込みすると変化が見えます。
Live Server を使っている人は自動で更新されます。

操作

`style.css` に書いていく（2/2）— どこに書く？

VSCode で style.css を開いて、ファイルの中に直接書きます。

注意

`/* */` の中に書いた CSS は効かない

/* と */ で囲んだ部分は「コメント」と呼ばれ、ブラウザに無視されます。
メモを残すために便利ですが、その中にCSSを書いてしまうと一切効きません。

❌ 効かない

/*
h1 {
  color: red;
}
*/

全部コメント扱い → 何も変わらない

⭕️ 効く

h1 {
  color: red;   /* メモはここ */
}

CSSは外に書く。メモだけコメントに

講義

思い通りのデザインにしたいときは、AIに下地を書かせる

CSSは「色」「サイズ」「余白」など書くことが多くて、ゼロから全部書くのは大変。
まずは AIにCSSの下地を書いてもらって、自分で気になる箇所を直していくのがおすすめです。

            「AI 7 ： 自分 3」の役割分担を意識するとGood！

            下地はAIを活用しつつ、いろいろな箇所をいじりながら動き方を理解していきましょう！

講義

AIに書かせるときは、意図を言葉にする

            NG例
            「おしゃれにして」「いい感じにして」

            OK例
            「業務マニュアル風、落ち着いた色、読みやすく」
「親しみやすい、柔らかい色、余白多め」

          

AIが作ったCSSを style.css に貼り付けて確認します。

STEP 5

仕上げるときに気をつける3つの軸

講義

気をつけるポイント — この3つを軸に進める

動画で話していることと、意図がずれていないこと
要約や言い換えで内容が変わっていないか、動画と見比べて確認
コンピュータに伝えるために、HTMLをできるだけ正しく使うこと
見出しは <h1><h2>、段落は <p>、強調は <strong> など
人間に視覚的に意図が伝わるように、CSSを使うこと
大事なところを目立たせる、雰囲気を内容に合わせる

            「動画で◯◯と言っていた → だから◯◯にした」と説明できる状態を目指してみてください！
          

注意

AIに頼むときは「どこをどう変えてほしいか」を明示する

指示が曖昧だと、AIが返す内容が 「何をどこに貼ればいいか分からない」状態になります。 出力する範囲・形式を最初の指示でコントロールしましょう。

❌ 曖昧

「もっと見やすくして」

→ 何が提示されるか不明。HTMLとCSSが混じる、部分だけ提示されるなど

⭕️ どこを、どう変えたいかを伝える

                「style.css の〇〇を、

                〇〇な印象に変えたいです。

                どこを、どう変えればいいかを教えてください」

→ 自分の意図を言葉にして、AIに具体的な変更箇所を聞く

注意

頼む前に、AIに「今こうなっています」を伝える

AIはあなたのファイルの中身を見ていません。
今の style.css の中身を貼って渡さないと、的外れなコードを提示されます。

指示テンプレ

今の style.css は以下の通りです。

[ここに style.css の中身を全部貼る]

このうち〇〇を〇〇に変えたいです。
どこを、どう変えればいいかを教えてください。

必要に応じて index.html の中身も一緒に貼ると、AIがどのタグに効かせればいいか正確にわかります。

注意

一部だけ直したいときも、まず今の状態を見せる

「この部分だけ直して」と頼むときも、今の中身を見せてから変更点を伝えるのが基本です。

今の style.css の 〇〇 部分は以下です。

[現状のコードをここに貼る]

この〇〇を〇〇にしたいです。
このコードの「どこを、どう書き換えればよいか」を、
変更後のコードと一緒に教えてください。

提出物

提出方法

02_20260416_data フォルダを丸ごとZIP圧縮して提出してください。

            中身
            index.html — 動画の内容をマークアップしたもの
style.css — 自分で意図を込めたCSS
memo.md — 解釈メモ（次のスライドで内容を説明）

          

圧縮の仕方 — フォルダを右クリック →「圧縮」（Mac）/「ZIPに圧縮」（Windows）

提出物

`memo.md` に書く内容

「動画の意図をどう汲み取って形にしたか」を自分の言葉で記載ください！

            書いてほしいこと（200字以上）
            動画から、どんな意図・メッセージを読み取りましたか？
その意図を、HTMLのどこに、どんなタグで反映しましたか？
その意図を、CSSのどこに、どんな見た目で反映しましたか？
AIにどういうプロンプトで指示を出しましたか？

          

            「動画で◯◯と言っていた → だから◯◯にした」

            と、自分の判断を言葉で説明できる形を目指してください。

困ったら

遠慮なく教員までメールで連絡してください。

第2回 課題ガイド