推し紹介ページを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

HTMLファイルの骨組みを作ろう

VS Codeで新しいファイル index.html を作り、HTMLの骨組みを書きましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>推し紹介ページ</title>
  </head>
  <body>

  </body>
</html>
💡 ヒント
すべてのHTMLファイルに必要な骨組みです。コピーして使いましょう。

参考: HTML レッスン1

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>推し紹介ページ</title>
  </head>
  <body>

  </body>
</html>
2

推しの名前と紹介文を書こう

<body> の中に、<h1> タグで推しの名前を、<p> タグで紹介文を書きましょう。

<h1>🎤 【推しの名前】</h1>
<p>【推しの名前】は、私がいちばん好きな【アーティスト/キャラクター】です。</p>

中間確認: ブラウザで開いて、推しの名前と紹介文が表示されることを確認しましょう。

見出しが大きく表示され、紹介文がその下に表示されていればOKです。

💡 ヒント
<h1> で名前、<p> で紹介文を書きます。【推しの名前】は自分の推しに書き換えてください。

参考: HTML レッスン2

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<h1>🎤 【推しの名前】</h1>
<p>【推しの名前】は、私がいちばん好きな【アーティスト/キャラクター】です。</p>
3

推しの画像を追加しよう

推しの画像を用意して、<img> タグで表示しましょう。画像がなければスキップしてOKです。

画像の用意方法:

・自分で撮った写真やスクリーンショットを使う

・フリー素材サイト（いらすとや等）から画像をダウンロードする

・画像ファイルは HTML ファイルと同じフォルダに置いてください

<img src="oshi.jpg" alt="【推しの名前】の画像">
💡 ヒント
<img src="ファイル名" alt="説明"> で画像を表示します。画像ファイルはHTMLファイルと同じフォルダに置きましょう。

参考: HTML レッスン3

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<img src="oshi.jpg" alt="【推しの名前】の画像">
4

好きなポイントをリストにしよう

<h2> で「好きなポイント」の見出しを作り、<ul> と <li> で好きなポイントを3つ以上書きましょう。

推しの魅力を思いつく限り書いてみてください！多ければ多いほど良いページになります。

<h2>好きなポイント</h2>
<ul>
  <li>歌がうまい</li>
  <li>ダンスがかっこいい</li>
  <li>笑顔がかわいい</li>
</ul>
💡 ヒント
<ul> の中に <li> を3つ以上書きます。

参考: HTML レッスン4

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<h2>好きなポイント</h2>
<ul>
  <li>歌がうまい</li>
  <li>ダンスがかっこいい</li>
  <li>笑顔がかわいい</li>
</ul>
5

公式サイトへのリンクを追加しよう

推しの公式サイトやSNSへのリンクを <a> タグで追加しましょう。

target="_blank" で新しいタブで開くようにし、rel="noopener noreferrer" でセキュリティ対策をします。

URLがわからない場合は https://example.com のままでもOKです。

<p><a href="https://example.com" target="_blank" rel="noopener noreferrer">公式サイトはこちら</a></p>
💡 ヒント
<a href="URL">テキスト</a> でリンクを作ります。

参考: HTML レッスン3

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<p><a href="https://example.com" target="_blank" rel="noopener noreferrer">公式サイトはこちら</a></p>
6

CSSでデザインを追加しよう

<head> 内に <style> タグを追加して、ページの見た目を整えましょう。

max-width: 600px と margin: 40px auto でページを中央寄せにします。

img に max-width: 100% を設定すると、画像が画面幅に合わせて縮小されます。

border-radius: 12px で画像の角を丸くするとおしゃれになります。

色は推しのイメージカラーに合わせると統一感が出ます。

発展課題:

・好きな曲ランキングを <ol> で追加してみよう

・プロフィール表を <table> で作ってみよう

・背景にグラデーションを使ってみよう

・Git で管理して GitHub に公開してみよう

💡 ヒント
style タグを head 内に追加し、背景色・フォント・画像サイズを整えます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<style>
body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 16px; background: #fff5f5; }
h1 { color: #e53e3e; text-align: center; }
img { max-width: 100%; border-radius: 12px; margin: 16px 0; }
a { color: #e53e3e; }
</style>
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら