Menu
Coddy logo textTech

固定値

Coddyの「流れる雲 - HTML/CSS/JSプロジェクト」コースのレッスン 10/18。

雲を動かしましょう!

challenge icon

チャレンジ

簡単

雲を動かし始める前に、雲の位置とサイズを固定しましょう。

雲にランダムな位置とサイズを設定しているコードをコメントアウトしてください

JSファイルで、cloud要素をターゲットにして以下を行ってください:

  1. leftスタイルプロパティを200pxに設定します。
  2. topスタイルプロパティを200pxに設定します。
  3. transformスタイルプロパティをscale(0.5)に設定します。

また、transitionスタイルプロパティを"all linear 3s"に設定してください。これは後で雲をアニメーションさせるのに役立ちます!

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

流れる雲 - HTML/CSS/JSプロジェクトのすべてのレッスン