<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ランダムなコンテンツの並び替え</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        .content-container {
            width: 80%;
            margin: 0 auto;
        }
        .content-box {
            border: 1px solid #ccc;
            padding: 20px;
            margin: 10px 0;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        .content-box img {
            width: 100%;
            max-width: 400px;
            height: auto;
            border-radius: 5px;
        }
    </style>
</head>
<body>

    <div class="content-container" id="contentContainer">
        <div class="content-box">
            <h2>コンテンツ1</h2>
            <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" alt="自然の風景">
            <p>これは最初のコンテンツです。HTMLとCSSの基本を学びましょう。</p>
        </div>

        <div class="content-box">
            <h2>コンテンツ2</h2>
            <img src="https://cdn.pixabay.com/photo/2016/11/29/09/08/technology-1869242_1280.jpg" alt="テクノロジーの画像">
            <p>これは2つ目のコンテンツです。Webデザインのテクニックを身につけましょう。</p>
        </div>

        <div class="content-box">
            <h2>コンテンツ3</h2>
            <img src="https://cdn.pixabay.com/photo/2015/01/08/18/24/programming-593312_1280.jpg" alt="プログラミングのイメージ">
            <p>これは3つ目のコンテンツです。プログラミングの楽しさを体験しましょう。</p>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const container = document.getElementById("contentContainer");
            const contents = Array.from(container.children);

            // コンテンツをシャッフル
            contents.sort(() => Math.random() - 0.5);

            // 並び替えたコンテンツを再配置
            container.innerHTML = "";
            contents.forEach(content => container.appendChild(content));
        });
    </script>

</body>
</html>
