手っ取り早くWebページを作る時に、素人っぽく見えないデザインで、なおかつ学習コストの低い軽量なCSSフレームワーク「Milligram」のご紹介！
名前の通り…最小限の構成で作られており、わずか数キロバイトという容量ながら、レスポンシブ対応はもちろんのこと、テーブル、ボタン、フォームなどの見た目も非常にクールなデザインが提供されています。
新しく覚えることも非常に少ないので、プロトタイプ作りにも最適です！
使い方！
まずは、公式サイトからファイルをダウンロードしてみましょう。
圧縮版の「milligram.min.css」がわずか6.9KBという超軽量であることが確認できるでしょう。
ちなみに、gzip圧縮すると「2KB」ほどになるようです…。
ダウンロードが面倒な方は、こちらのCDN経由からでも利用できます！
https://cdnjs.cloudflare.com/ajax/libs/milligram/1.0.3/milligram.min.css
あとは、普通にHTMLから読みこめば準備完了です！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>milligramサンプル</title>
<link href="css/milligram.min.css" rel="stylesheet">
</head>
<body>
</body>
</html>
実際に使ってみたのがコチラ！（スマホの場合はコチラから！）
See the Pen http://codepen.io/webhacck/pen/oboqER/'>milligramサンプル by webhacck (http://codepen.io/webhacck'>@webhacck) on http://codepen.io'>CodePen.
上記サンプルのように、テキスト周りや「引用」「コード」「テーブル」「フォーム」などは、そのまま普通の「HTMLタグ」を書けばいい感じに反映してくれます。
特別なルールを新しく覚える必要はありません。
また、「ボタン系」に関しては、bootstrapのようにクラスを書いてあげると、いくつかのパターンを表示することも可能です。
<button class="button">デフォルト</button> <button class="button button-outline">アウトライン</button> <button class="button button-clear">クリア</button>
これらは、「aタグ」「inputタグ」なども同じように利用できるので便利です。
さらに、レスポンシブ対応に関しては直感的なコーディングができるようになっています。(スマホはコチラから)
See the Pen http://codepen.io/webhacck/pen/WrXWdy/'>Milligramサンプル２ by webhacck (http://codepen.io/webhacck'>@webhacck) on http://codepen.io'>CodePen.
まず、親要素のクラスに「container」を加えてセンターに合わせ、子要素のクラスに「row」を設定したら、あとは必要な要素をそのまま追加するだけでOKというシンプルさ！
<div class="container">
<!-- 5個の要素を追加 -->
<div class="row">
<div class="column">１カラム</div>
<div class="column">２カラム</div>
<div class="column">３カラム</div>
<div class="column">４カラム</div>
<div class="column">５カラム</div>
</div>
<!-- 2個の要素を追加 -->
<div class="row">
<div class="column">カラム</div>
<div class="column">カラム</div>
</div>
<!-- 1個の要素を追加 -->
<div class="row">
<div class="column">カラム</div>
</div>
</div>
適当に追加すれば、自動でレスポンシブなデザインにしてくれるので、まさにプロトタイプを素早く作るのに向いていると言えるでしょう。
ちなみに、「column」にオフセット値を設定して細かい調整をすることも可能です。
このように、ほとんど新しく覚えることがなく、今すぐ利用できる使い勝手の良い軽量CSSフレームワークとなっているので、興味が湧いた方はぜひトライしてみてください！
