推し紹介ページを作ろう

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

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

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

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

  </body>
</html>

💡 ヒント

すべてのHTMLファイルに必要な骨組みです。コピーして使いましょう。

📝 模範解答を見る

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

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

  </body>
</html>

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

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

💡 ヒント

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

📝 模範解答を見る

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

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

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

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

💡 ヒント

<img src="ファイル名" alt="説明"> で画像を表示します。画像ファイルはHTMLファイルと同じフォルダに置きましょう。

📝 模範解答を見る

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

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

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

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

💡 ヒント

<ul> の中に <li> を3つ以上書きます。

📝 模範解答を見る

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

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

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

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

💡 ヒント

<a href="URL">テキスト</a> でリンクを作ります。

📝 模範解答を見る

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

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

🎯