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

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2