世界のナベアツを php & xhtml & CSS で遊べるようにしてみた
世界のナベアツ（リンク先は wikipedia）がじわじわ熱いですね。去年の暮れくらいから言及されているようなので、流行としては乗り遅れた感がいっぱいですが、ネタということでひとつｗ
実は現在のプロジェクトのメンバーに楽しんで勉強してもらうにはどうしたらいいか、ということを考えていたところ、mixi の某コミュニティにおいて MT のテンプレートで世界のナベアツをやる、というのがあって、WP でもやってみようと1人で考えていたところ、WP って php なんだから何でもできちゃうし、それってタダのプログラムじゃん、とゆうところに落ち着き、これをやらせてみたら面白いんじゃないか、と思って、プロジェクトメンバーへの宿題にしてみたのです。
「3の倍数と3の付く数字だけアホになり、5の倍数だけ犬っぽくなります」っていう、条件だけを出して、後はどうつくるか、どう見せるか、も含めて、全て自由、という感じで出題しました。要はそのアウトプットでもって、そのメンバーの技術レベル、取り組み姿勢、ものの考え方などなどを計って、今後の学習プランを作ろうかなってことです。それに対してこちらから何も出さないのもアレなんで、作ってみたって感じです。
とりあえず、どんなもんか見てやるぜ、という方はどうぞ。世界のナベアツ php で作る html & CSS 的回答
向こうに書ききれなかった注意点とかもろもろは以下。
- うちの若いプロジェクトメンバー向けの宿題（に対する回答例）です。あんまり細かいつっこみは勘弁してくださいｗ
- CSSは手抜きしてます。8h 以上時間割きたくなかったので、Mac での検証サボりましたｗ なんか問題あったら教えてください。
- でも NabeAzz を名乗るネタは CSS にあります。以下ネタばれ
- アホっぽくなる CSS は、class に aho （アホ）を指定し、color:#af0af0;（アフォアフォ） にしています。ちなみに、color:#af0; だと読みにくいんですｗ
- 犬っぽくなる CSS は、class に bow （犬の鳴き声）を指定し、font-size:11pt;（わんわん）にしています。ちなみに、見た目の差をつけるのが難しかったので、下線も引きました
- ダンディになる CSS は、class に dad （父：ささやかに自尊心を満足させた！）を指定し、font-style:italic;（イタリック：いや、イタリアとは関係ない：タダのオヤジギャグｗ）にしています。
- html は xhtml 1.0 Transitional にしてみました。本当は strict にしようと思ったんだけど、どうせなら宿題の再提出用にしたほうが、みんな（主に俺かｗ）ハッピーかな、とか。
- table のアクセシビリティについて再考するきっかけになりました。caption の UA 毎の挙動も久しぶりに思い出したり、結局自分もいい勉強したな、とか。
- html も CSS も、W3C のバリデータでチェックして、問題ないことを確認してます。html-lint はあまりこだわりたくないけど、とりあえずエラー０にしてみた。自分たちが同じようなものを作るときに、どうしてそうしなければいけないか、どうすれば同じように（１から）作れるか、を考えるきっかけになるといいと思う。
思いつきで、勉強用に使えるポインタとか以下。
- W3C Markup Validation Service 正しい html を書くときは必須でチェックすること。
- W3C CSS Validation Service 正しい CSS を書くときは必須でチェックすること。
- Another HTML-lint どうしたら正しい html が書けるようになるかはこのツールのお世話になるといい。
- CSS Zen Garden CSS の可能性にインスピレーションを受けたくなったら見るといい。
- CSS Table Gallery CSS でデータテーブルのインスピレーションが欲しいとき。
- 47+ Excellent Ajax CSS Forms Form のビジュアルを考えるときのインスピレーションもらったり。
- Web Content Accessibility Guidelines 出現順序の賛否両論はあるかもしれないけど、余力が出来たらアクセシビリティに関しては必ず勉強しておくといい。
- Dive Into Accessibility（の日本語訳） かなり古いネタになるけど、これはとても重要なこと。例えば明日、自分が光を失ったらどうなるかを考えたら、制作者として決してアクセシビリティは他人事じゃなくなる。
Leave a Reply