ギズモードのデザイナーが語る! エイプリルフールの裏側

先日のエイプリルフールは楽しみましたか?

毎年ネット上でたくさんのサイトでがウソをついたり、悪ノリしたりするので、毎年楽しみにしてる方も多いのでないでしょうか。今年のギズモードはトップページが左右反転文字になって、読みにくい、やりすぎ! と大好評(?)でした。

また各記事ページには、あのアザラシ君に常駐していただき、ビックリした、かわいい、こわいwなどこちらも大盛況でした。

さて、そんなギズモードへの反応を楽しみながら見させてもらってたんですが、「左右反転の仕組みどうなってるの?」という声を多くいただいたので、今回ちょっとだけご紹介したいと思います。

 実は、サイトのデザインを構成するCSSファイルの調整だけで左右反転が可能なんです。

内容は下記のとおり。

body{

-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);

-moz-transform: matrix(-1, 0, 0, 1, 0, 0);

transform: matrix(-1, 0, 0, 1, 0, 0);

filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1);

}

実際は、オトナの事情でサイトの全部を反転ということは出来ませんでしたので、部分部分で反転させていました。

余談ですが、反転だけでなく、任意の角度に傾けたり逆さにしたりもできちゃいます。

参考ページ:

Safari CSS Reference: Supported CSS Properties

Mozilla Developer Center / -moz-transform

MSDN Matrix Filter

ちなみに、記事ページに期間限定で出没したアザラシ君はこんな感じで、サイトの右下に常駐マウスオーバーすると吹き出しでランダムに喋ってました!

それでは、来年のエイプリルフールもお楽しみに!

(前田龍一)