復習チャレンジ

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 43/76。

チャレンジ

簡単

この復習チャレンジでは、box-sizing、border-radius、overflow、box-shadow を使用して、新聞記事のスタイルを設定します。これにより、寸法の制御、オーバーフローの処理、および視覚的な魅力の向上に関する能力をテストします。

2つの <div> 要素を持つHTMLドキュメントが提供されており、それぞれが新聞記事を表しています。あなたのタスクは、box-sizing、border-radius、overflow、box-shadow を使用してこれらの記事のスタイルを整え、見た目を改善することです。

以下の手順に従ってください：

すべての <div> 要素をターゲットにするCSSルールを記述します。

幅を 280px、高さを 150px に設定します。
box-sizing: border-box; を使用して、パディングとボーダーが合計サイズに含まれるようにします。
各記事の内部に 15px のパディング を追加し、コンテンツの周囲にスペースを作ります。
3px の太さ で ダークグレー (#444) の 実線ボーダー (solid border) を設定します。
角を丸くするために 10px の border-radius を適用します。
わずかに浮き上がった効果を出すために、4px 4px 8px rgba(0, 0, 0, 0.2) の box-shadow を追加します。
ユーザーがはみ出したコンテンツをスクロールできるように、overflow: scroll; を設定します。

自分で試してみよう

<html>
<head>
    <title>Newspaper Layout Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="headline">
        <h3>Biggest Tech Breakthrough of 2025!</h3>
        <p>Scientists have unveiled a revolutionary AI model that can predict climate changes with 99% accuracy.  
        This groundbreaking innovation is expected to transform how governments and organizations respond to global  
        warming, extreme weather events, and natural disasters. Experts believe that integrating AI-driven forecasting  
        with existing climate policies will significantly reduce environmental damage over the next decade.</p>
    </div>
    <div class="article">
        <h3>Opinion: The Future of Web Design</h3>
        <p>As CSS evolves, developers are experimenting with more dynamic layouts and interactive user experiences...</p>
    </div>
</body>
</html>