課題

外部CSSとインラインスタイルを使用して、旅行先カードのスタイリング。

コンポーネントに含める要素：

1. ラッパー用の div 要素。card を使って className CSSクラスを適用。

2. 画像（img 要素）。

• src 属性は imageUrl 変数と同じ値。
• alt 属性は Santorini。
  • card-image CSSクラスを適用。

3. 見出し（h2 要素）。

• テキスト内容は Santorini, Greece。
• title CSSクラスを適用。

4. 段落（p 要素）。

• テキスト内容は Beautiful sunsets, white houses, and crystal clear water.。
• descriptionStyles オブジェクトを使ってインラインスタイルを適用。

5. descriptionStyles オブジェクトには以下を含める：

• color は "#555"。
• fontSize は "18px"。
• lineHeight は "1.5"。

6. styles.css ファイルをコンポーネントにインポート。

スターターコード

下記のスタータープロジェクトを開き、コンポーネントの不足部分を完成させてください。

Starter code

解答例

最終的な解答例と結果を下記で比較できます。

Solution code