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

海外に見る最近のWebサイト(特にトップページ)のデザインは、縦に何段かに分かれたデザインが多い。一番上は大きな画像とともに二段構成、その下が2×2のテーブル組みなどでサービスの特徴を書き、次に横並びの3段で利用者の声といった具合だ。


Picture 72.png

今時のWebサイトっぽいデザインが簡単に

 

まぁテーブルで組めばできないことはない。だがそれはださい、ださすぎる。CSSだけでどうにかしたい所だが、ブラウザの互換性も含めて考えるとプログラマにはとても無理だ。Firefoxで見られるように何とか組んで、IEで見たら吹き飛んでいた…なんてなったらもうやる気がなくなる。そんなことになる前に使いたいのがMaloだ。

MaloはGoogle Code上で公開されているCSSフレームワークで、GPLの下に公開されている。

Maloが実現するのは複雑な、それでいて簡単に設定できるCSSデザインだ。ヘッダとフッターを設けた上で、中のコンテンツに複雑な段組みを実現できる。特に便利だと思うのが、全体幅ならdp100、50%ならdp50、33%(1/3)ならdp33と分かりやすいクラス名になっていることだ。


Picture 70.png

ねこー!(そこじゃない)

 

さらにコンテンツの高さがばらばらでも下は一番長いものにあわせてくれるのも魅力だ(これがうまくいかなくて苦労することがいかに多いことか)。チュートリアルにはサイドメニューに対応したものや、入れ子になっているものなど多数用意されている。

しかも対応ブラウザが多いのが魅力だ。IE5.01以上、Firefox 1.5以上、Opera 8.53以上、Safari 2.0以上、Google Chrome 0.3以上などとなっている。他にもモダンなブラウザであれば大抵対応しているようだ。これならばWebサービスで安心して利用できそうだ。

決して複雑な操作が必要な訳でもなく、導入は容易だ。クールなトップページを実現するためにも使ってみたいソフトウェアだ。


Picture 71.png

縦に分断して複数カラムを組み合わせられる

 

malo - Google Code

 http://code.google.com/p/malo/

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch