Mac 版 Safari で要素を検査する方法

Mac 版 Safari で要素を検査する方法を理解すると、Web ページの HTML および CSS コードを詳しく調べて、実際に舞台裏でどのように機能しているかを確認したり、サイトの外観や機能に変更を加えたりすることができます (これらは一時的なものであり、ブラウザを閉じると変更は破棄されます)。 

自分で構築した Web サイトを使用している場合は、要素の検査を使用してページのフロントエンドの問題をデバッグできます。

Chrome および Firefox ユーザーは、ページ要素を右クリックして [要素の検査] を選択するだけで済みます。ただし、Safari では要素の検査機能がデフォルトで有効になっていないため、特に Apple のブラウザに慣れていない場合は、要素の検査機能をどこで見つけられるか頭を悩ませるかもしれません。Inspect Element を有効にするには、まず Safari の開発者メニューをオンにする必要があります。

方法がわからない場合でも、心配しないでください。このガイドでは、Safari で要素を検査する方法を正確に説明します。必要なのは読み続けることだけです。

Mac 版 Safari で要素を検査する方法

1. Safariの場合は、ツールバーの「Safari」をクリックします。
2. 「設定」をクリックし、「詳細設定」に進みます
3. メニューバーに「開発メニューを表示」にチェックを入れる
4. Web ページで要素を右クリックします
5. 「要素の検査」をクリックします

各ステップの図解付きの説明を読んでください。

1. Safariの設定を開きます

（画像：©Future）

ブラウザを開いた状態で、左上の「Safari」をクリックし、 「設定」をクリックします。

2. [詳細設定] で、[開発] メニューを有効にします。

（画像：©Future）

[詳細設定] タブをクリックし、メニュー バーに [開発メニューを表示] をオンにします。これで、 [設定] ウィンドウを閉じることができます。

3. 右クリックして「要素の検査」を選択します

（画像：©Future）

ページ要素を右クリックし、メニューから「要素の検査」を選択します。

4. ページコードを検査する

（画像：©Future）

HTML と CSS でページ コードを検査できるようになりました。楽しむ！

Mac を最大限に活用する方法をさらに知りたい場合は、このような役立つチュートリアルがたくさんあります。macOS ベータ アップデートを有効にする方法を確認して、今後の OS リリースで Mac に導入される新機能を確認してテストできるようにします。私

Mac の動作が少し遅い場合は、Mac のキャッシュをクリアする方法を学習してください。これにより、バックアップの速度が向上する可能性があります。スクリーンショットがデスクトップに放置され、きれいな背景が台無しになることにうんざりしている場合は、Mac でスクリーンショットの保存場所を変更する方法をご覧ください。散らかったデスクトップ？Mac でデスクトップ スタックを使用する方法を学びます。