1. HOME
  2. ブログ
  3. コーディングに便利な機能「検証ツール」のご紹介!

コーディングに便利な機能「検証ツール」のご紹介!

みなさま、こんにちは!

ネットショップの活性化を目指し、
ECサイト経営での黒字化を支援する

『いせ』です。

今回はデザイン業務の1つでもあるコーディングについて
教えて頂いた便利な機能

検証ツール(デベロッパツール)

についてご紹介いたします!

楽天市場やYahoo!ショッピングなどECで販売したいとき、
ECサイトの構築は必要不可欠でしょう。

既にECサイトを持っている方も、
イベントやサイトリニューアルにおいて
HTMLを書き換えることがあるかと思います。

そんな時にこの検証ツールを使うことで、
書き換えるコードのテストをしたり
HTMLが反映されない原因を調べるときになどで大いに役立ちます!


-目次-
1.色んな記述を見たりテストしたいときに便利!検証ツールとは?
2.検証ツールの使い方紹介!
・検証ツールの表示方法
・各機能紹介
3.Filter機能は作業の時短に便利!

1.色んな記述を見たりテストしたいときに便利!検証ツールとは?

検証ツール、またの名をデベロッパーツールとは

Google Chromeに
標準搭載されているデバッグツールで
WebサイトのHTML構成や表示スピード、
通信状況などを確認することができます。

特別なツールやプログラムを使わず
ブラウザのみで利用でき
Webサービスの開発やテスト、
デザインのチェックを行うときに大変便利なツールです。

2.検証ツールの使い方紹介!

検証ツールの表示方法

では早速、検証ツールの表示方法をご紹介します!

① まずコードを見たいサイトのページを開きます。
② そしてキーボードの「Fn+F12」を押す
  もしくは「右クリックの検証」を押します。

そうすることで、下記画像のような右側に記述されているコードが表示されます。

たったこれだけ!
何かしらのアプリやソフトを入れる必要が無いから
すぐに行動に移せるのはありがたいですね。

とはいっても、
検証ツールのどこに何が書いてあるのか、
パっと見では、分かりづらいかもしれません。

かくいう私も最初これを見たとき
何がどれやら分からず機能について色々調べた記憶があります。

では表示された検証ツールの各機能についてご紹介します!

機能紹介 カーソルアイコン

上から順番に紹介していきます。

まず、検証ツールの左上にあるこの2つのアイコンは

・カーソルアイコン
・パソコン表示スマホ表示

の機能があります。

カーソルアイコンでは、
特定の場所のHTMLの記述を見たい場合、アイコンをクリックして、
画面内の特定の場所にカーソルを合わせると
その部分のHTMLがツール上に表示してくれます。

このようにカーソルを画面内に置くと、
選択部分が青や緑色に表示され
自動的にHTMLが各当する場所を表示してくれます。

機能紹介 パソコン表示・スマホ表示

次に、カーソルアイコンの隣にあるアイコンでは
HTMLがパソコンで表示・スマホで表示されるとき
どのように映るか見ることができる機能です。

このように、パソコン・スマホ表示で
パーツが表示されているか、
ビジュアルが崩れていないかなど
確認することができます。

3.Filter機能は作業の時短に便利!

さて、
カーソルアイコンと
パソコン・スマホ表示機能のご紹介をしましたが、
もう1つ、知っていただきたい機能があります!

その名も

Filter機能

キーボードFn+Fの検索ツールのような機能を
検証ツール内で使うことができます!

ただこのFilter機能は
Fn+Fを押してない状態だとCSSの検索しかできず、
HTML内の検索をしたい場合はFn+Fを押す必要があります。

このようにしてHTML・CSSの特定のコードを見たいとき
わざわざコードも探し続ける必要が無く、
Filter機能に見たいコードを入れて検索すること
すぐに探すことが出来ます!

この機能はコードを探す時間が省けるため、
作業の時短に大いに役立ちます!


さて、
今回は検証ツールのご紹介をしましたがいかがでしたでしょうか?

HTML・CSSは何かしら書き込む際
テストありきの作業かと思いますので、
まだ利用したことが無い方は是非是非ご活用してくださいませ。

次回の投稿内容は
電子申請に必要な『gBizID』
についてご紹介予定です。

最後までお読みいただきありがとうございました。

関連記事

おすすめの虎の巻

最近の虎の巻

カレンダー

2021年7月
« 6月   8月 »
 1234
567891011
12131415161718
19202122232425
262728293031