Safari開発者ツールの表示方法！デベロッパーツールでの検証方法も解説！
本記事ではSafari開発者ツールの表示方法や、デベロッパーツールでの検証方法を解説します。これからホームページを作成しようと考えている方は、Safari開発者ツールの使い方を覚えておくと非常に便利です。本記事を参考にSafari開発者ツールを利用してみよう。
目次
Safariの開発者ツール「デベロッパーツール(インスペクタ)」とは？
Macユーザーには馴染みの深いSafariブラウザですが、Safariの開発者ツール「デベロッパーツール(インスペクタ)」をご存知でしょうか？Safariの一般ユーザーにはあまり馴染みのないツールですが、使い方を覚えておくと非常に便利なツールです。
Safariの開発者ツール「デベロッパーツール(インスペクタ)」とは、Google Chromeのデベロッパーツールと同じ機能を持つツールです。Safariの開発者ツール「デベロッパーツール(インスペクタ)」を利用することで、表示しているWebサイトの【HTML】の検証や【CSS】の検証が可能です。
特にホームページ作成の際に必要なhtmlコードを調べることができるのが大きなメリットです。自分の作りたいホームページのイメージに近いWebサイトから、htmlの構成を参考にすると良いでしょう。
PhoneやiPadなどのSafariブラウザアプリでも、Safariの開発者ツール「デベロッパーツール(インスペクタ)」を表示することができます。本記事では、Macパソコン、及びiPhoneで、Safariの開発者ツール「デベロッパーツール(インスペクタ)」を表示する方法をご紹介していきます。
Safariの開発者ツールの表示方法
本章ではSafariの開発者ツールの表示方法をご紹介していきます。
Macで開発者ツール(インスペクタ)を表示する方法
Macで開発者ツール(インスペクタ)を表示する方法は、下記の手順を実行してください。
| 1.Safariブラウザを起動し、画面上部のメニュー一覧から【開発】を選択します。 |
| 2.【開発】メニュー一覧の中から【Web インスペクタを表示】をクリックして下さい。 |
iPhoneで開発者ツール(インスペクタ)を表示する方法
iPhoneで開発者ツール(インスペクタ)を表示する場合は、事前にiPhone側でSafariアプリの設定が必要です。下記の手順を実行して、Safariの開発者ツール(インスペクタ)を表示する準備を進めて下さい。
| 1.【設定】アプリを起動して【Safari】をタップしてください。 |
| 2.【Safari】の設定メニュー最下部にある【詳細】を選択します。 |
| 3.【Webインスペクタ】のスイッチをONにして下さい。 |
iPhoneのSafariアプリを起動し、開発者ツール(インスペクタ)を表示したいWebページを開いて下さい。その状態でMacパソコンとiPhoneをLightningケーブルで接続し、【開発】>【iPhone】を選択して下さい。
Safariの開発者ツールの検証方法
Safariの開発者ツールの検証方法は、複数の検証方法があります。【要素】【ネットワーク】【デバッガ】などのタブをクリックして、検証したい要素をチェックしてみて下さい。
特に【要素】ではHTMLコードが確認することができます。ホームページ作成をする際に必要なコードなので、参考にしたいWebページを開き、どのようなhtmlコードが利用されているのかを検証してみるとよいでしょう。
Safariの開発者ツールで検証をしてみてよう！
本記事ではSafariの開発者ツール「デベロッパーツール(インスペクタ)」の表示方法をMacとiPhoneに分けてご紹介しました。あまり馴染みの無いSafariの開発者ツール「デベロッパーツール(インスペクタ)」ですが、ホームページ作成をする方にとっては非常に重要なものとなります。
自分で作りたいホームページのイメージを決め、Safariの開発者ツール「デベロッパーツール(インスペクタ)」を利用して、参考となるWebサイトからhtmlコード検証してみてください。複雑なhtmlコードですが、他のサイトを開発者ツールでみれば、自分のホームページもイメージ通りのものに仕上がります。
Safariの記事が気になった方にはこちらもおすすめ！
Safariのブックマーク同期方法！iOSのiPhoneとMacでお気に入りを同期させるには？
Safariのプライベートブラウズとは？iPhoneで検索・閲覧履歴を残さない！