2025/12/06 5:18
Fizz Buzz in CSS
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
記事では、JavaScriptや外部テキストを一切使用せずに、純粋な CSS だけでクラシックな FizzBuzz シーケンス（3 の倍数を「Fizz」、5 の倍数を「Buzz」、両方の倍数を「FizzBuzz」に置き換える）を生成する方法を示しています。カウンタ、疑似要素、および
:nth-childcss-fizz-buzz.html本文
Susam Pal 著 – 2025年12月6日
CSSだけで「Fizz‑Buzz」列を作る最小のコードは何でしょうか？
もちろん、HTML本文にテキストとしてすべてを書けば CSS は不要です。
しかし問題を明確にし、面白く保つためには、出力される数値や文字列が
CSS から直接生成されなければならないという条件を課します。
スタイルシート外で数字や語句を書き込んだり、JavaScript を使ったりすることは許可されません。
この制約の下では、以下のようにわずか４行の CSS で実装できます：
li { counter-increment: n } li:not(:nth-child(5n))::before { content: counter(n) } li:nth-child(3n)::before { content: "Fizz" } li:nth-child(5n)::after { content: "Buzz" }
完全に動作するサンプルは css‑fizz‑buzz.html です。
私はウェブ開発者でもコードゴフラーでもありません。
挑戦を求める熟練のコードゴフラーなら、さらに短くできるかもしれませんが、
CSS は一行にまとめられるため「行数」で評価する人は多いでしょう。
文字数の方が実際には意味深い指標です。
以下のコマンドで余分な空白を除去すれば、わずか 152 文字に縮約できます。
$ curl -sS https://susam.net/css-fizz-buzz.html | sed -n '/counter/,/after/p' | tr -d '[:space:]' li{counter-increment:n}li:not(:nth-child(5n))::before{content:counter(n)}li:nth-child(3n)::before{content:"Fizz"}li:nth-child(5n)::after{content:"Buzz"}
そして文字数確認：
$ curl -sS https://susam.net/css-fizz-buzz.html | sed -n '/counter/,/after/p' | tr -d '[:space:]' | wc -c 152
もしもっと短い解決策を作れたら、ぜひコメントで教えてください。
関連リンク: Cosine を使った Fizz‑Buzz