映画リスト

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

チャレンジ

簡単

4つの映画カードをスタイリングし、それらを1列に配置します。最終的なデザインは下の画像のようになりますが、自由に自分の好きな色を適用してください。

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

display: flex; flex-direction: column; を使用して、映画カードを垂直に積み重ねます。
justify-content: center; を使用して、列を垂直方向の中央に配置します。
align-items: center; を使用して、カードを適切に整列させます。
各映画カードを固定サイズと柔らかな色でスタイリングします。
各映画ボックスに margin-bottom と padding を追加して、間隔を作り、読みやすさを向上させます。
不要なスペーシングの問題を防ぐために box-sizing: border-box を適用します。
カード内の余分なテキストを処理するために overflow: auto を使用します。

デザインを強化し、より視覚的に魅力的なものにするために、box-shadow、border-radius、font-family、および見出しに異なるフォントカラーを自由に追加してください。

自分で試してみよう

<html>
    <head>
        <title>Movies</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="movies">
            <div class="movie">
                <h2>King Kong (2005)</h2>
                <p>A filmmaker and his crew travel to Skull Island, where they encounter King Kong.</p>
            </div>
            <div class="movie">
                <h2>Inception (2010)</h2>
                <p>A thief who enters dreams to steal secrets faces his toughest mission yet.</p>
            </div>
            <div class="movie">
                <h2>The Matrix (1999)</h2>
                <p>A hacker learns the truth about reality and joins the fight against machines.</p>
            </div>
            <div class="movie">
                <h2>Casablanca (1942)</h2>
                <p>A nightclub owner is reunited with his lost love during World War II.</p>
            </div>
        </div>
    </body>
</html>