Safariのレスポンシブデザインモードを有効にして使いこなす方法
OS X El Capitanに搭載されたSafari 9から、Appleは「レスポンシブデザインモード」を導入しました。この機能は、さまざまな画面サイズ・向き・解像度に対応したWeb体験を設計する際に、Web開発者を強力にサポートします。レスポンシブデザインを活用することで、複数のデバイスやプラットフォームでもウェブサイトやアプリが正しく表示されるかを事前に確認できます。
この記事では、Safariブラウザでレスポンシブデザインモードを有効にする方法を詳しく解説します。
対象環境： この記事の情報は、macOS CatalinaからOS X El Capitanまでの環境で動作するSafari 13〜Safari 9に適用されます。なお、Appleがサポートを終了したWindows版Safariでは、レスポンシブデザインモードを利用できません。
Safariでレスポンシブデザインモードを有効にする手順
レスポンシブデザインモードおよびその他のSafari開発者ツールを有効にするには、以下の手順に従ってください。
Safariのメニューから「環境設定」を選択します。
ヒント： キーボードショートカットのCommand＋,（カンマ）を押すと、環境設定をすばやく開けます。環境設定のダイアログボックスで「詳細」タブを選択します。
ダイアログの一番下にある「メニューバーに“開発”メニューを表示」のチェックボックスにチェックを入れます。
これで、Safariのメニューバー上部に「開発」メニューが表示されます。
メニューバーから「開発」＞「レスポンシブデザインモードに入る」を選択します。
ヒント： キーボードショートカットのOption＋Command＋Rを押しても、レスポンシブデザインモードにすばやく切り替えられます。表示中のWebページがレスポンシブデザインモードで表示されます。ページ上部でiOSデバイスや画面解像度を選択すると、その環境でのページの表示結果を確認できます。
また、解像度アイコンの上にあるドロップダウンメニューを使えば、さまざまなプラットフォームでの表示イメージを切り替えて確認することも可能です。
Safariの開発者ツールでできること
レスポンシブデザインモード以外にも、Safariの「開発」メニューには開発作業に役立つ便利な機能が多数用意されています。
このページを開く（Open Page With）
Macにインストールされている任意のブラウザで、現在表示中のWebページを開きます。
ユーザーエージェント（User Agent）
ユーザーエージェントを変更すると、別のブラウザを使用しているかのようにWebサイトに認識させることができます。
Webインスペクタを表示（Show Web Inspector）
CSS情報やDOMメトリクスなど、Webページを構成するすべてのリソースを表示します。
エラーコンソールを表示（Show Error Console）
JavaScript、HTML、XMLに関するエラーや警告を一覧表示します。
ページソースを表示（Show Page Source）
現在のWebページのソースコードを表示し、ページ内の内容を検索できます。
ページリソースを表示（Show Page Resources）
現在のページが読み込んでいるドキュメント、スクリプト、CSSなどのリソースを確認できます。
スニペットエディタを表示（Show Snippet Editor）
コードの断片（スニペット）を編集して実行できます。テスト目的で特に便利な機能です。
拡張機能ビルダーを表示（Show Extension Builder）
コードを適切にパッケージ化し、メタデータを付与することで、Safari拡張機能の作成を支援します。
タイムライン記録を開始（Start Timeline Recording）
ネットワークリクエスト、JavaScriptの実行、ページのレンダリングなどのイベントを、WebKitインスペクタ内で記録・分析できます。
キャッシュを空にする（Empty Caches）
通常のWebサイトのキャッシュファイルだけでなく、Safari内部に保存されたすべてのキャッシュを削除します。
キャッシュを無効にする（Disable Caches）
キャッシュを無効にすると、アクセスのたびにローカルキャッシュを使わず、Webサイトから直接リソースをダウンロードするようになります。最新の状態を常に確認したい場合に役立ちます。
スマート検索フィールドからのJavaScriptを許可（Allow JavaScript from Smart Search Field）
セキュリティ上の理由によりデフォルトでは無効になっていますが、有効にすると、SafariのアドレスバーにJavaScriptを含むURLを直接入力できるようになります。
-
Safariでプライベートブラウジングを使う理由と設定方法を徹底解説
macOSの標準ブラウザであるSafariは、近年のWebブラウザと同様に高度に進化しており、高いセキュリティ性を備え、複数のタブも快適に同時処理できます。さらに、Safariには「プライベートブラウジング」モードが搭載されており、閲覧履歴を残さずにこっそりとWebを利用することが可能です。 MacのSafariでプライベートブラウジングを活用する理由は数多くあります。この記事では、プライベートブラウジングとは何か、Macでどのように使えば安全で機密性の高いブラウジング体験を実現できるのかを詳しく解説します。 サイバー犯罪が増加している現代において、プライベートブラウジングは個人情報を守り、悪
-
Windows 11の「神モード（God Mode）」とは？ 有効化して使いこなす方法を徹底解説
Windows 11の登場に伴い、Microsoftは標準アプリの多くを刷新しました。中でも「設定」アプリは最大の変更点の一つで、Windows 10版をもとにより洗練された設計になっており、ユーザーがデバイス上で変更したいあらゆるオプションを提供することを目指しています。 しかしWindows 11には依然として独立した「コントロールパネル」が存在し、メインの設定メニューでは見つけられない数多くの項目が収録されています。迷路のように入り組んだメニューを掘り下げて目的の項目を探すよりも、ワンクリックですべての設定へアクセスできたほうがずっと便利ですよね。そこで活躍するのが「God Mode（