どうしてwebデザイナーに・・・CSSが書けないのか?(またはCSSでFizzBuzz問題)

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

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-EdoFacebookページを いいね! してから、Co-Edoで開かれる勉強会への参加をいますぐ検討することだ。 (訳注:Co-Edoのブログで毎週、勉強会の情報書いています

それでは。

解答集編の記事はこちら

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

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

f:id:mon_tinian:20140206203613j:plain

賢くないひとはこれを使ってみてはどうか(Chrome拡張機能 : Nogusy)

賢い人はみんな使っていることで有名Gunosyという素敵なサービスがあります。

僕もとても大好きなサービスです。使っていませんが。

使ってないひとはみんな賢くない・・・

例の広告を、図にするとこんな感じ。

f:id:mon_tinian:20140129175522p:plain

というわけでこの記事は賢くないあなた(非Gunosyユーザー)のために書きました。

別窓問題

おそらく賢い人(Gunosyユーザー)は気づいてないと思うのですが、非Gunosyユーザーにはとても許せない問題「別窓問題」というのが存在します。

大好きでしかたがないGunosyですが、この点だけは、とてもうざい気になります。

Gunosyユーザーが、Facebook等でシェアされたGunosyのリンクを開くと次のような挙動になります。

  • シェアされたリンクを開くと、いったん(別タブで)Gunosyのページが開く
  • そのページのリンクを開くと、また別タブで記事ページを開く

ちなみにGunosyのアカウントを持っている方は、自動的に記事ページを表示する仕組みのようです。 (わたしは非Gunosyユーザーなので知りませんでしたが、さきほど教えてもらいました)

というわけで、作ったのが、次のようなGoogle Chrome拡張機能

GunosyでシェアされたURLでも自動的に記事ページにリダイレクトする Nogusy

https://github.com/monsat/nogusyGoogle Chrome 拡張機能

さすがに正式に公開するのはGunosyさんに申し訳ないため、こっそり公開しています。

How to use

ソースコードをDL(zip)するかgitでcloneしてください

$ git clone git@github.com:monsat/nogusy.git

Google Chrome 拡張機能のページ(chrome://extensions/)を開く

  • 開発者モード(Developer mode) をonにする
  • パッケージ化されていない拡張機能のロード(Load unpacked extensions...)をクリックする
    • 解凍フォルダ/nogusy/src/nogusy を選択する

あとは、思う存分、Facebook等でシェアされた某サイトのリンクを踏みまくってください。

紹介記事

ご紹介ありがとうございますー。

最後に

Gunosy大好きです! でもNogusyはもっと好きです。