最近発見したスマホをCSSで再現したのが個人的にすごかったので紹介します。11 Pure CSS Flat Mobile Devicesは、Marvel PrototypingというところがGithubで公開していて、ここ最近に出ているスマホをCSSのみでしかもフラットデザインで再現されています。再現されている端末は、iPhone 5S, iPhone 5C, iPhone 4S, iPad Mini, Nexus 5, Lumia 920, Galaxy 5, HTC Oneの8機種です。
11 Pure CSS Flat Mobile Devicesで出ているスマホは、縦持ちだけではなく横持ちの表示もできるよう、横持ちにするときもJS(JQuery)でクラスを切り替えていました。
iPhone 5S
![iPhone 5S](https://be.dott.club/wp-content/uploads/2014/05/8PCMD_iPhone5S.jpg)
フラットで再現されると新鮮ですね。
iPad mini
![iPad Mini](https://be.dott.club/wp-content/uploads/2014/05/8PCMD_iPadMini-1024x853.jpg)
横表示もOKです。
Nexus 5
![Nexus 5](https://be.dott.club/wp-content/uploads/2014/05/8PCMD_Nexus5.jpg)
Nexus 5もいいかんじ
どの端末をすごく特徴を捉えていてNexus 5やGalaxy 5の曲がり具合もいい感じですし、HTC Oneのスピーカーをradial-gradientで再現していてこんな使い方もあるんだと勉強になりました。アプリ紹介系のLPなんかでざっくりとみせるにはかなり参考になるCSSでした。