Hatena::ブログ(Diary)

日々、とんは語る。

この日記のはてなブックマーク数 はてなスターカウンター Peace この日記をあなたのはてなアンテナに追加する。 rss
お問い合わせ先 mailto

2007-10-13 だべかへった日。

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

| 05:43 |

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

って、CSS じゃないの。

以下、どうでもいい解説

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

<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 で表示した結果のスクリーンショットでもはっておきましょう。

f:id:tomoya:20071014060817p:image:w350

トラックバック - http://d.hatena.ne.jp/tomoya/20071013/1192308204
<< 2007/10 >>
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31