Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8678

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

$
0
0

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

 マテリアルデザインを使った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が一番だろう。

 


Viewing all articles
Browse latest Browse all 8678


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>