意味不明な作品

## 今回もくだらない作品を作りました。m(__)m
いかが全コードです
```html
<!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 {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f8ff;
            font-family: 'Comic Sans MS', sans-serif;
            color: #ff6347;
            text-align: center;
        }

        h1 {
            font-size: 50px;
            animation: bounce 3s infinite;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

        p {
            font-size: 20px;
            color: #4682b4;
            animation: blink 1s infinite;
        }

        .circle {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #ff1493;
            animation: moveCircle 5s infinite linear;
        }

        .rainbow-text {
            font-size: 2em;
            background-image: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
            -webkit-background-clip: text;
            color: transparent;
            animation: textWave 4s infinite;
        }

        .floating-shape {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #00bfff;
            border-radius: 50%;
            opacity: 0.7;
            animation: floatShapes 6s infinite;
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-30px);
            }
        }

        @keyframes blink {
            0%, 50% {
                opacity: 1;
            }
            25%, 75% {
                opacity: 0;
            }
        }

        @keyframes moveCircle {
            0% {
                top: 0;
                left: 0;
            }
            25% {
                top: 90%;
                left: 90%;
            }
            50% {
                top: 0;
                left: 90%;
            }
            75% {
                top: 90%;
                left: 0;
            }
            100% {
                top: 0;
                left: 0;
            }
        }

        @keyframes textWave {
            0%, 100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(10px);
            }
        }

        @keyframes floatShapes {
            0% {
                top: -50px;
                left: -50px;
                transform: rotate(0deg);
            }
            25% {
                top: 90%;
                left: 50%;
                transform: rotate(90deg);
            }
            50% {
                top: 50%;
                left: 90%;
                transform: rotate(180deg);
            }
            75% {
                top: 10%;
                left: 30%;
                transform: rotate(270deg);
            }
            100% {
                top: 50%;
                left: 10%;
                transform: rotate(360deg);
            }
        }

        /* テキストの揺れ */
        .wobble {
            animation: wobble 1s ease-in-out infinite;
        }

        @keyframes wobble {
            0%, 100% {
                transform: rotate(0deg);
            }
            15% {
                transform: rotate(10deg);
            }
            30% {
                transform: rotate(-10deg);
            }
            45% {
                transform: rotate(5deg);
            }
            60% {
                transform: rotate(-5deg);
            }
            75% {
                transform: rotate(2deg);
            }
        }

        /* ランダムに生成されるテキストのスタイル */
        .random-text {
            position: absolute;
            font-size: 30px;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.8);
            animation: textMove 10s infinite linear;
        }

        @keyframes textMove {
            0% {
                top: 0%;
                left: 0%;
                transform: rotate(0deg);
            }
            25% {
                top: 30%;
                left: 70%;
                transform: rotate(90deg);
            }
            50% {
                top: 80%;
                left: 50%;
                transform: rotate(180deg);
            }
            75% {
                top: 50%;
                left: 10%;
                transform: rotate(270deg);
            }
            100% {
                top: 0%;
                left: 0%;
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <h1>意味不明な作品へようこそ！</h1>
    <p>何が起こっているのか全くわからない...</p>
    <div class="circle"></div>
    <p class="rainbow-text">これは不必要にカラフルなテキストです。</p>
    <p class="wobble">なんでこんなことしてるんだろう...</p>

    <script>
        // ランダムに浮遊する円を生成
        setInterval(function() {
            let randomCircle = document.createElement('div');
            randomCircle.classList.add('floating-shape');
            randomCircle.style.top = `${Math.random() * window.innerHeight}px`;
            randomCircle.style.left = `${Math.random() * window.innerWidth}px`;
            document.body.appendChild(randomCircle);
        }, 1000);

        // ランダムなテキストをランダムな位置に追加
        const randomWords = ["不明", "意味なし", "無駄", "無意味", "空間", "無限", "エラー", "反復"];
        setInterval(function() {
            let randomText = document.createElement('div');
            randomText.classList.add('random-text');
            randomText.innerText = randomWords[Math.floor(Math.random() * randomWords.length)];
            randomText.style.top = `${Math.random() * window.innerHeight}px`;
            randomText.style.left = `${Math.random() * window.innerWidth}px`;
            document.body.appendChild(randomText);
        }, 2000);

        // 背景色とランダムな要素を動かす
        setInterval(function() {
            document.body.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 80%)`;
        }, 2500);

        // 無駄にスライドするテキストを追加
        setInterval(function() {
            let randomSlideText = document.createElement('div');
            randomSlideText.classList.add('random-text');
            randomSlideText.innerText = "わからないけど動かしてみる！";
            randomSlideText.style.top = `${Math.random() * window.innerHeight}px`;
            randomSlideText.style.left = `${Math.random() * window.innerWidth}px`;
            randomSlideText.style.fontSize = `${Math.random() * 40 + 20}px`;
            randomSlideText.style.fontWeight = "bold";
            randomSlideText.style.color = `hsl(${Math.random() * 360}, 100%, 60%)`;
            randomSlideText.style.animation = "textMove 10s infinite linear";
            document.body.appendChild(randomSlideText);
        }, 3000);
    </script>
</body>
</html>

```
## 今回の作品を説明していこうと思います[。

### `<head>` セクション

- **メタデータとタイトル**:
    ```html
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>意味不明な作品</title>
    ```
    - `charset="UTF-8"` は文字エンコーディングを指定しています。
    - `viewport` タグはレスポンシブデザインをサポートし、モバイルデバイスでも適切に表示されるようにします。
    - `<title>` タグはページのタイトルを定義します。

- **CSSスタイル**:
    `<style>` タグ内で、ページのデザインを定義しています。多くのアニメーションやビジュアル効果が含まれています。

### CSS セクション

1. **基本スタイル**:
    ```css
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f8ff;
        font-family: 'Comic Sans MS', sans-serif;
        color: #ff6347;
        text-align: center;
    }
    ```
    - ページ全体の余白 (`margin`, `padding`) をゼロに設定し、スクロールバーを隠す (`overflow: hidden`) ことで、背景がページいっぱいに広がります。
    - 背景色 (`#f0f8ff`) と文字色 (`#ff6347`) を設定し、フォントに「Comic Sans MS」を使用しています。

