大学ノートには横線が引かれている。これを使って文字を書けば、斜めになったり一部だけ文字の大きさが変わって読みづらくなったりしない。整然と並んで書かれていれば後で読み返す時にもきっと分かりやすいはずだ。ある一定の基準に沿っていると安心感があり、情報を受け入れやすくなるのだ。

グリッド

コンテンツを重視したWebサイトではそのような読みやすさの観点も考える必要がある。そのためのフレームワークがBaselineだ。

今回紹介するオープンソース・ソフトウェアはBaseline、グリッドに沿ったCSSフレームワークだ。

Baselineはまるで大学ノート、と思わせるような横線が引かれた背景画像にぴったりと合わせて文字が書かれている。カラムも1〜4カラムで調整でき、幅も3カラム分使ったり、2カラムずつで等分することもできる。統一された、均質的なデザインが組めるのが特徴だ。

フォーム

テキストの表示の他に、フォームも考慮されておりサンプルが用意されている。テーブルやクォートの表示も問題ない。対応ブラウザはSafari3以上、Google Chrome、Firefox3以上、Opera9以上となっている。IEは8以上になる。なおHTML5をサポートしていないブラウザではデザインが異なる場合があるとのこと。

全体的なバランスが考慮されたデザインは、長文を読むのに適しているだろう。ブログやメディアサイトなど使える場面は多いのではないだろうか。

Baseline - a designer framework by ProjetUrbain.com

　http://baselinecss.com/