Safariのウェブ開発ツールを活用する

Safariには、デベロッパツールがはじめから付いていますが初期状態では表示されません。Safari の「環境設定」から「詳細」を選択して開発メニューを有効にする事によって表示されます。設定で有効にすると「開発」メニューが表示されます。
主に使用するのは、「レスポンシブ・デザイン・モード」と「Webインスペクタ」ですが、それぞれの特徴と簡単な使用方法を説明します。

レスポンシブ・デザイン・モード

レスポンシブ・デザイン・モード「開発」メニューの「レスポンシブ・デザイン・モードにする」を選択するとiPhone、iPad、ブラウザの様々なデバイスサイズを擬似表示できるようになります。iPhoneなどのデバイスアイコンをクリックすることで画面を回転させたりSplit Viewモードでの画面の確認も可能です。「開発」メニューの「ユーザエージェント」でデバイスに応じたユーザエージェントにも変更出来ますのでこの機能と合わせて「レスポンシブ・デザイン・モード」で見ることで素早く制作ページの確認が出来ます。

Webインスペクタ

WebインスペクタWebインスペクタは、Safariで表示しているページのリソースを解りやすく表示してくれます。左カラムにページに使用されているファイル構成をツリー形式で表示しています。それぞれのファイルをクリックすることでリソースや画像を確認できます。中央に表示されたリソースは、ダブルクリックすることで簡単に編集可能です。リソースの要素を選択すると右カラムにその要素のノードやスタイル、レイヤーを確認できます。スタイルは、ダブルクリックすることで編集出来ますので、ページを見ながらスタイルを一時的に変更して確認することが可能です。
素早く編集するには、ポイントを活用します。ポイントをクリックして調べたい要素の上にマウスのカーソルを持って行きクリックします。クリックした要素のリソースがハイライトされますのでスタイルなどを変更して確認します。
ポインタ