CSSを使ってグリッドレイアウトを行うCSS Grid Layoutの仕組みを、基本から応用まで順を追って学ぶ事のできるコンテンツ。このCSS Grid Layoutは「display: grid;」を使って行う新しいレイアウト手法なんだけど、格子状に区切って長方形をそれぞれ長さを決めつつ並べていくというもので、懐かしのTableレイアウトにちょっと近い印象を受けました。しかしまぁアレですな、「やっとFlexboxレイアウトを覚えたところでまた次の手法かよふじこふじこ」的な感じはありますな。けど新らしいものは否応なしに覚えていかないといけない業界ですもんね仕方ないですよね。思い起こせばTable→Float→Flexboxとレイアウトに使うタグって色々ありましたよね・・・。
ちなみにSafariはこのdisplay: grid;をまだサポートしていないので、このコンテンツ自体表示できません。Chromeあたりでお試しください。
見慣れたメルカトル図法の地図による認識の誤りを正してくれるマップ。メルカトル図法って分かりやすく平面に地図を表してくれる反面、元々３次元のものを２次元化する際に極地ほどX軸に引き伸ばされちゃうんですよね。その結果赤道付近の国に比べて、極に近い国は本来より大きく表示されちゃう。その代表的な例がグリーンランドで、世界地図上ではやたらデカいのに実際には言うほど大きくなかったりします。このサイトではそうした地図の特性を補正した上で、任意の国を相対的に他の国と大きさを比べる事ができます。デフォルトでアメリカ、中国、インドがアクティブ（ドラッグできる状態）になっているので、北極の方まで持って行きましょう。すると、その国が仮にその位置にあった場合どの程度の大きさで表記されるかが分かります。新しく国をアクティブにする際は、画面左上の検索バーから呼び出す事ができます。試しにグリーンランドとかアラスカ（アラスカは国じゃないけどなぜか単独でアクティブにできます）あたりを赤道付近に持ってくると、あーこんなもんなのか、とか思います。世界の大きさを知る上でなかなか興味深い試みですな。
ゲームをしながらFlexboxの挙動を学べる教育系コンテンツ。ルールは簡単で、カエルをハスの葉の上にピッタリ乗るようにFlexboxのプロパティ記述をするというもの。画面左、#pondと指定されているものがいわゆるFlexboxコンテナーです。んでハスの葉は固定で、カエルがFlexboxアイテムという感じ。最初はjustify-content、次にalign-itemsと来て、さらにflex-directionと続きます。全部で24問あり、一通りプレイし終えた頃にはFlexboxが使えるようになってるという内容。TableレイアウトからCSSによるFloatレイアウトに移行した時もそうだったけど、Flexboxでのレイアウトって経験者ほど頭の切り替えが難しかったりするので、こういうコンテンツは楽しく学べて良いですな。
スピーカーからいかにして音が出るのかを、アニメーションGifを使って解説する教育系コンテンツ。音がなる仕組みと、音が伝わる仕組みについて解説されています。以前ジェットエンジンの動く仕組みで取り上げたものの続編です。このサイトのコンテンツ、アニメーションGifの使い方がスゴく上手というか丁寧で分かりやすいです。様々なハードウェアがどのような仕組みで動いているのか知りたいという知識欲を刺激してくれますな。わたくしこういうの大好きです。
ピクセルの大きさを学べるコンテンツ。例えば「Width 40px、Height 120pxで短形描いて」みたいな感じで問題が出るので、画面内をドラッグしてその大きさの四角形を描くというのが目的。全部で5問出題され、トータルスコアで競われます。普段からPhotoshopを使ってピクセルの大きさには慣れてるつもりの俺がやってみましたが、 結果は331点。結構残念なリザルトです。デザイナーやめたろか思いました。
ベジェ曲線を上手に描くゲーム。このサイトの作り方どっかで見た事あるなーと思ったら、以前紹介したKern Typeを作ったサイトでした。相変わらずイイ趣味してます。
最初に３ステージ分チュートリアルが用意されているので、ベジェ曲線を描いた事のない人でも描き方はなんとなく分かると思いますが、やってみると結構難しいです。４ステージ目以降は実践で、ステージごとに最大手数も決められています。できるだけ少ない手数で描画した方が高得点。これからイラレとか始める人にはちょうど良さそうな教育系コンテンツですね。
道具が動く仕組みを、アニメGifを使って紹介するサイト。ジェットエンジンや車のエンジン、拳銃などの動作する仕組みが紹介されてます。いやーこれ素晴らしいですね。仕組みフェチにはタマらん内容でございます。この前初めて会った人と「俺は油圧ポンプが大好き！」「俺はロータリーエンジンのアニメGifなら3時間くら見ていられる！」みたいな話をしていました。飲んでるとはいえ、なぜ初対面でそんな話になったのかサッパリ覚えていませんが、まぁ男の子らしい会話だなぁと後になって思いました。いやーこのサイトほんとに見ていて飽きないっすわ。
以前隆盛を誇ったFlashコンテンツと、それを駆逐しようとする勢力との戦いを描いたコンテンツ。それらをスクロール芸を使って楽しく紹介してます。まずは概要を説明し、次に同じゲームをFlashとHTML5両方で作ったものをユーザーに比べてもらい、そして両プラットフォームを数字で説明してます。最後に「で、あなたはどっちが好き？」という問いかけをFacebookのいいねボタンを使って質問するという内容。いいねの数を見る限りはHTML5の圧勝のようです。まぁ時代を考えると当然でしょうね。FlashとHTMLとの戦いは、AdobeとAppleとの戦いと置き換える事もできます。企業同士のこうしたプラットフォーム戦争は単純に企業の利益に基づくものではありますが、個人的にはFlashがすっかり過去の遺物となった現状は「Apple GJ！」と思ってます。けどいまだに「iOSはFlash使えないからイヤ」とか言う人もいますしねぇ。あとこのコンテンツ、途中でプレイできる縦シューゲームがオモろいです。夢中になってやっちゃいました。iOS Appも出てるようです。
