BootstrapのUserAgentを可視化する工夫

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

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

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

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

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

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

02-Orange website sample movie

前回お試しで作ってみたサイトをHTML化してみました。

シンプルなサイトですが、JavaScriptを使用して多少の動きを付けております。

動きの確認だけですのでサイト自体の公開はしてません。

 

動画ビットレートとか結構上げたつもりでもイマイチな画質。FMEで録画するのは難しい。

 

こういったサンプルを増やして、仕事にいずれ繋がればいいですな。

01-Orange website sample

OrangeSite1
OrangeSite1

先日描いた画像をホームページにしてみました。

OrangeSite2
OrangeSite2

左Aboutボタンクリック後、右カラムに画面表示。

右下のcloseボタンクリックで右画面が非表示になります。

非FLASHサイトで、JavaScriptを使用したものです。

今後もこういったサンプルを掲載する予定です。