5
3

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.

マテリアルデザイン(Material Design)のCSSフレームワークの使い所(CSS Onlyの軽量フレームワークとの対比)

5
Last updated at Posted at 2020-08-12

ある程度デザインされているので、そのまま使い易い

 マテリアルデザインを使ったCSSフレームワーク・ライブラリ)は、色や影などがついているので、そのまま利用しても見栄えがそれなりに良い。
 社内だけで使う業務アプリや管理画面などには、こうしたライブラリを使えばコンポーネント単位で柔軟に使えて良いと思う。
 代表的なのは以下。

マテリアル系のCSSフレームワークはオリジナルでデザインするときは不向き

 前掲の裏返しで、デザイナーさんがオリジナルでデザインしたものをコーディングする際には不向き。
 この場合、デザイン性のない、レイアウト(配置)、アニメーション(動的効果)だけを利用できるCSSフレームワークがよい。
 例えば、以下のような軽量フレームワーク(CSSだけを使っている)。

  • SPECTRE.CSS:凄くシンプル。逆にデザイン性はない。
  • Milligram:Node.jsの公式で使われている。
  • Picnic CSS:ドキュメントのデザインが良い(見やすいかは別)
  • Pure.css:標準的。
  • HiQ:ビルドがPostCSS。

余談:JSをできるだけ排除し、小さい単位で使えるコンポーネント指向のCSSフレームワークがよい

 
 最近は、React、Vue、Svelte、Angularなどコンポーネント指向でのフロント開発が多い。その場合、これらでつくったコンポーネントに対してスタイルを適用していくことになる。
 そうなると、できるだけJSの依存性はなく、細かく利用できるものがよい。
 
 この観点から軽量フレームワークであったり、「Material Components for the web」のようなコンポーネント指向のCSSフレームワークが使いやすい。
 仮に、Javascriptを使っていても、webpackなどでのビルドがしやすい、名前空間の衝突とかのないものがよい。

 Materializeは、デザインやエフェクトは一番良いのだが、コンポーネント指向、ビルドという点では、jQueryでの依存があったりするので、少しおすすめできない。
 とはいえ、コンポーネント指向とかあんまり関係なく、見た目だけとりあえずいいなら、Materializeが一番だろう。

 

5
3
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
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?