3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Milligramはタイポグラフィが綺麗なCSSフレームワーク

Posted at

私自身がHTML&CSS&JSをゴリゴリ書きたい人間なのでいまいち必要性を感じないという面もあるのですが、CSSフレームワーク、個人的にはあまり好きではないです。

お手軽にいい感じの見た目を実現してくれるし、デザインを統一できるのでチームで開発する際の恩恵は間違いなくあるとは思います。
が、毎回DOMに大量のクラス名を付与する必要があったり、デザインのためにDOM構造を汚染してしまうのがなんか美しくないと感じます。スタイルとDOMが密結合になってしまうのもイマイチに感じるポイントです。

あと当然ですがフレームワークを使えばそれに準じたデザインになってしまうので、そういう面で何か「垢抜けなさ」を感じてしまい、かといってスタイルを上書きするのもしんどい。うーん。

そういうわけであまりCSSフレームワークには必要性を感じていなかったのですが、最近Milligramというやつを試しまして、これは割と気に入ったので紹介記事を書きます。
Milligram公式はこちら

##Milligramの何が良いの?
###美しいタイポグラフィ
個人的に特に気に入っているのがタイポグラフィです。
これひとつでドキュメントの構造を美しく視覚化してくれます。余白の取り方もいい感じです。
私は手軽に整ったタイポグラフィが欲しい時は、とりあえずMilligramを放り込んでおくくらいに気に入っています。

###美しいデザイン
CSSフレームワークを導入するとどうしてもデザインが垢抜けない感じになりがちですが、その点Milligramのデザインはシンプルでセンスが良いと感じます。

ぜひ公式のDocsを見て欲しいのですが、"A minimalist CSS framework"という謳い文句のとおり、ミニマルでさらっとしたデザインです。グレー基調の背景色と文字色も目に優しくて良い感じです。

###シンプルで必要最小限のスタイル
上にも書きましたが、CSSフレームワークって「これで十分」感のある垢抜けないデザインがあまり好きではないです。もちろん汎用的なツールなのでそれ単体では凝ったデザインが不可能なのは当然なのですが、じゃあ独自のカスタムが簡単かというとそうでもない。

CSSフレームワークのカスタマイズは、密結合になったDOM構造とスタイルや、容易に汚染が起きるCSSの特性が負の相乗効果を起こし大変しんどく、打ち消しに打ち消しを重ねたスタイルは思わぬところで副作用を産み、時にはクラス名のバッティングなんかも発生します。入り組んだソースコードはちょっとした修正のコストを増大させ、かといってフレームワークのスタイルを全て把握するにもそれなりの時間がかかり、それなら1から自前でスタイルを書いた方が早いのでは、という疑問が頭をよぎることしきり。

そこへ来てこのMilligram、本当に最小限のスタイルだけ実装してあるためカスタムが簡単です。
プロパティの数が少ないので全体像が容易に把握できるし、ソースコードのどこに何が書いてあるかも、どこをどう弄れば何がどう変わるかも、すべてが一目瞭然です。

もちろんシンプルな分自分で書かなきゃいけないスタイルも増えるわけですが、重量級のCSSフレームワークを後からカスタマイズするくらいなら1から自前でスタイル書いた方が良い、というのが私の考えなのでこれくらいでちょうど良いと感じます。

###軽量
ファイルサイズ2kbということで本当に軽いです。
ちょっと見た目を整えるためにUIkitやBootstrapのような全部入りのフレームワークを読み込むのは無駄な気がしますよね。そういう時Milligramはフィットするはずです。

##おわり
このMilligram、一応Gridレイアウトにも対応していますが、どちらかというとブログのような文章主体のシンプルなサイトに向いたCSSフレームワークであるように思います(複数カラムでがっつり組みたい時は自分でスタイル書くかUIkitとか使った方が良さげ)。

ともかく、シンプルなスタイルが欲しい時におすすめです。
ぜひお試しを。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?