ゆうき（ @BASEBALLY15 )です^^
ブログのデザインを変更したいのですが，便利なツールはないでしょうか？
それなら，『開発者ツール（Developer Tools）』を使ってみてはいかがですか？
『開発者ツール（Developer Tools）』を使うと，HTMLやCSSの構成を視覚的に確認することが出来ますよ^^
（Windowsを使用）
目次
開発者ツール（Developer Tools）って何？
開発者ツール（Developer Tools）とは，簡単に言うと「サイトの構成を確認するためのツール」です．
サイトは主にHTMLとCSSで作られています．（※JavaScriptなど，他の言語も組み合わせて作られているサイトもあります．）
HTMLはサイトの『骨格』のようなもので，それにCSSで『肉付け』をしていくという感じです．
これらの言語を使って，どのようにサイトを作っているのかを確認するために『開発者ツール（Developer Tools）』を使います．
今回は，『開発者ツール（Developer Tools）』の使い方と便利な点についてご紹介します⤵
1. 開発者ツール（Developer Tools）を開こう！
まずは，開発者ツール（Developer Tools）の開き方をご説明します．
Edgeの場合・・・
右クリックで『開発者ツールで調査する』を選択するか，『F12キー』を押すと開くことが出来ます．
Google Chromeの場合・・・
右クリックで『検証』を選択するか，『F12キー』を押すと開くことが出来ます．
2. 開発者ツール（Developer Tools）の配置を決めよう！
開発者ツール（Developer Tools）を開き，赤枠で囲ったところをクリックします．
すると，『Dock side』という項目が表示されるので，4つの中から好きなものを選択します．
左から順に説明すると，以下の通りです⤵
・左側に表示
・下に表示
・右側に表示
確認しながら，都度変更するといいと思います^^
3. 開発者ツール（Developer Tools）の使い方を理解しよう！（最小限）
開発者ツール（Developer Tools）には，大きく2つの表示に分類することが出来ます．
左側が『HTML』で右側が『CSS』です．
調べたい箇所のHTMLをクリックすると，それに対応したCSSのコードを確認することが出来ます．
また，下の画像で示した，左の赤枠をクリックすると，サイト自体をクリックすることで，その箇所のHTMLとCSSを確認することが出来ます．
各要素の横幅や高さなどを調べたい場合は，開発者ツール（Developer Tools）のCSS側を一番下までスクロールすると，以下の画面が表示されます．
この画面で，「横幅」・「高さ」・「マージン」・「パディング」などを確認することが出来ます．
4. 開発者ツール（Developer Tools）でレスポンシブ対応の確認をしよう！
開発者ツール（Developer Tools）を使うと，レスポンシブ対応の状況を確認することも出来ます．
下の画像の手順で行うことが出来ます．
また，『②クリック』の行の一番右側にあるマーク（傾いたマーク）をクリックすると，デバイスを傾けた状態でレスポンシブ対応を確認することが出来ます！
この機能を使うことで，iPhoneやandroidでどのように表示されているのかを視覚的に確認することが出来ます．
そして便利な機能はこれだけではなくて，下の画像にある通り，表示されている画面をスクリーンショットすることが出来ます．
終わりに
今回は，開発者ツール（Developer Tools）の使い方と便利な機能についてご紹介しました．
Webサイトの勉強をしている方やブログをカスタマイズしたい方は，今回紹介した方法を使うことで効率的に作業を進めることが出来ると思います．
ぜひ一度，開発者ツール（Developer Tools）を使ってみて下さい^^
それでは・・・