2. **見出し（`h1`）**:
    ```css
    h1 {
        font-size: 50px;
        animation: bounce 3s infinite;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
    ```
    - 見出し (`<h1>`) のフォントサイズを 50px に設定し、「バウンス」アニメーションを 3秒ごとに繰り返し実行します。
    - テキストに軽い影 (`text-shadow`) を加えています。

3. **段落（`p`）**:
    ```css
    p {
        font-size: 20px;
        color: #4682b4;
        animation: blink 1s infinite;
    }
    ```
    - 段落のフォントサイズを 20px に設定し、青色のテキスト (`#4682b4`) にします。
    - 1秒ごとにテキストが点滅する「ブリンク」アニメーションを適用しています。

4. **円形の要素（`circle`）**:
    ```css
    .circle {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #ff1493;
        animation: moveCircle 5s infinite linear;
    }
    ```
    - 赤紫色の円形 (`border-radius: 50%`) を作成し、5秒で移動する「移動する円」アニメーションを適用します。

5. **虹色のテキスト（`rainbow-text`）**:
    ```css
    .rainbow-text {
        font-size: 2em;
        background-image: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
        -webkit-background-clip: text;
        color: transparent;
        animation: textWave 4s infinite;
    }
    ```
    - 虹色の背景グラデーションをテキストに適用し、テキストの色を透明 (`color: transparent`) に設定して、背景を「切り抜く」効果を得ます。
    - 4秒で揺れる「テキスト波動」アニメーションを設定しています。

6. **浮遊する形（`floating-shape`）**:
    ```css
    .floating-shape {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: #00bfff;
        border-radius: 50%;
        opacity: 0.7;
        animation: floatShapes 6s infinite;
    }
    ```
    - 青い円形が画面上を浮遊し、6秒ごとに異なる位置に移動する「浮遊する形」アニメーションを設定します。

7. **テキストの揺れ（`wobble`）**:
    ```css
    .wobble {
        animation: wobble 1s ease-in-out infinite;
    }
    ```
    - このクラスは、テキストを1秒間隔で左右に揺れるアニメーションを適用します。

8. **ランダムなテキスト（`random-text`）**:
    ```css
    .random-text {
        position: absolute;
        font-size: 30px;
        font-weight: bold;
        color: rgba(255, 255, 255, 0.8);
        animation: textMove 10s infinite linear;
    }
    ```
    - ランダムな位置に表示されるテキストで、10秒間にわたり回転しながら移動する「テキスト移動」アニメーションが適用されます。

### JavaScript セクション

1. **ランダムに浮遊する円を生成**:
    ```javascript
    setInterval(function() {
        let randomCircle = document.createElement('div');
        randomCircle.classList.add('floating-shape');
        randomCircle.style.top = `${Math.random() * window.innerHeight}px`;
        randomCircle.style.left = `${Math.random() * window.innerWidth}px`;
        document.body.appendChild(randomCircle);
    }, 1000);
    ```
    - 1秒ごとにランダムな位置で円形の要素を生成し、ページに追加します。

2. **ランダムなテキストを追加**:
    ```javascript
    const randomWords = ["不明", "意味なし", "無駄", "無意味", "空間", "無限", "エラー", "反復"];
    setInterval(function() {
        let randomText = document.createElement('div');
        randomText.classList.add('random-text');
        randomText.innerText = randomWords[Math.floor(Math.random() * randomWords.length)];
        randomText.style.top = `${Math.random() * window.innerHeight}px`;
        randomText.style.left = `${Math.random() * window.innerWidth}px`;
        document.body.appendChild(randomText);
    }, 2000);
    ```
    - 2秒ごとに、ランダムな言葉（例えば「無意味」や「エラー」）をランダムな位置に表示するテキスト要素を生成します。

3. **背景色の変更**:
    ```javascript
    setInterval(function() {
        document.body.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 80%)`;
    }, 2500);
    ```
    - 2.5秒ごとに、ページの背景色をランダムに変更します。

4. **無駄にスライドするテキストを追加**:
    ```javascript
    setInterval(function() {
        let randomSlideText = document.createElement('div');
        randomSlideText.classList.add('random-text');
        randomSlideText.innerText = "わからないけど動かしてみる！";
        randomSlideText.style.top = `${Math.random() * window.innerHeight}px`;
        randomSlideText.style.left = `${Math.random() * window.innerWidth}px`;
        randomSlideText.style.fontSize = `${Math.random() * 40 + 20}px`;
        randomSlideText.style.fontWeight = "bold";
        randomSlideText.style.color = `hsl(${Math.random() * 360}, 100%, 60%)`;
        randomSlideText.style.animation = "textMove 10s infinite linear";
        document.body.appendChild(randomSlideText);
    }, 3000);
    ```
    - 3秒ごとに「わからないけど動かしてみる！」というテキストを追加し、そのテキストがランダムに動き回ります。

### 総まとめ
このページは、動き回る円、ランダムに表示されるテキスト、色が変わる背景などを使用して、視覚的に非常に混乱した、意味不明な効果を生み出しています。すべてのアニメーションとランダムな要素が「不必要にカラフル」かつ「無意味」であることをテーマにしており、視覚的なインパクトが大きいです。


### 今回も意味がわからない作品に突き合わせてすません。ですが勉強になるところもあると思います。m(__)m