BLOG

CSSだけでバスケのスコアボードを作ってみた

2026.06.22 BLOG

basketballCodePenCreative CodingCSSCSS Grid

試合会場のスコアボードは、数字、チーム名、時計、ピリオド、ファウル数など、情報の優先順位がはっきりしたUIです。今回は画像やJavaScriptを使わず、HTMLとCSSだけでバスケットボールのスコアボードを作ります。

CSS Grid、レスポンシブな文字サイズ、等幅数字、発光表現を組み合わせ、PCでもスマホでも形が崩れにくい構成にします。

完成する構成

HOME・AWAYの得点表示
ゲームクロックとクォーター
ファウル数・タイムアウト表示
ポゼッション表示
スマホ対応のレスポンシブレイアウト

HTMLをGridの領域ごとに分ける

スコアボード全体を、ヘッダー、HOME、中央情報、AWAY、フッターに分けます。数字は見た目だけでなく読み上げもできる通常のテキストとして配置します。

<main class="scoreboard" aria-label="バスケットボールのスコアボード">
  <header class="scoreboard__header">
    <span>4Q</span>
    <div class="clock">02:18</div>
    <span>GAME</span>
  </header>

  <section class="team team--home">
    <p>HOME</p>
    <strong>82</strong>
    <small>FOULS 4</small>
  </section>

  <section class="period">
    <span class="possession possession--left">●</span>
    <div>
      <p>PERIOD</p>
      <strong>4</strong>
    </div>
    <span class="possession">●</span>
  </section>

  <section class="team team--away">
    <p>AWAY</p>
    <strong>76</strong>
    <small>FOULS 3</small>
  </section>

  <footer class="scoreboard__footer">
    <span>TIMEOUT 2</span>
    <span>NINES ARENA</span>
    <span>TIMEOUT 1</span>
  </footer>
</main>

3列のCSS Gridを作る

左右のチーム領域を同じ幅、中央のピリオド領域を細くします。ヘッダーとフッターは全列を横断させます。

.scoreboard {
  display: grid;
  grid-template-columns: 1fr minmax(130px, .45fr) 1fr;
}

.scoreboard__header,
.scoreboard__footer {
  grid-column: 1 / -1;
}

数字をスコアボードらしく見せる

font-variant-numeric: tabular-numsを使うと、数字ごとの横幅が揃います。スコアや時計を更新しても位置がずれにくくなります。

.team strong,
.clock {
  font-variant-numeric: tabular-nums;
}

.team strong {
  font-size: clamp(88px, 18vw, 190px);
  line-height: .9;
}

発光表現は控えめにする

時計だけをピンク、ピリオドをライム色にして、情報の役割を色で分けます。広い範囲へ強い光を付けると読みにくくなるため、text-shadowは小さくします。

.clock {
  color: #ff2f63;
  text-shadow: 0 0 20px rgb(255 47 99 / .42);
}

.period strong {
  color: #caff00;
}

スマホでは中央列と余白を縮める

@media (max-width: 640px) {
  .scoreboard {
    grid-template-columns: 1fr 90px 1fr;
  }

  .team,
  .period {
    min-height: 210px;
    padding: 18px 8px;
  }
}

CodePen埋め込み用エリア

CSSだけで作るバスケットボールスコアボード
ここにCodePenのEmbedコードを貼り付けます。Pen作成後、このブロックと埋め込みタグを差し替えてください。

以下をCodePenへ貼り付けると完成版を表示できます。JavaScriptは不要で、HTML内の数字を変更するだけで別の試合結果へ差し替えられます。

HTML

<main class="scoreboard" aria-label="バスケットボールのスコアボード">
  <header class="scoreboard__header">
    <span>4Q</span>
    <div class="clock">02:18</div>
    <span>GAME</span>
  </header>

  <section class="team team--home">
    <p>HOME</p>
    <strong>82</strong>
    <small>FOULS 4</small>
  </section>

  <section class="period">
    <span class="possession possession--left">●</span>
    <div>
      <p>PERIOD</p>
      <strong>4</strong>
    </div>
    <span class="possession">●</span>
  </section>

  <section class="team team--away">
    <p>AWAY</p>
    <strong>76</strong>
    <small>FOULS 3</small>
  </section>

  <footer class="scoreboard__footer">
    <span>TIMEOUT 2</span>
    <span>NINES ARENA</span>
    <span>TIMEOUT 1</span>
  </footer>
</main>

CSS

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #0b0b0b;
  color: #fff;
  font-family: "Arial Narrow", Impact, system-ui, sans-serif;
}

.scoreboard {
  width: min(100%, 920px);
  display: grid;
  grid-template-columns: 1fr minmax(130px, .45fr) 1fr;
  overflow: hidden;
  border: 6px solid #3a3a3a;
  border-radius: 12px;
  background: #151515;
  box-shadow:
    0 0 0 3px #050505,
    0 30px 80px rgb(0 0 0 / .6);
}

.scoreboard__header,
.scoreboard__footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  background: #242424;
  color: #caff00;
  font-weight: 900;
  letter-spacing: .12em;
}

.scoreboard__header > :last-child,
.scoreboard__footer > :last-child {
  text-align: right;
}

.clock {
  color: #ff2f63;
  font-size: clamp(32px, 7vw, 72px);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-shadow: 0 0 20px rgb(255 47 99 / .42);
}

.team,
.period {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 28px 18px;
  border-top: 2px solid #444;
  border-bottom: 2px solid #444;
}

.team p,
.period p {
  margin: 0;
  color: #aaa;
  font-weight: 900;
  letter-spacing: .16em;
}

.team strong {
  color: #fff;
  font-size: clamp(88px, 18vw, 190px);
  line-height: .9;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgb(255 255 255 / .16);
}

.team small {
  color: #ffd329;
  font-weight: 900;
  letter-spacing: .1em;
}

.period {
  position: relative;
  border-inline: 2px solid #444;
  text-align: center;
}

.period strong {
  color: #caff00;
  font-size: 72px;
  line-height: 1;
}

.possession {
  color: #444;
  font-size: 24px;
}

.possession--left {
  color: #ff2f63;
}

.scoreboard__footer {
  color: #aaa;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
}

@media (max-width: 640px) {
  .scoreboard {
    grid-template-columns: 1fr 90px 1fr;
    border-width: 4px;
  }

  .scoreboard__header,
  .scoreboard__footer {
    padding: 10px 12px;
    gap: 8px;
  }

  .team,
  .period {
    min-height: 210px;
    padding: 18px 8px;
  }

  .team strong {
    font-size: clamp(64px, 24vw, 110px);
  }

  .scoreboard__footer {
    font-size: 10px;
  }
}

JS

// JavaScriptは不要です。
// HTMLの数字を書き換えるだけで、任意の試合スコアを表示できます。

カスタマイズ案

チームカラーに合わせてHOME・AWAYのアクセントを変える
BONUS表示やショットクロックを追加する
CSS変数で色とサイズを管理する
JavaScriptを加えて得点ボタンを実装する
WebSocketやAPIからリアルタイムの得点を受け取る

まとめ

バスケットボールのスコアボードは、CSS Gridと数字のタイポグラフィを練習する題材として優秀です。情報の優先順位を決め、得点、時計、補助情報の大きさと色を分けると、それらしい画面になります。

STEP BACK