Safariでレスポンシブデザインモードをアクティブにして使用する方法

OS X El CapitanのSafariバージョン9から、Appleはレスポンシブデザインモードを導入しました。このインターフェイスは、Web開発者がさまざまな画面サイズ、向き、解像度でWebエクスペリエンスを設計するのに役立ちます。レスポンシブデザインは、開発者が自分のWebサイトとアプリが複数のデバイスとプラットフォームをサポートしていることを確認するのに役立ちます。

SafariWebブラウザでレスポンシブデザインモードを有効にする方法は次のとおりです。

この記事の情報は、Safari13からSafari9に適用され、macOSCatalinaからOSXElCapitanにまたがっています。レスポンシブデザインモードは、AppleがサポートしなくなったSafariのWindowsバージョンでは使用できません。

Safariでレスポンシブデザインモードを有効にする方法

Safariレスポンシブデザインモードを他のSafari開発者ツールとともに有効にするには：

1. Safariに移動します メニューを選択し、設定を選択します 。

   キーボードショートカットのコマンドを押します + 、 （カンマ） 設定にすばやくアクセスするには。

2. 設定 ダイアログボックスで、詳細を選択します タブ。

   

3. ダイアログボックスの下部で、メニューバーに[開発]メニューを表示を選択します。 チェックボックス。

   

4. 開発が表示されます 上部のSafariメニューバーにあります。

   

5. 開発を選択します>レスポンシブデザインモードに入る Safariツールバーで。

   キーボードショートカットのオプションを押します +コマンド + R レスポンシブデザインモードにすばやく入ることができます。

   

6. アクティブなWebページがレスポンシブデザインモードで表示されます。ページの上部で、iOSデバイスまたは画面解像度を選択して、ページがどのようにレンダリングされるかを確認します。

   

7. または、解像度アイコンの上にあるドロップダウンメニューを使用して、さまざまなプラットフォームでWebページがどのようにレンダリングされるかを確認します。

   

Safari開発ツール

レスポンシブデザインモードに加えて、Safariの開発メニューには他の便利なオプションがあります。

ページを開く

現在MacにインストールされているブラウザでアクティブなWebページを開きます。

ユーザーエージェント

ユーザーエージェントを変更すると、Webサイトをだまして、別のブラウザを使用していると思わせることができます。

Webインスペクターを表示する

CSS情報やDOMメトリックなど、すべてのWebページのリソースを表示します。

エラーコンソールを表示

JavaScript、HTML、およびXMLのエラーと警告を表示します。

ページソースを表示

アクティブなWebページのソースコードを表示し、ページのコンテンツを検索できます。

ページリソースを表示

現在のページのドキュメント、スクリプト、CSS、その他のリソースを表示します。

スニペットエディタを表示

コードのフラグメントを編集して実行できます。この機能は、テストの観点から役立ちます。

拡張ビルダーを表示

それに応じてコードをパッケージ化し、メタデータを追加することで、Safari拡張機能を構築するのに役立ちます。

タイムライン記録の開始

WebKit Inspector内で、ネットワークリクエスト、JavaScriptの実行、ページレンダリング、およびその他のイベントを記録できます。

空のキャッシュ

標準のWebサイトキャッシュファイルだけでなく、Safari内に保存されているすべてのキャッシュを削除します。

キャッシュを無効にする

キャッシュを無効にすると、ローカルキャッシュを使用するのではなく、アクセス要求が行われるたびにリソースがWebサイトからダウンロードされます。

スマート検索フィールドからのJavaScriptを許可する

セキュリティ上の理由からデフォルトで無効になっているこの機能を使用すると、JavaScriptを含むURLをSafariのアドレスバーに入力できます。