【ウェブ制作初心者】デベロッパーツールでシュミレーションしてからコードを書く【便利】

ウェブサイトを作る時、初めはエディターにコード書いて、ブラウザをF5押して確認してというのを繰り返しながら作っていました。
当時もchromeのデベロッパーツールは使っていたけれど、上手くいかない時の確認用でした。

でも、更に便利な使い方を知ったんですよ。
flexboxとかmarginを設定するが楽になりました。
デベロッパーツールのスタイルに表示されるCSSって書き換えられるんですよ。
そこで、marginとかを書き換えると更新しなくても即座にブラウザに反映されます。良い感じにブラウザに表示されたら、それをコピーしてエディターに貼り付けるんです。

正解かどうか確認してCSSを記述するんじゃなくて、正解を貼り付けるだけで良くなるわけですね。
これは多分、作業効率がかなり上がる気がします。

flexboxも、今まではどういう風にブラウザに反映されるか考えながら記述しなきゃいけないし、想定通りいかなかったらCSSを書き直して試すを繰り返していたんですが。
下記のように、ブラウザ上でどのように反映されるのかシミュレーションできるんですよ。
こんなことができるなんて…flexboxがより身近になった気がします。