@Blog

<div class="slide">
    <ul>
        <li>ABC TEST</li>
    </ul>
</div>

        @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

        .slide {
            margin: 20px auto;
            width: 90%;
            /* スマホでも見切れないように */
            max-width: 600px;
            overflow: hidden;
            background: #000;
            border: 3px solid #111;
            border-radius: 8px;
            box-shadow: 0 0 20px #000 inset;
            position: relative;
        }

        /* LED風ドット背景 */
        .slide::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
            background-size: 4px 4px;
            background-color: #302f2f;
            pointer-events: none;
            z-index: 0;
        }

        /* スクロールテキスト */
        .slide ul {
            display: inline-block;
            margin: 0;
            padding-left: 100%;
            white-space: nowrap;
            animation: SlideAni 15s linear infinite;
            position: relative;
            z-index: 1;
        }

        /* テキストスタイル */
        .slide ul li {
            display: inline;
            margin: 0 80px 0 0;
            font-size: clamp(10px, 2vw, 16px);
            letter-spacing: 0.1em;
            font-family: "DotGothic16", "Noto Sans JP", "MS Gothic", monospace;
            color: #0f0;
            text-shadow:
                0 0 2px #0f0,
                0 0 5px #0f0,
                0 0 10px #0f0,
                0 0 20px #0f0;
            animation: Flicker 0.2s infinite alternate;
            image-rendering: pixelated;
            /* ピクセル感強調 */
            filter: contrast(180%) brightness(1.3);
            /* LEDっぽく */
        }

        /* 横スクロールアニメーション */
        @keyframes SlideAni {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }

        /* チラつきアニメーション */
        @keyframes Flicker {

            0%,
            18%,
            22%,
            25%,
            53%,
            57%,
            100% {
                opacity: 1;
            }

            20%,
            24%,
            55% {
                opacity: 0.7;
            }
        }

        /* --- レスポンシブ対応 --- */

        /* タブレットサイズ */
        @media (max-width: 768px) {
            .slide {
                max-width: 90%;
            }

            .slide ul li {
                margin: 0 40px 0 0;
            }

            .slide ul {
                animation: SlideAni 18s linear infinite;
                /* ややゆっくり */
            }
        }

        /* スマートフォンサイズ */
        @media (max-width: 480px) {
            .slide ul li {
                margin: 0 24px 0 0;
            }

            .slide ul {
                animation: SlideAni 22s linear infinite;
                /* スマホではさらにゆっくり */
            }
        }