読者です 読者をやめる 読者になる 読者になる

CrossBridge Lab

技術ネタ、デバイスネタを...

Safari 9 のレスポンシブ・デザイン・モードで表示を確認する

開発ツール

はじめに

 OS X El Capitan の Safari 9 から「レスポンシブ・デザイン・モード」という機能が追加されました。この機能を使えば OS XSafari を使って iPhoneiPad など複数のデバイスや解像度での表示を確認することができます。

f:id:crossbridge-lab:20151126234708p:plain

開発メニュー

 レスポンシブ・デザイン・モードを使うにはメニューバーに開発メニューを表示させる必要があります。まず Safari のメニューから環境設定を開きます。

f:id:crossbridge-lab:20151126234218p:plain

 そして詳細タブを選択し、ウインドウの下側にある「メニューバーに"開発"メニューを表示」にチェックを入れます。

f:id:crossbridge-lab:20151126234143p:plain

 これで Safari のメニューバーに「開発」という項目が表示されるようになります。

f:id:crossbridge-lab:20151126234557p:plain

レスポンシブ・デザイン・モード

 メニューバーに追加された開発の中に「レスポンシブ・デザイン・モードにする」という項目があります。

f:id:crossbridge-lab:20151126234911p:plain

 これを選択すると閲覧中のサイトを解像度を変更したり、ユーザエージェントを偽装して表示を確認することができます。レスポンシブなサイトを開発しているときに便利な機能なので使わない手はありません。

f:id:crossbridge-lab:20151126235143p:plain

まとめ

 OS X El Capitan の Safari 9 から追加されたレスポンシブ・デザイン・モードを使うことで、レスポンシブなサイトを開発しているときに表示の確認を行うのがとても楽になります。