ムカデノワラジ

ムカデノワラジ

ガジェット・Webサービス・プログラミング・エンタメについて書く雑記ブログ

MENU

Bulma・bootstrap以外のシンプルなCSSフレームワークまとめ

Bootstrapを使うと、しっかりとした工夫をしないと一目でbootstrapを使ったとわかってしまいます。

またbootstrapはボタンのデザインがイマイチ冴えないです。

別の記事でCSSのみの軽量フレームワークBulmaについて紹介したので、この記事ではBulma、bootstrap以外のCSSフレームワークを紹介します。

 

Materialize

Materializeはgoogleの提唱するフラットなデザインを簡単に実装できるCSSフレームワークです。

Bulmaのデフォルトのカラーがやや癖が強いのに対して、MaterializeのUIの色は発色を適度に抑えた控えめな印象です。

materializecss.com

ボタンのデザイン一つとってもmaterializeは次のようなデザインです。

f:id:xhateblo:20190304015927p:plain

 

一方Bulmaは次のようなデザインです。どことなくBootstrap感がのこります。またデフォルトの配色もかなりビビットなので使いこなすのが少し難しいです。

f:id:xhateblo:20190304020050p:plain

 

※ちなみにULkitというフロントエンドライブラリのボタンは次の画像のようにmaterializeとbulmaを足して二で割ったようなデザインです。

f:id:xhateblo:20190304022952p:plain

 

また、naterializeにはテーマに合わせたアイコンも用意されています。ざっと数えたところ数百ものアイコンが使えます。

<head>タグで以下のリンクからフォントを取得して、<body>内で下の画像ように読み込みます。

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <i class="material-icons">add</i>

 

f:id:xhateblo:20190304020802p:plain



 

 

Foundation

foundationはCSSJavaScriptを利用した軽量フロントエンドライブラリです。

ウェブサイトに必要なUI要素をそろえつつ、特徴が抑えられていて初見では何のライブラリかわかりにくいライブラリなので使いどころは多いです。

foundation.zurb.com

画像や文章をいくつか表示できるスライダーや深い階層までネストしたドロップダウンを作ることもできます。

f:id:xhateblo:20190304021255p:plain

f:id:xhateblo:20190304021523p:plain

 

 

 

Vanilla Framework

Vanilla Frameworkはmaterialize以上にシンプルな、シンプルさを突き詰めたようなCSS フレームワークです。

vanillaframework.io

例えばcardのレイアウトは以下の画像のように、立体感や装飾を排除したデザインになっています。

f:id:xhateblo:20190304022112p:plain

このようにレスポンシブなタイルのような構造に配置することも可能です。

f:id:xhateblo:20190304022209p:plain

以上の様に、デザイン・レイアウトの柔軟性はかなり高くしつつ、デザインの特徴は可能な限りそぎ落とした美しいフレームワークです。

無駄な部分がごっそりそぎ落とされてはいますが安っぽさはありません。コンテンツ主体のウェブサイトを作るのに役に立つはずです。

 

あわせて読みたい

Ruby on Rails を利用したwebアプリにplotly.jsを使いグラフを描画する - ムカデノワラジ