レスポンシブ対応用に複数のブレイクポイントで手軽に確認できるツール -Wood Cuttr

スマフォの横と縦のサイズっていくつだっけ? タブレットは? ネットブックは? とウェブページの制作で、レスポンシブ対応用に複数のブレイクポイントで簡単に確認できるツールを紹介します。

サイトのキャプチャ

Wood Cuttr

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」を押すだけです。

top of page

©2017 coliss