※当サイトにはプロモーションが含まれています。
クライアント トーナメント表をCSSで作ってくれ！
にゃテック おけまるだにゃ。
2026 WBC（ワールドベースボールクラシック）において、日本の１次リーグ突破が決まりました。
その影響もあり、大会は大いに盛り上がっています。
そこで今回は、トーナメントの組み合わせ表をCSSで作成してみました。
トーナメント表のデザインについて
トーナメント表のデザインには、大きく分けて「縦書き」と「横書き」の２パターンがあると思います。
今回は、横書きのトーナメント表を作成します（縦書きは難しすぎて作れません）。
また、トーナメント表では、勝ち上がりや対戦の流れを示す線を配置する必要があります。
そのため、レスポンシブデザインにはせず、レイアウトを固定したうえで、画面内をスクロールして見られる形にしています。
トーナメント表のHTMLとCSSについて
トーナメント表をデザインするためのHTMLとCSSになります。
HTML
<div class="nya-scroll">
<div class="nya-bracket-wrapper">
<div class="nya-bracket">
<div class="nya-round">
<div class="nya-match">
<div class="nya-team">プールA 1位</div>
<div class="nya-team">プールB 2位</div>
</div>
<div class="nya-match">
<div class="nya-team">プールB 1位</div>
<div class="nya-team">プールA 2位</div>
</div>
<div class="nya-match">
<div class="nya-team">プールD 1位</div>
<div class="nya-team">プールC 2位</div>
</div>
<div class="nya-match">
<div class="nya-team">プールC 1位</div>
<div class="nya-team">プールD 2位</div>
</div>
</div>
<div class="nya-round">
<div class="nya-match">
<div class="nya-team">準々決勝<br>（ヒューストン）</div>
<div class="nya-team">準々決勝<br>（ヒューストン）</div>
</div>
<div class="nya-match">
<div class="nya-team">準々決勝<br>（マイアミ）</div>
<div class="nya-team">準々決勝<br>（マイアミ）</div>
</div>
</div>
<div class="nya-round">
<div class="nya-match">
<div class="nya-team">準決勝（マイアミ）</div>
<div class="nya-team">準決勝（マイアミ）</div>
</div>
</div>
<div class="nya-round">
<div class="nya-match">
<div class="nya-team">決勝（マイアミ）</div>
</div>
</div>
</div>
</div>
</div>続いて、CSSになります。
CSS
.nya-scroll {
max-width: 100%;
overflow-x: auto;
margin: 0 auto;
background-color: #fff;
padding: 10px;
box-sizing: border-box;
}
.nya-bracket-wrapper {
min-width: 860px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.nya-bracket {
display: flex;
align-items: stretch;
height: 500px;
padding: 0 10px 20px;
box-sizing: border-box;
}
.nya-round {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 180px;
margin-right: 40px;
}
.nya-round:last-child {
margin-right: 0;
}
.nya-match {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
flex-grow: 1;
}
.nya-team {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
margin: 0;
padding: 8px 5px;
box-sizing: border-box;
border: 3px solid #0060a8;
background-color: #fff;
color: #000;
font-size: 14px;
font-weight: bold;
line-height: 1.4;
text-align: center;
}
/* 1. 枠の右から出る短い横線 */
.nya-round:not(:last-child) .nya-team::after {
content: "";
position: absolute;
top: 50%;
right: -20px;
width: 20px;
border-top: 2px solid #000;
transform: translateY(-50%);
z-index: 1;
}
/* 2. 上下のチームをつなぐ縦線 */
.nya-round:not(:last-child) .nya-match::after {
content: "";
position: absolute;
top: 25%;
right: -20px;
bottom: 25%;
border-right: 2px solid #000;
z-index: 1;
}
/* 3. 縦線の中央から次のラウンドへ伸びる横線 */
.nya-round:not(:last-child) .nya-match::before {
content: "";
position: absolute;
top: 50%;
right: -40px;
width: 20px;
border-top: 2px solid #000;
transform: translateY(-50%);
z-index: 1;
}
@media (max-width: 767px) {
.nya-bracket {
height: 460px;
padding: 0 6px 16px;
}
.nya-round {
width: 170px;
margin-right: 36px;
}
.nya-team {
font-size: 13px;
min-height: 44px;
}
}
にゃのらいと これを反映すると下記のようになるにゃ。
実は、上記のトーナメント表は、WordPressの投稿ページに直接記載していません。
その理由は、WordPressテーマなどに設定されているCSSと競合する可能性があるため、iframeで読み込む形にしています。
なお、iframeは次のように記述しています。
<iframe
src="（読み込むURL）"
width="100%"
height="560"
style="border:0; display:block;"
loading="lazy"
title="決勝トーナメント組み合わせ">
</iframe>なお、iframeで読み込んでいることもあり、.nya-bracket-wrapperに、font-familyを設定しています。
以上、トーナメント表のCSSとHTMLでした。参考になる部分があれば幸いです。
