今更FizzBuzz問題をやってみた、CSS3で。

css

ほんと今更なんですが、FizzBuzz問題を解いてみたくなったのでやってみました。

って、CSS じゃないの。

以下、どうでもいい解説

まず、空のリストを100個用意します。ついでにolにfizzbuzzというクラスを名付けておきます。

<ol class="fizzbuzz">
  <li></li>
  <li></li>
  --- 中略 ---
  <li></li>
  <li></li>
</ol>

あとは、以下の様なCSSだけでおっけーです。

ol.fizzbuzz li {
  content: counter(count);
  counter-increment: count;
  display: inline;
  line-height: 1.5;
}
ol.fizzbuzz li:nth-child(3n) {
  content: "Fizz";
  font-size: x-large;
  color: blue;
}
ol.fizzbuzz li:nth-child(5n) {
  content: "Buzz";
  font-size: x-large;
  color: red;
}
ol.fizzbuzz li:nth-child(15n) {
  content: "FizzBuzz";
  font-size: x-large;
  color: green;
}

contentプロパティのcounter()を使って1から100までの数字を生成します。
次にその上から3の倍数の場合はFizz、5の倍数はBuzz、15の倍数はFizzBuzzと、表示するわけですが、それには:nth-child(n)セレクタを使います。かっこ内は数列になっているので、奇数や偶数、倍数など簡単に指定できます。
後は、共通の倍数の場合の処理ですが、CSSは記述した順序によって優先度が指定されるので、15の倍数を最後に記述しておけば何も問題ないわけです。
CSS3が全てのモダンブラウザで利用できる日が待ち遠しいです。
最後にOpera9.5 alpha で表示した結果のスクリーンショットでもはっておきましょう。