【OS X】Safari 9の新機能「レスポンシブ・デザイン・モード」機能を使ってWebページを実際の画面サイ ズで確認！

Safari 9に新しく搭載された「レスポンシブ・デザイン・モード」機能。iPhone 6をはじめ、様々な機種の画面サイズでWEBページをプレビューすることが出来ます。WEB制作でのデザインやファーストビューを見るのにとても便利ですね。

再現できる画面サイズ

「レスポンシブ・デザイン・モード」で再現できる画面サイズは、iPhone 6/6 PlusやiPad mini 3、iPad Air 2などのほかに、画面サイズ800×600、1920×1080などもプレビューすることができます。

「レスポンシブ・デザイン・モード」の設定

「レスポンシブ・デザイン・モード」機能を使用するには、あらかじめSafariの「環境設定」で開発メニューの表示設定を行なう必要があります。

1. まず、Safari 9を起動し、Safariメニューから「環境設定…」を開きます。





2. 「環境設定…」画面で、メニュー「詳細」を開きます。そして、画面の一番下にある「メニューバーに”開発”メニューを表示」にチェックを入れます。これで、「レスポンシブ・デザイン・モード」の表示設定は完了です。

「レスポンシブ・デザイン・モード」の使用方法

1. 「レスポンシブ・デザイン・モード」で見たいページを開いたまま、「開発」メニューを開いて「レスポンシブ・デザイン・モードにする」をクリックします。





2. すると、「レスポンシブ・デザイン・モード」に画面が切り替わります。iPhone 6/6 Plusなどの用意された９つの画面サイズで内容を確認することができます。

自分のサイトがブラウザを切り替えた時にどのように表示されるか確認したい場合には、ユーザーエージェントを切り替えてみることもできます。

また、表示されたプレビューの文字が見にくい場合には、文字の濃度を倍率で変更できる機能も用意されています。

【OS X関連記事】
●MacにクールなApple Watchスクリーンセーバーを設定する方法
●Safariのキーボードショートカット10選。覚えておくと便利！
●新しいMacBook（Retina, 12-inch, Early 2015）へのデータ移行方法
●OS X 10.10.3 Yosemiteアップデートで、「Macの起動速度が遅くなった」を改善する方法
●Mac（Yosemite）でiPhoneの操作キャプチャ動画を録画する方法
●Yosemiteのドックを3D化する方法
●Macで不要になったアプリをきれいにアンインストールする（削除）方法。ログなどの「関連ファイル」もスッキリ！
●Macで「特定のウィンドウ」のスクリーンショットを“影なし”で撮る方法
●Yosemiteのダークモードを時間帯設定できるアプリ「Panda」。設定しておけば自動運用できて超便利！
●Yosemiteの「ダークモード」機能を有効にする方法。ホットキーでの切り替え方法も
●Finderのタイトルバーにフォルダのフルパスを表示する方法
●Safariの検索エンジンに「DuckDuckGo」を設定する方法
●隠しファイルやフォルダを表示・非表示にする方法