Safari開発者ツールの表示方法！デベロッパーツールでの検証方法も解説！

Macユーザーには馴染みの深いSafariブラウザですが、Safariの開発者ツール「デベロッパーツール(インスペクタ)」をご存知でしょうか？Safariの一般ユーザーにはあまり馴染みのないツールですが、使い方を覚えておくと非常に便利なツールです。

Safariの開発者ツール「デベロッパーツール(インスペクタ)」とは、Google Chromeのデベロッパーツールと同じ機能を持つツールです。Safariの開発者ツール「デベロッパーツール(インスペクタ)」を利用することで、表示しているWebサイトの【HTML】の検証や【CSS】の検証が可能です。

特にホームページ作成の際に必要なhtmlコードを調べることができるのが大きなメリットです。自分の作りたいホームページのイメージに近いWebサイトから、htmlの構成を参考にすると良いでしょう。

PhoneやiPadなどのSafariブラウザアプリでも、Safariの開発者ツール「デベロッパーツール(インスペクタ)」を表示することができます。本記事では、Macパソコン、及びiPhoneで、Safariの開発者ツール「デベロッパーツール(インスペクタ)」を表示する方法をご紹介していきます。

本章ではSafariの開発者ツールの表示方法をご紹介していきます。

Macで開発者ツール(インスペクタ)を表示する方法は、下記の手順を実行してください。

iPhoneで開発者ツール(インスペクタ)を表示する場合は、事前にiPhone側でSafariアプリの設定が必要です。下記の手順を実行して、Safariの開発者ツール(インスペクタ)を表示する準備を進めて下さい。
 

iPhoneのSafariアプリを起動し、開発者ツール(インスペクタ)を表示したいWebページを開いて下さい。その状態でMacパソコンとiPhoneをLightningケーブルで接続し、【開発】>【iPhone】を選択して下さい。

Safariの開発者ツールの検証方法は、複数の検証方法があります。【要素】【ネットワーク】【デバッガ】などのタブをクリックして、検証したい要素をチェックしてみて下さい。

特に【要素】ではHTMLコードが確認することができます。ホームページ作成をする際に必要なコードなので、参考にしたいWebページを開き、どのようなhtmlコードが利用されているのかを検証してみるとよいでしょう。

本記事ではSafariの開発者ツール「デベロッパーツール(インスペクタ)」の表示方法をMacとiPhoneに分けてご紹介しました。あまり馴染みの無いSafariの開発者ツール「デベロッパーツール(インスペクタ)」ですが、ホームページ作成をする方にとっては非常に重要なものとなります。

自分で作りたいホームページのイメージを決め、Safariの開発者ツール「デベロッパーツール(インスペクタ)」を利用して、参考となるWebサイトからhtmlコード検証してみてください。複雑なhtmlコードですが、他のサイトを開発者ツールでみれば、自分のホームページもイメージ通りのものに仕上がります。