プロフィールカードを作ろう

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

HTMLとCSSの2ファイルを作ろう

index.html と style.css の2ファイルを作成し、HTMLからCSSを読み込みましょう。

💡 ヒント
index.html と style.css を同じフォルダに作ります。index.html の <head> に <link rel="stylesheet" href="style.css"> を書いてCSSを読み込みます。

参考: CSS レッスン1

📝 模範解答を見る

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

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>プロフィールカード</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

  </body>
</html>
2

カードのHTMLを書こう

<body> の中に、カードのHTML構造を書いてください。class をつけておくと、後からCSSでデザインを当てられます。

💡 ヒント
<div class="card"> でカード全体を囲み、中にアイコン・名前・役割・自己紹介を書きます。

参考: HTML レッスン6

📝 模範解答を見る

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

<div class="card">
  <div class="icon">😊</div>
  <p class="name">【名前】</p>
  <p class="role">中学2年生</p>
  <p class="bio">ゲームと音楽が好きです。最近プログラミングを始めました！</p>
  <div class="links">
    <a href="#">X</a>
    <a href="#">Instagram</a>
    <a href="#">GitHub</a>
  </div>
</div>
3

bodyの背景色とカードの中央揃えを設定しよう

style.css に、背景色をグレーにし、カードを画面の中央に配置するCSSを書いてください。

💡 ヒント
body に background, display:flex, justify-content:center, align-items:center, min-height:100vh を指定します。

参考: CSS レッスン5

📝 模範解答を見る

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

/* style.css */
* { box-sizing: border-box; margin: 0; }

body {
  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: sans-serif;
}
4

カードに角丸・影・余白をつけよう

.card に白背景・角丸・影・余白を設定してください。幅は300pxにしましょう。

💡 ヒント
border-radius で角丸、box-shadow で影、padding で内側の余白を指定します。

参考: CSS レッスン3

📝 模範解答を見る

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

.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 32px;
  width: 300px;
  text-align: center;
}
5

アイコンを丸くしよう

.icon を丸い円にして、中の絵文字を中央に配置してください。

💡 ヒント
border-radius: 50% で完全な円になります。display:flex + justify-content:center + align-items:center で中の絵文字を中央揃えにします。
📝 模範解答を見る

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

.icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #3a86ff;
  color: #fff;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px;
}
6

名前・役割・自己紹介のスタイルを設定しよう

名前を大きく太字に、役割をグレーに、自己紹介文の行間を広めに設定してください。

💡 ヒント
font-size, font-weight, color, margin-bottom で文字のスタイルと間隔を調整します。

参考: CSS レッスン2

📝 模範解答を見る

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

.name {
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}
.role {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.bio {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 20px;
}
7

SNSリンクを横並びにしよう

.links にFlexboxを使って、SNSリンクを横並びにしてください。ブラウザで確認して完成です！

💡 ヒント
display:flex + justify-content:center + gap でリンクを横並びにします。
📝 模範解答を見る

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

.links {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.links a {
  color: #3a86ff;
  text-decoration: none;
  font-size: 0.9rem;
}
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら