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

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

Devices.css


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


  • カエルのゲームでFlexboxを学べるサイト「Flexbox Froggy」
  • 簡単にホバーエフェクトを実装できるCSSライブラリ「Izmir Hover Effects」
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • さまざまなスタイルのCSSボタンをコレクションした「Buttons」
  • 簡単に作れるはめ込み画像モックアップジェネレーター5選
RELATED POSTS
  • カスタマイズして使用できるアイコンライブラリ「Vivid.js」
  • イメージを見ながら学べるCSS GRIDのチートシート「GRID」
  • 【jQuery】テキストカラーをシャッフルさせるjQueryプラグイン「JUMBLE」
  • モーフィングアニメーションのページ遷移を実装できる「Morphing Page Transition」
  • シンプルなチャートを実装できるライブラリ「Frappé Charts」
  • Web上で差分が確認できるテキスト比較ツール「difff」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】
  • 導入しておきたいWordPressのおすすめプラグイン
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • CSSで作成する吹き出しとデザインのアイデア