ブロガーも使える便利な開発ツール！更新前のカスタマイズ・スマホ表示・コードの確認も出来ちゃいます。

今回の記事は開発ツールについて解説します。

こんな方に読んで欲しい

使い方動画

文章でも書けますが、今回は３つの使い方を動画にまとめました。

（冒頭のアイキャッチ動画と同じです）

↓↓↓

更新前にカスタマイズした場合の見え方をチェックできる

軽く色を変更した時の印象をチェックしたい、フォントサイズを確認したいって時に、通常のカスタマイズだと

と、実際に更新しながらチェックしていくのは面倒だったりします。

そこで、このブラウザ上で変更後のイメージを確認してから、そのコードを追加CSSに書けば一回の更新で作業が完了します。

スマホ表示の確認

かなり前からGoogleの検索結果の順位も、スマホの見え方が重要とされているので、スマホ表示の確認は欠かせません。

とは言っても、毎回実際のスマホで更新してチェックするのも大変ですよね。

そんな時に、この機能を使うとパソコンで操作しながら簡単に確認が出来てしまいます^^

CSSやHTMLのコードが何か確認する

ピンポイントで、変更したい箇所のCSSのクラス名を確認できます。

カスタマイズする時にうまく反映できない時は、きちんとCSSが指定できていないことが多いので、この開発ツールのカーソルを合わせて確認しておくことで、カスタマイズが楽になります。

まとめ

開発ツールは他にも多くの機能が備わっていますが、最低限使えるようになりたい機能は上の３つです。

使いこなして、ブログ作成の時短ができるようになるといいですね^^

他の機能も時間があれば記事にしていきたいと思います。