どうも!NISO desu!皆さんのおかけで、今日ものんびり、プログラミング記事を書いてます。そして今日はいよいよCSS編に突入しますね。皆さんウェブサイトのデザインを修正するとき、いつもF5を押してて、大変だと思わないですか?そんなあなたに、このDEVELOPER TOOLSを紹介します!特にインストールは必要ないので、早速使い方説明しますね。
必要なもの:
世界を受け入れる愛が溢れる心、綺麗な目つき、コーヒー(人によって紅茶になるかもしれません)、パソコン、Google Chrome
従来の流れ
VS Codeで修正→サイト開いて、F5して確認→VS Codeに戻って修正してループする
Developer toolsがあれば
VS Code → サイト開いて F5→(Developer Tools で修正する(ここでループ))

一見そんなに変わらないけど、何か強いかというと、developer toolsで修正した変数はすぐに反映しますので、何度も、VS CODEに戻って、F5を押す必要がなくなります。
そして、何より、変なズレも確認できます。“えっ なんでそうなっちゃうの?”と思ったら、こちらの機能でmarginとpadding簡単に確認できるので、非常にわかりやすいです。


緑がpaddingで オレンジがmarginです
あとスマホ版とタブレット版を作るときに、画面の横縦がパソコンと違うため、パソコンでなかなかうまく調整できないが、こちらの機能を使えば、サイズに設定して、スマホ版、タブレット版のプレビューが可能になります。


それ以外に、特定なコマントを入れて、プログラミングの部分のバグも確認できますので、非常に役に立ちます。(色んなやり方がありますので、ここはちょっと割愛させます。)
こちらでのdeveloper toolsがあれば、ウェブサイトを作成するのは結構楽になりますので、愛が溢れる心と綺麗な目付つとdeveloper toolsでウェブサイト作りましょう!それでは!w