開発ツールを使う方法ー要素の検証

サイト制作を行う上で、開発ツールを使えるようにしておくと便利です。

こちらではsafari、Chromeでの開発ツールの使い方と、要素の検証でできることを説明いたします。

開発ツールの使い方

safari の場合

safariを立ち上げた状態で、左上のタブから「safari」→「環境設定」を開きます。

safari画面

右端にある詳細タブ(歯車のアイコン)の一番下にある「メニューバーに開発メニューを表示」にチェックを入れます。

safari環境設定画面

右クリック(副クリック)から要素の検証を選択すると、検証ツールが表示されます。

Google Chrome の場合

右上の赤いマークをクリックします。

Chrome画面

「その他のツール」→「デベロッパーツール」をクリックします。

Chrome設定画面

右側に検証ツールが表示されます。

要素の検証でできること

表示されているWEBページの要素を表示させることができるので、調べたい部分がどのようなコードで書かれているのかがわかります。

選択モードにして、調べたい部分をクリックすると、その部分のHTMLコードと、そこに含まれているCSSがどうなっているのか、が表示されます。

safari の選択モード

safari要素の検証選択モード

Google Chrome の選択モード

Chrome要素の検証選択モード

どんなフォントを使っているのか?何色を使っているのか?などを調べることができます。

また、表示されているCSSを書き換えて、どのように変化するのかを確認することもできます。

※自分だけでテストできる、というものなので、実際のサイトは書き変わりません。


🚩お知らせ

toieeLabでは、知識・経験ゼロから、「単なる製作代行ではなく」、WordPressの仕組み、デザイン、コピー、SEO対策、ビジネスモデル、ビジネスシステム構築技術を身につけ、仕事を受注できるようになるためのオンラインコースを準備しています。

ただのオンラインコースではなく、オンラインコースサポートサイト学習コミュニティ(非公開)、個別サポート、オンラインワークショップを通して、一人ひとりの学習をサポートするサポート型のオンラインコースです。

現在、オンラインコースの一部を無料公開しています。ご興味のある方は、ぜひ、ご覧ください。

コメントする