Safariによるレスポンシブデザインの確認方法

まずは準備から

1. Safariを起動します。
2. 「Safari」->「環境設定」->「詳細」タブを選択します。
3. 「メニューバーに"開発"メニューを表示」というチェックボックスにチェックを入れます。

実際に確認してみましょう。

1. レスポンシブデザインを確認するためのサイトに移動します。
2. Safariのメニューバーより、「開発」->「レスポンシブ・デザイン・モードにする」を選択します。

すると画面の見た目が変わり、iPhoneやiPadの製品が画面上部に表示され、それらを選択することにより画面の表示範囲が変更されるので簡単にデザインの確認が行えるようになります。 なお、Safariの開発機能の中には、IEやChrome、Firefoxなどのエミュレート機能も備わっていますので、活躍の場は広がりそうです。

最後に

私、今までPC向けのブラウザ、iPhoneやiPad、Androidなどの各デバイスのサイズに応じたサイトの確認は、Firefoxのアドオンツールを使用していました。 しかし、今回紹介したSafariの開発ツールを使えば、Apple製品での確認がスムーズに行えることになりますので、これからも使う機会が増えていきそうと感じました。