スマートフォン用のプロモーションを行う際には必ず必要になるのがモック（枠）ではないでしょうか。スマートフォン、タブレットデバイスの枠があるかないかで随分印象が変わるはずです。 そこで使ってみたいのがdevices.cssです。10種類のデバイスの枠を簡単に表示してくれるスタイルシートです。

devices.cssの使い方

devices.cssはクラス名、Divの指定法が面白いです。例えばiPhone 4Sであれば、

<div class="marvel-device iphone4s silver">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>

HTC Oneであれば、

<div class="marvel-device htc-one">
    <div class="top-bar"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
</div>

のようになっています。後はscreenの所に内容を書いたり画像を埋め込めば、モックとして見栄えのいいコンテンツができあがるでしょう。

devices.cssはCSS3製のオープンソース・ソフトウェア（MIT License）です。

10 Pure CSS Mobile Devices from @marvelapp marvelapp/devices.css