フォロー

🧩 エンジニア豆知識 #8──CSSだけで“電光掲示板”！途切れゼロの横スクロール見出しを極める🔥

by

戦え、エンジニア諸君！！
ニュースサイトの速報帯、ポートフォリオの実績ライン… 走るテキストは視線を奪う最強のアクセントだ。
ここではCSSオンリーで「継ぎ目のないループ＋フェード演出＋アクセシビリティ対応」まで ワンパッケージで実装する方法を叩き込むッ！

💎 完成デモ

2025年UIトレンド解説公開！ z-indexインフレ地獄に終止符🔥 M3 MacBookレビュー掲載中💻 2025年UIトレンド解説公開！ z-indexインフレ地獄に終止符🔥 M3 MacBookレビュー掲載中💻

⚙️ コード全体

<div class="ticker" role="marquee" aria-label="新着情報">
  <!-- 速度を変えるときは --speed を上書き -->
  <div class="ticker__inner" style="--speed:14s">
    <span>2025年UIトレンド解説公開！</span>
    <span>z-indexインフレ地獄に終止符🔥</span>
    <span>M3 MacBookレビュー掲載中💻</span>

    <!-- ★ 無限ループ用に同じ行を複製 ★ -->
    <span>2025年UIトレンド解説公開！</span>
    <span>z-indexインフレ地獄に終止符🔥</span>
    <span>M3 MacBookレビュー掲載中💻</span>
  </div>
</div>
:root{
  --ticker-height: 38px;      /* 行高 */
  --speed: 18s;               /* デフォルト速度 */
  --ticker-bg:#0d1117;        /* 背景色 */
  --ticker-color:#fff;        /* 文字色 */
}

.ticker{
  position:relative;
  height:var(--ticker-height);
  overflow:hidden;
  background:var(--ticker-bg);
  color:var(--ticker-color);
  line-height:var(--ticker-height);
  mask-image:linear-gradient(to right,
               transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* 行を2セット並べ、幅2倍を −50% 流す */
.ticker__inner{
  display:inline-flex;
  white-space:nowrap;
  gap:0;
  animation:scroll var(--speed) linear infinite;
}

.ticker__inner span{
  padding:0 2em;             /* 余白は内側で確保 */
  font-weight:600;
}

/* ホバー停止＆動きが苦手なユーザー配慮 */
.ticker:hover .ticker__inner{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .ticker__inner{ animation:none; }
}

@keyframes scroll{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

🛠 カスタマイズTips

目的変更例
速度を速めるstyle="--speed:10s"
LED掲示板風text-shadow:0 0 6px #0f0;
モバイルで停止@media (max-width:600px){ .ticker__inner{animation:none;} }
アイコン混在&lt;span&gt;🚀 新記事&lt;/span&gt;

📚 さらなる高みへ──団長推薦

CSSアニメーション 最強ガイド
keyframesとモーション設計を体系的に学べる一冊。フェード×マスク応用も充実！
Amazonで見る

※リンクはアフィリエイトを含みます。

📝 まとめ

  • CSSのみで“途切れゼロ”の電光掲示板が実装可能。
  • 行幅2倍＋translateX(-50%)で継ぎ目を完全消滅。
  • 速度や高さはCSS変数で集中管理 → デザイン変更に強い。

🔥 団長の喝──流れる文字でユーザーを惹きつけろッ！

余白も動きも CSS の刃で支配する者が UI を制す。 戦え、エンジニア諸君！！ 電光掲示板の輝きでユーザーの心を奪い取れッ！！🔥🔥🔥

コメントする