Codepen が画面幅を表示してくれるのが Bootstrap の Grid 対応に便利だった話

そんなのできるツール色々あるよって話かもしれないんですけれど。

freeCodeCamp のプロジェクトで CodePen を使うんですけど、今回 Bootstrap の Grid を使うことにチャレンジしたので、ドラッグしてブラウザのウィンドウのサイズを変えると現在の画面幅を表示してくれるのが便利でした。

こんな感じ。

まだ Grid の仕組みがよくわかってない中で、画面幅を確認しながら表示がどう変わるか確認できるのがすごくわかりやすくて。同じ画面でコードもすぐ書き変えて試せるし。



ちなみに Grid についてはこちらのページがとてもわかりやすくて役に立ちました。

続・今更聞けない Bootstrap 4 のレイアウトシステム with Flexbox - Speee DEVELOPER BLOG

私がまさに、今更聞けないという感じだったので…（笑）

クラスに col-[画面サイズ] を指定することで、 『指定したサイズ以上の画面幅の時は、カラムとして扱う』 という動きになります。

とかが、本当にわかってなかったので（笑）助かりました！