今回はCSSとjQueryを使って、簡単にApple製品の端末を表示することができる、CSSDeviceのご紹介。
CSSのダウンロード
あとはセットアップに従います。
CSSDeviceのセットアップ
説明と言っても、まずはheadでdevices.min.cssを読み込みます。
次に、フッターの/Bodyの前にJavaScriptを読み込むだけです。
CSSの読み込み
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="devices.min.css" />
</head>
...
JavaScriptの読み込み
...
<body>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="devices.js"></script>
</body>
</html>
あとは各種Device事のページのコードをとりあえずコピペすればOKです。
Deviceの色などの設定オプションも一応あります。
iPhone
iPad
Mac
Watch
基本はコピペでなんとかなります
ひとまずこんな感じです。
Watchの利用も今後増えるかもしれませんので、是非チェックしてみてくださいね。
それでは、また。