HTML の仕上げ

Coddyの「イメージアコーディオン | フロントエンドプロジェクト」コースのレッスン 7/17。

これで、1つのinputと1つのlabelがあることがわかります。そして、これらが合わさってアコーディオンの1つのセクションを表しています。

チャレンジ

簡単

1. inputセクションとlabelセクションをコピーします。そして、labelの下にそれを3回貼り付けます：

<input type="radio" name="slide" id="c1" checked>
<label for="c1" class="card" id="one">
    <div class="row">
        <div class="icon">1</div>
        <div class="description">
            <h4>Morning</h4>
            <p>When sun rises</p>
        </div>
    </div>
</label>

2. 最初のinputのIDが"c1"に設定されているので、次のinputのIDを"c2"、"c3"、および"c4"に変更してください。

3. labelについても同様です。次のlabelのIDを"two"、"three"、および"four"に変更してください。

自分で試してみよう

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