CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」

スマートフォンやタブレット・PCまで様々なデバイスをCSSで表現したライブラリ「Devices.css」を紹介します。iPhone・iPad・AppleWatch・MacBookからGoogle Pixel・Surfaceまで簡単に実装することができます。

Devices.css


iPhoneXでは筐体はCSS、スクリーンは動画を埋め込んで再現しています。アプリの紹介や操作フローなど動画と組み合わせれば効果的に使えそうです。


PICK UP
RELATED POSTS
  • 【jQuery】レスポンシブ・フレキシブルなモーダルウィンドウ「iziModal.js」
  • マルチボックスのフルスクリーンメニュー「Multibox Menu」
  • 非レスポンシブの要素をレスポンシブ化する「Reframe.js」
  • 【jQuery】背景画像のスライドショーを実装する「Vegas2」
  • Web制作に役立つChromeおすすめの拡張機能11選
  • 10年前の有名サイトを振り返ることができる「Ten Years Ago」
POPULAR POSTS
  • 長いURLを短くするオススメの短縮URLサービス
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • フォントを調べる時に役に立つサービス・サイトまとめ
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
RECENT POSTS
  • プライス・値段表示などに使えそうな英数字フォント13選
  • アプリ・Web制作で必要な要素をチェックできる「Checklist Design」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年4月版】
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォントまとめ