タイトルはどうしてプログラマに・・・プログラムが書けないのか? からもってきました。原文はこれですかね。

FizzBuzz問題という有名な問題があります。

1から100までの数を表示させる。ただし3の倍数のときは数字の代わりにFizzと、5の倍数のときはBuzzと、3と5の両方の倍数のときはFizzBuzzと表示させる。

ただこれだけの問題です。

PHPで平易に書くとしたらこんなかんじでしょうか

<?php
for ($i = 1; $i <= 100; $i++) {
    if ($i % 15 == 0) {
        echo 'FizzBuzz';
    } elseif ($i % 3 == 0) {
        echo 'Fizz';
    } elseif ($i % 5 == 0) {
        echo 'Buzz';
    } else {
        echo $i;
    }
}

JavaScriptならこんな感じで書けますね

どうしてwebデザイナーに・・・CSSが書けないのか？

わたしはコワーキングスペース茅場町 Co-Edoに来ているWebデザイナーたちがCSSのボックスモデルすら理解していないという事実に信じられない思いでいた。

「そんなばかな！？」って思っただろうか？

わたしは試行錯誤の末、CSSのボックスモデルが理解できない人たちというのは、CSSで書くことが困難なデザインについて苦労しているのではないということが分かった。彼らは、FizzBuzz問題ですら解けないのだ。

CSSによるFizzBuzz問題はこちらだ。（訳注：このブログ記事の末尾でhtmlコードを確認することができます）

ちゃんとしたWebデザイナーであれば、これを実行するCSSを2分とかからずに紙に書き出せるはずだ。

怖い事実を聞きたい？

コンピュータサイエンス学部CSS学科レスポンシブデザイン研究室の卒業生の過半数にはそれができないのだ。自称上級Webデザイナーが答えを書くのに10-15分もかかっているのを見たこともある。

なお、このエピソードは当然フィクションです。

というわけでCSSだけでFizzBuzzしようぜ！

答えがわかった人（もしくは分かるだろうという人）は、はてブのコメントで使用する技術要素を書いて自称上級Webデザイナーたちに教えてあげてほしい。

答えがわからない残念な人は、コワーキングスペース茅場町 Co-EdoのFacebookページをいいね！してから、Co-Edoで開かれる勉強会への参加をいますぐ検討することだ。（訳注：Co-Edoのブログで毎週、勉強会の情報書いています）

それでは。

（解答集編の記事はこちら）

ul#main 内の li 要素が、適宜 Fizz/Buzz/FizzBuzz と表示されるように ...

（こんなネタ的ブログばかり書いていると、そろそろクズコンバレーの住民になれそうな気がしてきた）

f:id:mon_tinian:20140206203613j:plain