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

D&I Blog

このブログでは、今までに培ってきた技術的なことや、得意としている地図のことなどについて、幅広く取り扱っていこうと考えています。積極的に新しいことにチャレンジしたいメンバーもいるので、そのようなトピックも扱っていきたいと思います。

D&I BLOG

To mind the creative destruction

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

まずは準備から

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

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

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

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

最後に

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