Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ チャレンジ:旅行先カードのスタイリング | Reactアプリケーションのスタイリング
React入門

チャレンジ:旅行先カードのスタイリング

メニューを表示するにはスワイプしてください

課題

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

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

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

  2. 画像(img 要素)。

  • src 属性は imageUrl 変数と同じ値。
  • alt 属性は Santorini
    • card-image CSSクラスを適用。
  1. 見出し(h2 要素)。
  • テキスト内容は Santorini, Greece
  • title CSSクラスを適用。
  1. 段落(p 要素)。
  • テキスト内容は Beautiful sunsets, white houses, and crystal clear water.
  • descriptionStyles オブジェクトを使ってインラインスタイルを適用。
  1. descriptionStyles オブジェクトには以下を含める:
  • color"#555"
  • fontSize"18px"
  • lineHeight"1.5"
  1. styles.css ファイルをコンポーネントにインポート。

スターターコード

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

Starter code

解答例

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

Solution code

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 4.  4

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 4.  4
some-alt