zip358.com:新着記事紹介を電光掲示板2CSSに切り替えました.

おはようございます.気温って徐々に寒くなるのではなくていきなり変わっていくものなのかも知れません、これも温暖化の性なのかも.

さて、「新着記事紹介を電光掲示板2CSSに切り替えました.」の話をしていきます.お気づきかも知れませんがトップページの新着記事紹介を変えました.これにより何得かは分かりませんが以前よりシンプルなトップページになった事は確かかも.

因みに自分はCSSがあまり好きではないのですが、CSSオンリーで電光掲示板を作れたのもChatGPTのおかげです.でも、彼の作った電光掲示板が良いなと思っています.ググっても上位表示しないけど一番、電光掲示板に近いCSSコードだと思います.

そのうち彼の作った電光掲示板CSSに変える可能性はあります.彼のコードを参照して作ってとChatGPTにお願いしても出てくるコードは全く別物ばかりで…呆れ顔.

トイウコトで今回作ったコードはそのうち変えますのでお裾分けです.

<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;
                /* スマホではさらにゆっくり */
            }
        }