BootstrapのUserAgentを可視化する工夫

Bootstrap3になってからclass指定で2カラムを1カラムへ、とか結構簡単になりましたよね。
ただ、自分だけかもしれないのですが、今何の幅扱いなの?って思うことが結構あるのです。

種類は4種類
xs : スマートフォンサイズ
sm : スマートフォン~タブレット
md : タブレット~PC
lg : PCサイズ
ぐらいの感覚なのですが、ずばりその境界がリアルタイムにわからないとCSS指定がなかなか進みません。

そこで自作、というか思い付きの非プログラムっぽい感じのパーツを作りました。

あるといい環境は、Bootstrap3が動く環境です。
導入はドットインストールさんで学ぶととてもわかりやすいです。

納品前のデバッグ的な感じのパーツにしてみました。
DEMOサイト
ソースはDEMOサイトに記載してあります。
styleのコメント外せば非表示になります。結構シンプルな作りにしてます。

機会あれば、コーディングで是非活用してみてください。

この記事を書いた人