IDEA ATOZ

管理人がみつけたWebサービスや役立つ情報をお届け

自分のサイトがレスポンシブデザインに対応しているか調べられるサイト「Am I Responsive?」

0

d_141027

「Am I Responsive?」は自分のサイトがレスポンシブデザインなのかを調べる事ができるサイトです。URLを入力するだけで簡単に各デバイスのディスプレイサイズに対応しているかを確認できます。

a_141027

簡単!URLを入力するだけ

調べたいサイトのURLをボックスに入力し、「GO」ボタンをクリック。

b_141027

表示されたデバイスをクリックすれば、そのディスプレイサイズのものを前画面にできます。

e_141027

スクロールもできる!

一応、スクロールバーも表示されており、ちゃんとスクロールを行うことができます。また、実際にページ内でクリック等の操作を行うこともできます。

c_141027

パッパッと様々なディスプレイサイズのチェックができるので、レスポンシブデザインの確認の際なんかに使ってみてはいかが。

ウェブサービス

関連記事

ディスプレイサイズに特化した比計算サービス「Ratio Calculator」

「Ratio Calculator」は、指定したサイズ幅をディスプレイサイズに応じた比で計算をしてくれるサイトです。対応している比率は「16:9」、「4:3」、「3:2」、「黄金比」の4つ。縦横のピクセル数をディスプレイサイズにピッタリ合わせいときなんかに便利。

指定した画像をスマホ・タブレットのディスプレイに上手く合成してくれるサイト「placeit」

「placeit」は、スマートフォンやタブレットの画面に好きな画像を埋め込み生成してくれるサイトです。デバイス機器にサイトのスクリーンショットが写っているような画像を作りたいときなんかに便利。Photoshopのような画像編集ソフトを使用せずとも全てウェブ上で完成することが出来るのが嬉しいところ。iPadとiPhoneが同時に写り込んでいるような写真でも2台のデバイスの画像をそれぞれで指定して合成できるのが凄い。

こりゃ便利!CSSをSass/Scssに変換してくれるサイト「css2sass」

「css2sass」はCSSをSass/Scss形式に変換してくれるオンラインサービスです。変換したいCSSをフォームに入力してボタン1つで簡単に変換することができます。

これは便利!自分のパソコンの利用環境を教えてくれるサイト「ご利用環境チェックツール」

「ご利用環境チェックツール」は、自身のパソコン利用環境をチェックできるサイトです。ぱぱっとスペック等を知りたい時なんかにアクセスするだけで調べることができるので便利です。

レスポンシブデザイン用の画像を一括生成してくれるサイト「Responsive Image Breakpoints Generator」

「Responsive Image Breakpoints Generator」は、レスポンシブデザイン用に画像をまとめて複数サイズ生成してくれるサイトです。様々な画像サイズの画像をいちいち用意せずとも、元となる一枚をブラウザ上にアップロードするだけで簡単にレスポンシブデザイン用の画像を作成することができます。また、貼付け用コードも同時に生成される実用的なものとなっています。

フラットデザインに合いそうなボタンを簡単に作成してくれるサイト「2.5dBUTTON」

「2.5dBUTTON」はフラットデザインにぴったりなボタンを簡単に作成してくれるサイトです。アイコンフォントやタッチデバイスに対応しており、スライダーを調整するだけでオリジナルボタンが完成しちゃいます。

これは便利!様々な効果を生成できるCSS3ジェネレータ「CSS3.0 Maker」

「CSS3.0 Maker」はCSS3のコードをリアルタイムで自動生成してくれるジェネレータです。各パラメータのスライダーを弄るだけで簡単にお好みの効果を適用することができます。プロパティが豊富で設定できるスタイルシートの項目が多いのが嬉しいところ。

これは便利!自分のパソコンの利用環境を教えてくれるサイト「ご利用環境チェックツール」

「ご利用環境チェックツール」は、自身のパソコン利用環境をチェックできるサイトです。ぱぱっとスペック等を知りたい時なんかにアクセスするだけで調べることができるので便利です。

現在の自分のTwitterアイコンからGIFアニメを作成できる「GIFアニメアイコンじぇねれーた」

「GIFアニメアイコンじぇねれーた」は、現在自分が設定しているTWitterアイコンの画像からGIFアニメーションを生成してくれるサイトです。アカウント名を入力すれだけで簡単に動くGIFアニメが作成されます。

こりゃ便利!CSSをSass/Scssに変換してくれるサイト「css2sass」

「css2sass」はCSSをSass/Scss形式に変換してくれるオンラインサービスです。変換したいCSSをフォームに入力してボタン1つで簡単に変換することができます。

Message

メールアドレスが公開されることはありません。