MOONGIFT

オープンソース・フリーウェアを毎日紹介するブログ。日々の業務の効率化、新しいサービスのネタ探しにどうぞ。SNS、SBS、CMS、オフィス、画像編集、ユーティリティ、Firefoxアドオン、テキストエディタ、ゲーム…ジャンルは様々。

整ったレイアウトのWebサイトを手早く作るためのCSSフレームワーク「Markercss」

タグ: [] [] [] [] [] []

buzz_button

MarkercssはCSS製のオープンソース・ソフトウェア。開発者はWebデザインが苦手だ。絵が描けない、デザインのイロハが分からないなどと色々な問題はあるだろうが、その一つにCSSの使い方がよく分からないというのがある。特にブラウザ間の誤差をうまく吸収できないのだ。

ピクチャ 175.png
こんな感じのデザインも容易に

 

Firefoxで見栄えよく仕上がったと思ったらIEで見たら破綻していた…そんなことを繰り返しているとデザインがいやになってくる。そこで使ってみたいのがMarkercssだ。Markercssは設定を一つ一つ行っていくのではなくシンボル化することで手早くデザインできるようにする。

例えばフォントをArialの12ポイントにしたい時にはクラスに“A s12”と書く。レイアウトを幅900pxにしたい時にはw900と書く。同様に高さはh500といった具合に定義する。Markercssの規定する方式に沿っていけば崩れないデザインで決まっていくはずだ。

ピクチャ 174.png
色一覧

 

文字の装飾や配置、マージンやパディング、フォーム、背景色、リンクメニューなど様々な設定が予め用意されている。細かくこだわる時には別途CSSを定義すれば良いだろうし、そもそも手早くデザインを行うという目的であればMarkercssの敷いたレールに乗ってしまう方が良い。

通常のCSSとは異なる書き方を覚える必要があるのはちょっと…と思うかも知れない。だがCSSハックを習得するのも時間を要するはずだ。であればMarkercssを使った方が素早くデザインができそうだ。

執筆時のバージョン
 1.0

 

Markercss: maquetación web con css
 http://www.markercss.com/en/index.php

January 29th, 2010 Posted by admin | コメントはありません

No Comments »

No comments yet.

Leave a comment

MOONGIFTネットワーク。こちらもぜひご覧ください。
MOONGIFT
Open Service
Rails 2.0
Resident on Net
iPhone最適化
リーンソフトウェア
MarketPedia
Producing Web
Cool Coding