ChromeやEdge(最新版)をお使いの方にとても便利な機能がありますのでご紹介させていただきます。

たとえばワードプレスなどのCMSをお使いで、CSSを変更したらどのように変更されるか知りたい場合、一旦CSSを保存したあと、問題なく表示されるかを閲覧してみて、微調整を行うといった使い方をされているのであればお役に立てる情報です。HTMLについても同様ですね。

サイト上の画像以外のところで右クリックしていただき、Chromeなら「検証」、Edgeなら「開発者ツールで調査する」を選んでいただきます。

どちらもChrl+Shift+Iというショートカットキーで開くことも可能です。

右にツールバーが出てくるので、ここでHTMLやCSSを一時的に変更することが可能です。
ここで問題なく見えるようであれば、そのHTMLやCSSをアップすればいいので効率アップが可能です。

また、右上のスマホアイコンを押していただくと、PC上でスマホ表示を見ることができますので、どのように見えるのかを知ることができ便利です。

他にも様々な使い方や応用方法がありますので今後ご紹介させていただきますね。