Home > スポンサー広告 > レスポンシブデザインを確認するときにChrome Canaryの「Toggle device mode」が便利でした

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/193-22ed01dd
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > レスポンシブデザインを確認するときにChrome Canaryの「Toggle device mode」が便利でした

Home > ユーティリティ > レスポンシブデザインを確認するときにChrome Canaryの「Toggle device mode」が便利でした

レスポンシブデザインを確認するときにChrome Canaryの「Toggle device mode」が便利でした

004_201602081144240b7.jpg

以前の記事でぐぐぐーっとブラウザを縮小したときの幅を検証しましたが、今回はもう少し踏み込んで、検証ツールで便利だったChrome Canaryの「Toggle device mode」をご紹介します。

Chrome Canaryのダウンロード

Chrome Canaryは、google Chrome最新版のテストバージョンみたいなもので、本家Chromeと別のアプリケーションとしてインストールができます。

→ダウンロードはこちらから。

任意のページを開いた状態で[表示]>[開発/管理]>[デベロッパーツール]

検証したい任意のページを開いた状態で、

[表示]>[開発/管理]>[デベロッパーツール]

を選択します。

表示されているページ内で [右クリック]→[検証] でも大丈夫です。

検証モードに入ったら、toggle device mode に切り替え

ちょっと小さいですが、ソースコードの検証エリアの上のタブに「toggle device mode」のアイコン 005.jpg があります。ショートカットキーは ⌘+shift+m です。

toggle device modeになりました!

ページの表示枠の外側にグレーの背景が敷かれ、画面サイズをこの範囲内で自由に変更できるようになりました。この状態ではjsなどで切り替えているサイトなどはPCサイトが表示されたままなので、⌘+Rで更新するとよりよい感じです。

サイト幅の変更や、レスポンシブの動きを変更するには


ページ範囲の横下の範囲変更アイコン007.jpgをぐりぐりしたり


上部のコントロールエリアでデバイスサイズに固定したりして変更します。


このまま要素を検証していくこともできますし、機能拡張「Full Page Screen Capture」などを使うと、例えばiphone6幅などでスクリーンショットを撮ることまでできてとっても便利なのです!


ちなみにノーマルchromeでも・・

UIが違うものとなっていますが、同じ機能があります。どっちかというと、スマホサイトなど、デバイス固定への意識が強いイメージです。(だけど横幅ぐりぐりもできます!)
たぶん好みだと思うので、お好きなほうを。


Safari(Mac 9.0.3)でも最近追加されたようです


safariでは、[safari]→「環境設定」→[詳細]→[メニューバーに"開発"メニューを表示]をチェックすることが前提になりますが、
[開発]→[レスポンシブ・デザイン・モードにする]を選択すると、レスポンシブのチェックが可能になります。こちらも、サクサク表示確認ができそうですね。
特に、iphoneやipadなど、apple系のデバイスのサイズが豊富になってます。


レスポンシブの動作確認もだいぶ整備されてきた感じがします。
ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/193-22ed01dd
Listed below are links to weblogs that reference
レスポンシブデザインを確認するときにChrome Canaryの「Toggle device mode」が便利でした from バニデザノート

Home > ユーティリティ > レスポンシブデザインを確認するときにChrome Canaryの「Toggle device mode」が便利でした

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。