ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Blueprint CSSはCSSフレームワークの先駆け的なソフトウェアだが、これを使うとグリッドなデザインを簡単に実現できるようになる。多様なブラウザにも対応し、かつきっちりとしたデザインが組めるとあって、便利に使われている。


ピクチャ 20.png

グラフィカルにグリッド設計ができる

 

とは言え、最初は使いこなすのに苦労するかも知れない。これからBlueprint CSSを使ってみようと思う方はBoksを使ってデザインするのが良さそうだ。

今回紹介するフリーウェアはBoks、Blueprint CSSをグラフィカルに使いこなすソフトウェアだ。

BoksはAdobe AIRのアプリケーションで、Windows/Mac OSX/Linuxで動作する。グリッド設定を使って、ページの幅やカラムの数を指定できる。そしてクリックでDivタグを配置し、ドラッグで幅を調整してグリッドデザインを描くことができる。左右への移動は矢印キーで行う。


ピクチャ 12.png

設定

 

Divタグにさらにクラス指定を追加したり、HTMLコンテンツを追加することもできる。項目は入れ子に設置することもできるので、細かくデザインされた組版のようなWebサイトをデザインすることができるはずだ。

デザインが終わったらプレビューをして設計を確認する。そのプレビュー内容を別なブラウザで確認し、問題なければ実際のサイトに入れ込めば良い。CSSフレームワークにはデザイン上の色々なノウハウが詰まっている。それらを活かすためにもBoksはきっと役立ってくれるはずだ。


ピクチャ 21.png

プレビュー

 

via Boks - visual layout for Blueprint CSS [ RefreshingApps.com ]

Boks - A Visual Grid Editor

 http://toki-woki.net/p/Boks/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2