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

え?難しいのはイヤです(笑)



名前だけ見たらとっつきにくいですけど、大丈夫!
カスタマイズにはめっちゃ便利なんで、動画も作ったのでとりあえず1分32秒だけ見てみて!
こんな方に読んで欲しい


- 更新前にブラウザ上でカスタマイズしたいコードを仮に書いて見え方をチェックする
- パソコンでスマホ表示された場合のレイアウトをチェックする
- CSSやHTMLコードの中身を確認する
使い方動画
文章でも書けますが、今回は3つの使い方を動画にまとめました。
(冒頭のアイキャッチ動画と同じです)
↓↓↓
更新前にカスタマイズした場合の見え方をチェックできる
軽く色を変更した時の印象をチェックしたい、フォントサイズを確認したいって時に、通常のカスタマイズだと
- 追加CSSに書いて更新→チェック
- それでも決まらない場合は、再度更新→チェックの繰り返し
と、実際に更新しながらチェックしていくのは面倒だったりします。
そこで、このブラウザ上で変更後のイメージを確認してから、そのコードを追加CSSに書けば一回の更新で作業が完了します。
スマホ表示の確認
かなり前からGoogleの検索結果の順位も、スマホの見え方が重要とされているので、スマホ表示の確認は欠かせません。
とは言っても、毎回実際のスマホで更新してチェックするのも大変ですよね。
そんな時に、この機能を使うとパソコンで操作しながら簡単に確認が出来てしまいます^^
CSSやHTMLのコードが何か確認する
ピンポイントで、変更したい箇所のCSSのクラス名を確認できます。
カスタマイズする時にうまく反映できない時は、きちんとCSSが指定できていないことが多いので、この開発ツールのカーソルを合わせて確認しておくことで、カスタマイズが楽になります。
まとめ


開発ツールは他にも多くの機能が備わっていますが、最低限使えるようになりたい機能は上の3つです。
使いこなして、ブログ作成の時短ができるようになるといいですね^^
他の機能も時間があれば記事にしていきたいと思います。
コメント