IDEA ATOZ

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

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

0

d_141027

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

a_141027

簡単!URLを入力するだけ

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

b_141027

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

e_141027

スクロールもできる!

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

c_141027

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

ウェブサービス

関連記事

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

画像から背景を自動認識して透過処理を行ってくれるWebサービス「Background Burner」

「Background Burner」は、画像の背景を自動で認識して透過処理を行ってくれるサイトです。どこの部分が背景なのか、どの部分がメインの物体なのか指定しなくても場所を自動で識別し処理を行ってくれます。Photoshopなのどツールを使えば精度の方はもちろんですが、「Background Burner」は、Web上で透過をすべて完結することができます。お気軽に透過処理を行いたいってときに重宝するサービスです。

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

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

Message

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