MarkercssはCSS製のオープンソース・ソフトウェア。開発者はWebデザインが苦手だ。絵が描けない、デザインのイロハが分からないなどと色々な問題はあるだろうが、その一つにCSSの使い方がよく分からないというのがある。特にブラウザ間の誤差をうまく吸収できないのだ。
こんな感じのデザインも容易に
Firefoxで見栄えよく仕上がったと思ったらIEで見たら破綻していた…そんなことを繰り返しているとデザインがいやになってくる。そこで使ってみたいのがMarkercssだ。Markercssは設定を一つ一つ行っていくのではなくシンボル化することで手早くデザインできるようにする。
例えばフォントをArialの12ポイントにしたい時にはクラスに“A s12”と書く。レイアウトを幅900pxにしたい時にはw900と書く。同様に高さはh500といった具合に定義する。Markercssの規定する方式に沿っていけば崩れないデザインで決まっていくはずだ。
色一覧
文字の装飾や配置、マージンやパディング、フォーム、背景色、リンクメニューなど様々な設定が予め用意されている。細かくこだわる時には別途CSSを定義すれば良いだろうし、そもそも手早くデザインを行うという目的であればMarkercssの敷いたレールに乗ってしまう方が良い。
通常のCSSとは異なる書き方を覚える必要があるのはちょっと…と思うかも知れない。だがCSSハックを習得するのも時間を要するはずだ。であればMarkercssを使った方が素早くデザインができそうだ。
執筆時のバージョン
1.0
Markercss: maquetación web con css
http://www.markercss.com/en/index.php
関連記事:
- SafariのWebクリップ風にWebページを切り取る「Fireclip」
- IEにもFirebug並のデバッガを「DebugBar」
- 複数バージョンのFirefoxを一括インストール「Mozilla Firefox Collection」
- Firefox3でも使えるRESTful開発向けアドオン「Poster」
- Web上でコーディング「EditArea」
