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

プログラマーやSEの方々はWebデザインが苦手だ。私自身、色々勉強はしつつもどうにも好きにはなれない。そのため、極力テンプレート的なものを使って作業するようにしている。デザインを後回しにすると、システムがある程度できた時にはじめることになり、折角乗っている気分を台無しにする恐れがある。


Picture 634.png

CSSで段組みを実現

 

最近の流行は960px幅のWebサイトらしい。その大きさに基づいて、印刷レベルでも耐えうるというのがTypogridphyだ。

TypogridphyはCSSテンプレートをオープンソースで公開している(ライセンスは明記されていなかったのでご注意いただきたい)。XHTMLに準拠し、ValidなCSSとなっている。

TypogridphyはPHPファイルと一緒に提供されているが、プログラミングコード部分がないのでHTMLと変わらないようだ。960pxと書かれているが、デモ用のHTMLファイルでは940ピクセルで描かれている。


Picture 635.png

サイドバーの幅を変えたパターン

 

サイドの幅を220/280/340/400/460と増やしたパターンがあり、メインコンテンツ内に引用の回り込みや画像の回り込みがテストされている。他にもリストや三段カラムのパターンもある。

最近のWebサイトの流行パターン(?)として、縦に3つくらいに分断されて、それぞれカラム数が異なるものが多くなっている。それを実現するのにTypogridphyが使えそうだ。

Typogridphyはテンプレートではないので、これをベースとして自分なりのCSSを作り上げていく必要があるだろう。各種ブラウザ間の互換性や、適度な装飾を自分で一から行うのは面倒であり、Typogridphyを使えばそうした手間は一気に軽減されそうだ。


Picture 637.png

三段カラムの例

 

Typogridphy — A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS Wizardry

 http://csswizardry.com/typogridphy/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2