Bootstrapのグリッドシステム

グリッドシステムとは、サイトの割る付けの構成を横12ブロック単位で分割できるように考えられたもので、クラスを col-xs-3 のように指定すると分割できます。

例えば、

<div class="container">
  <div class="row">
    <div class="col-xs-3"></div>;
    <div class="col-xs-9 col-xs-offset-3"><div>
  </div>
</div>

<div class="col-xs-3"></div>;

</div>

と、書くと、

col-xs-3で左から3ブロック分と、次のDIVで9ブロック分とるけど、offsetで、スタート位置を左から3ブロックずらしてから9ブロック使いますとなります。

containerで割り付ける領域を指定。rowで行を指定(横に並んだり、ブレークして縦に引っ付いたりする単位)。
containerは固定幅指定で、container-fruidは流動的に変化する。

xsの部分は、作っているWEBサイトがどのような画面サイズの端末からアクセスされることを期待するのかによって以下のように選択します。

	モバイル（768p未満）	タブレット（768px以上、992px未満）	デスクトップ（992px以上、1200px未満）	デスクトップ大画面（1200px以上）
class名接頭辞	.col-xs-	.col-sm-	.col-md-	.col-lg-
横幅ブレークポイント	なし（auto）	750px	970px	1170px

ここに、色々なパターンが紹介されているので、サイト構成をアレンジしてみてね。

http://bootstrap3-guide.com/base/grid.html
http://getbootstrap.com/examples/grid/

ネットワーク図を自動で綺麗に書きたい

ネットワーク図をVisioやExcelで書くのは大変。
文書の管理も大変。運用管理ツールなどですでに接続状態はもってるのになぁ・・・といった時に朗報です。

vis.jsという素晴らしいツールがあります！

vis.jsを使えば、JSONデータでホスト(node)と、その接続(edge)を渡すだけで綺麗に自動でホストを配置してネットワークを書いてくれるのです。

以下サンプルです。オプションでかなり色々なカスタマイズが可能です。とりあえずぷよぷよするのをなくしたければ、optionsのphysicsのenabledをfalseにすると動かした位置に止まるようになります。nodeにx,yの座標を入れれば固定位置に置くこともできるので、CoreL3などは固定してしまってもよいかもしれませんね。