LESSON 2|

CSSでスタイルを適用しよう

このレッスンでは、LESSON1で作ったReactコンポーネントのCSSスタイルを段階的に作っていきます。 styles.cssファイルにCSSを書きながら、見た目がどのように変化するかを確認しましょう！

Step 1

タイトルと説明文にスタイルを適用しよう！

最初に、タイトルと説明文のスタイルを設定しましょう。 .titleのスタイルを追加してください： - フォントサイズを大きく（font-size: 3rem） - フォントを太く（font-weight: 800） - 下に余白を追加（margin: 0 0 1rem 0） - テキストに影を追加（text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3)） .descriptionのスタイルも追加してください： - フォントサイズを調整（font-size: 1.2rem） - フォントを細く（font-weight: 300） - 下に余白を追加（margin: 0 0 2rem 0） - 少し透明に（opacity: 0.9） - 行間を広く（line-height: 1.6）

styles.css

/* タイトルのスタイル */
.title {
/* ここにCSSを書いていきます */
}

/* 説明文のスタイル */
.description {
/* ここにCSSを書いていきます */
}

📝 .titleクラスの中身をコピー（大きく太い見出しにする）

font-size: 3rem;
font-weight: 800;
margin: 0 0 1rem 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

📄 .descriptionクラスの中身をコピー（読みやすい説明文にする）

font-size: 1.2rem;
font-weight: 300;
margin: 0 0 2rem 0;
opacity: 0.9;
line-height: 1.6;

Step 2

コンテナのレイアウトを作ろう！

次に、コンテナ（.container）の基本的なレイアウトを設定しましょう。コンテナは他の要素をまとめて包む「箱」で、全体のデザインを決める重要な部分です。また、「container」はよく使われる一般的なクラス名で、特別な意味はありません。 .containerのスタイルを追加してください： - 最大幅を設定（max-width: 600px） - 中央寄せ（margin: 2rem auto） - 内側の余白（padding: 2rem） - 背景色（background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)） - 角丸（border-radius: 20px） - 影（box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1)） - テキストを中央寄せ（text-align: center） - 白いテキスト色（color: white） - システムフォント（font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif）

styles.css

/* タイトルのスタイル */
.title {
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 説明文のスタイル */
.description {
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0 0 2rem 0;
  opacity: 0.9;
  line-height: 1.6;
}

/* コンテナのスタイル */
.container {
/* ここにCSSを書いていきます */
}

🎨 まず.containerクラスの枠組みをコピー

/* コンテナのスタイル */
.container {
/* ここにCSSを書いていきます */
}

💎 .containerクラスの中身をコピー（グラデーション背景）

max-width: 600px;
margin: 2rem auto;
padding: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
text-align: center;
color: white;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;

Step 3

画像にアニメーションを適用しよう！

最後に、画像にアニメーションを追加して、動きのある楽しいデザインに仕上げましょう。 CSSアニメーションを使うと、画像を回転させたり移動させたりできます。 @keyframesで動きを定義し、animationプロパティで適用します。 .container imgのスタイルを追加してください： - 最大幅100%（max-width: 100%） - 高さ自動調整（height: auto） - 回転アニメーションを追加（animation: rotate 8s linear infinite） @keyframes rotateで回転アニメーションを定義： - from：transform: rotate(0deg) - to：transform: rotate(360deg)

styles.css

/* タイトルのスタイル */
.title {
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 説明文のスタイル */
.description {
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0 0 2rem 0;
  opacity: 0.9;
  line-height: 1.6;
}

/* コンテナのスタイル */
.container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  text-align: center;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

/* 画像のスタイル */
.container img {
/* ここにCSSを書いていきます */
}

🖼️ まず.container imgクラスの枠組みをコピー

.container img {
/* ここにCSSを書いていきます */
}

✨ .container imgクラスの中身をコピー（回転アニメーション付き）

max-width: 100%;
height: auto;
animation: rotate 8s linear infinite;

🔄 @keyframesをコピー（360度回転の動きを定義）

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

お疲れ様でした！次のレッスンへ進みましょう！