レスポンシブ対応用に複数のブレイクポイントで手軽に確認できるツール -Wood Cuttr
Post on:2013年4月26日
sponsors
スマフォの横と縦のサイズっていくつだっけ？ タブレットは？ ネットブックは？ とウェブページの制作で、レスポンシブ対応用に複数のブレイクポイントで簡単に確認できるツールを紹介します。
Wood Cuttrの対応ブラウザ・デバイス
対応ブラウザ・デバイスは、下記の通りです。
動作するブラウザ
- IE9+
- Firefox 3.6+
- Chrome 10+
- Safari 5.1+
- Opera 11.6+
※Wood Cuttrが動作するブラウザです。
サポートしているデバイス
- iPad & iPhone Models
- Android
- スタンダードなTVスクリーン
- デスクトップ
※ビューポートのサイズをサポートしているデバイスです。
Wood Cuttrの使い方
使い方は簡単で、Wood Cuttrのページでキーボードの「T」を押してみてください。
Wood Cuttr：キーボードの「T」を押す
上部にレスポンシブ用のルーラーが表示され、現在の表示サイズとそのサイズに適用したデバイスが表示されます。
ウインドウのサイズを変更すると、それに併せて変更されます。
用意されているデバイス
Wood Cuttrのセットアップ
あなたのHTMLファイルにWood Cuttrを組み込むのは、非常に簡単です。
Step 1: 外部ファイル
まずは、head内に当スタイルシートを設置します。
<head> <link rel="stylesheet" type="text/css" href="css/wc-default.css" /> </head>
最後に、「jquery.js」と当スクリプトを</body>の上に配置するだけです。
<script src="js/jquery-1.8.2.min.js"> </script> <script src="js/woodcuttr-1.0.min.js"> </script> </body>
Step 2: WoodCuttrを使う
あとはセットアップしたページをブラウザで表示し、キーボードの「T」を押すだけです。
sponsors
