TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

WEB DESIGN

WEBデザイナーなら絶対覚えておきたいデベロッパーツールの使い方




みなさんデベロッパーツールって使用していますか?

HTMLの構造やCSSなどの検証が簡単にできちゃう、
WEB制作をする際の必須ツールです!

複数のブラウザにデフォルトで付いている機能なので、
誰でもすぐに使用することができます。

WEBデザインをする方や、エンジニアの方も使用すること多いですよね?

そこで今回は新米デザイナーの方向けに、
これだけは覚えておきたい、便利な使用方法をご紹介できればと思います。

デベロッパーツールの基本構造

まず最初にデベロッパーツールを開きます。

今回はChromeでの使用方法となります。

方法1:「メニューバー」 → 「表示」 → 「開発/管理」 → 「デベロッパーツール」
方法2:副ボタンクリック → 検証

基本的な構造は下画像の通りです。

左の「Elements」の部分がHTML。
右の「Styles」の部分がCSSです。

HTMLのCSSの見方

まずデベロッパーツールの左上部にある矢印ボタンをクリックします。

次にソースを確認したい部分をクリックします。

そると、該当箇所のHTMLとCSSが確認できます。
簡単ですよね?




デベロッパーツールでできること

CSSを非表示にできる

適用されているCSSのチェックボックスを外すと、そのスタイルを非表示にできます。

CSSを追加できる

新たにCSSを追加し、色や背景色、シャドウなどを検証すること可能です。

CSSを編集できる

元々あるCSSを、自由に編集ができ検証することが可能です。

その他のCSSを追加できる

色や背景色、シャドウ以外にも、新しく自由にCSSを追加でき、検証を行うことができます。

別の環境で閲覧可能

PCの他にも、タブレットやスマートフォンなどの別の環境で見ることができます。

あくまで擬似的なので、実機で見ることをおすすめします!

まとめ

いかがだったでしょうか?

デザインする際はもちろん、
コーディング後のソースの確認などにも使用できるデベロッパーツール。

今回ご紹介した、基本的なことだけ覚えていれば、
普段作業する際には困らないと思います。

ただ他にも機能はたくさんあるので、
自分自身で色々いじってみて、デベロッパーツールをうまく使いこなしてみてください!

また、あくまでも検証ツールなので、
ブラウザをリロードすると元の状態のソースに戻ります。

ソースに反映する場合は、しっかりとコピーし、
本来のHTMLデータに反映するようにしてくださいね!

最後までご覧になって頂きありがとうございます!
少しでも参考になれば幸いです。