プログラミング記事:第五回
魔法探知機DEVELOPER TOOLS<で
ズレの原因を発見しましょう!

どうも!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