HackathonBlogの中の人のブログ

http://hackathon-blog.com/の中の人のブログです。ハッカソン等のイベントに参加する際に便利な情報だったりその他もろもろをここで更新することが出来ればと思います!

凄く良い感じにできるCSS framework4選!

HackathonBlog中の人、京都の羊です!

今日は普段の開発、モックアップ等さくっと開発したい時に凄く良い感じにしてくれるCSS frameworkを紹介させて頂きたいと思います!

Materialize

f:id:hackathonblog:20150625131233p:plain

 

 非常にシンプルで多くのコンポーネントが用意されているので非常に使いやすいCSS frameworkです!

f:id:hackathonblog:20150625132820g:plain

PlaceHolderがぬるっと動いてくれてくれます!

f:id:hackathonblog:20150625133652g:plain

Date Pickerも綺麗で見やすいですね!

今流行りのMaterial Designを簡単に実装することができるCSS frameworkです!

 

BLACKHOLE

f:id:hackathonblog:20150625182011p:plain

BlackHoleはSCSSに対応したCSS frameworlです。

f:id:hackathonblog:20150625182820g:plain

こんな感じの綺麗なnotifyも簡単に実装することが出来ます!
Flatなデザインのサイトを作りたいときに使いたいCSS frameworkですね!

 

Metro UI CSS 3.0

f:id:hackathonblog:20150625183300p:plain

Metro UI CSSWindows風のUIを使いたい時に持ってこいなCSS frameworkです!

f:id:hackathonblog:20150625183905g:plain

細かい所までWindows風な実装が出来ます。
色々なWidgetが用意されているので一度サイトを見てみるのがいいかと思います。
しっかりと作りこまれている印象を受けるCSS frameworkおすすめです!

 

Semantic UI

f:id:hackathonblog:20150625184540p:plain

今回紹介した他のCSS frameworkよりは導入の敷居が少しだけ高いかもしれませんね。

f:id:hackathonblog:20150625185654g:plain

f:id:hackathonblog:20150625185711g:plain

とにかく多くのテーマが用意されている点、アニメーションの実装が手軽に行える点がオススメのCSS frameworkです!

 

今回は「簡単に実装出来る」、「CSS frameworkひとつで様々な事が出来る」という所に重点を置いて4種類のCSS frameworkを紹介させて頂きました!
いかがでしたでしょうか?使えるCSS frameworkが多いとさくっと実装を行わなければいけない時に非常に楽に実装を行うことが出来るので覚えておいて損はないかなと思います!

HackathonBlogではハッカソンの情報をどんどん公開していっていますので、よろしければこちらもどうぞよろしくお願い致します。