Menu
Coddy logo textTech

クラウド I

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

challenge icon

チャレンジ

簡単

HTMLファイルで、#containerの中にクラス名が"cloud"divを作成してください。

 

CSSファイルで、新しく作成したcloudのdivをターゲットにし、以下を設定してください:

  1. width200pxに設定
  2. height80pxに設定
  3. お好みの背景色(雲であることを忘れないでください!)
  4. border radiusを40pxに設定
  5. positionabsoluteに設定(雲の位置を自由に操作したいため)

また、次のレッスンで雲が完全に見えるように、margin100px以上に設定してください(このマージンは後で削除します)。

自分で試してみよう

<!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プロジェクトのすべてのレッスン