ja ja ja zh zh ceb ja ja ja ja ja ja ja ja ja fa ja ja ja ja de ja ja nl en ja ja ja ja ja ja ja ja ja ja ja ja en en en en en en en en en en en de de en en nl en en es en sv en it ja en ar en en en en ja ja ja ja ja ja ja ja ja en en sv fr de de en en en zh en ja ja en fr ja ja ja ja ja ja ja ja en en ja ja ja ja ja ja ja ja en en ja ja ja ja ja en pt ja ja ja ja ja ja it pl ja ja ja ja ja ja en en en ja ja en en de ja ja ja ja ja ja en de ja ja ja en en ja ja ja ja ja en en de ja ja en ja ja ja ja ja ja en ja de en ja ja ja ja ja ja de en de ja ja ja ja ja ja en en en ja ja ja ja ja en en en ja ja ja ja ja en nl nl ja ja ja ja ja ja en fr ja ja ja ja ja ja en en ja ja ja ja ja es en ja ja ja ja ja en en ja ja ja ja ja ja ca en ja ja ja ja ja en en en ja ja ja ja ja it en ja ja ja ja ja ja en pl ja ja ja ja ja ja en fr ja ja ja ja ja ja eo pl ja ja en en ja ja ja ja ja ja en en ja ja ja ja en en en ja ja ja ja en en eo ja ja ja ja ja en en ja ja ja en lt ja nl en ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja en ja de en ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja zh zh ceb ja ja ja ja ja ja ja ja ja fa ja ja ja ja ja ja
AAA  BBB     CCC  DDD     EEE  FFF
Bootstrapと並んで人気があるのが、このFoundationだ。
Foundationを使うと簡単にレスポンシブデザインのWebページを作れる。Webページだけではなく、アプリケーションやHTMLメールを作成するにも使える。Foundationもグリッドシステム採用だ。
また、AngularJSとも相性がよく、Angularをよくわからずとも使えるようになっている。カスタマイズの自由度もBootstrapより高い。
次のようなナビゲーションを簡単に作ることができる。
ボタンデザインは次のようになる。
Bootstrapのデザインとは差別化されるので、「Bootstrap使いたいけど、同じデザインになるのはちょっと」というときは、まず試したいフレームワークだ。
Bootstrapと同様にかなり重厚なCSSフレームワークになっている。また、日本語の資料が少ないのも難点ではあるが、英語ドキュメントが読めればまず問題なく使えるだろう。
Semantic UI
http://semantic-ui.com/
名前の通りセマンティックであることに重きを置いているCSSフレームワークだ。セマンティックは、「意味がわかりやすい」くらいの意味だと思って頂いて構わない。
BootstrapなどのCSSフレームワークを使っていると、自分で実現したいデザインをその度に調べる必要がある。しかし、Semantic UIだと”ui stackable center aligned page grid”のように読んですぐにわかる言葉を用いれば、そのまま反映される。これは便利だ。学習コストが低いCSSフレームワークとして人気がある。
デザインは次のように様々なUIが簡単に作れる。
ボタンのセンスも抜群だ。
http://ink.sapo.pt/
INKはレスポンシブなWebページを早く、「必要十分」に作れるCSSフレームワークだ。SASSにも対応している。というより、SASSでできている。
可読性の高いコードが特徴で、クラス名が” horizontal menu”などになる。
GRIDシステムが使え、ナビゲーションメニュー、テーブル、フォーム、Webフォントなど一通りの機能が揃っている。
ボタンは次のようなデザインだ。
アラートもシンプルな使いやすいデザインになっている。
http://purecss.io/
PureはBootstrapやFoundationに比べると圧倒的に軽いフレームワークだ。
大規模なサービスというよりも、どのサイトにも手軽に入れて欲しい、というのが彼らのスタンスになっている。
グリッド、フォーム、ボタン、テーブル、メニューなど一通り欲しい要素は用意されているので、便利になるようにとりあえず入れておくには最適だ。
ボタンデザインは次のようになる。Bootstrapに似ているだろうか。
フォームは次のようになる。
Responsive Boilerplate Framework
http://responsiveboilerplate.com/
Responsive Boilerplate Frameworkはわずか3KBしかない。軽量で各種ブラウザにも対応したレスポンシブデザイン用のCSSフレームワークだ。
ボタン等は作れない。ただただレスポンシブデザインのWebサイトを作るために使うフレームワークだ。シンプルな目的でできていて、これはこれで好ましい。使い道もあるだろう。
http://danmalarkey.github.io/schema/
Schemeも軽量なCSSフレームワークで、他のフレームワークと同様レスポンシブウェブデザインに対応している。割とシンプルな中身になっており、カスタマイズしやすい。
重厚なCSSフレームワークではないが、UI系の機能は揃っている。
ボタンはグループでも作れる。
アラートはデザインセンスがいい。
MUELLER GRID SYSTEM
http://muellergridsystem.com/
SassおよびCompassをベースとしたCSSフレームワークがMUELLER GRID SYSTEMだ。
名前の通りグリッドシステムを作ることに特化している。ここからカスタマイズしていくのがいいだろう。
グリッドシステム用なのでデザインはない。
Almost Flat UI
http://websymphony.net/almost-flat-ui/
Almost Flat UIはFoundation FrameworkベースのフラットUIテーマだ。デザインパーツがどれもフラットデザインになっていて、今の時代に使いやすい。
ボタンは次のようになっている。
グループボタンもいいデザインだ。
プログレスバーも用意されている。
http://daneden.github.io/Toast/
Toastもグリッドデザイン専門のCSSフレームワークだ。「シンプルに」をモットーに作られ、その通りシンプルだ。IE8以降に対応させることで、コード量を減らしている。
グリッド専門なので、ボタンなどのデザインはできない。
http://getskeleton.com/
Skeletonは名前の通り最小構成を目指したCSSフレームワークだ。
レスポンシブ対応、グリッド、文字の大きさ調整、フォーム、ボタンなどよく利用する機能がシンプルにまとまっている。
Skeletonを使うと、自分好みのサイトが簡単に作成できる。Bootstrapなどと比べると、使用頻度が低いので、デザインが他のサイトとかぶることもない。
ボタンは次のようにシンプルなデザインになっている。
フォームもシンプルで使いやすい。
http://kathamo.github.io/
Kathamoもレスポンシブデザイン用のミニマムCSSフレームワークである。とにかく軽い。14KBしかない。
KathamoのグリッドシステムはBootstrapと同じだ。Bootstrapを使い慣れている方であれば、すぐに使える。
手軽に使うにはうってつけのフレームワークになっている。
フォームとボタンはシンプルでいいデザインだ。
アラートもBootstrapとは少々違う。
http://bootflat.github.io/
BootflatはBootstrapをベースに作られているフラットUIキットだ。
フラットUIを作るのに便利で、PSDなども無料で配ってくれている素敵なオープンソースだ。
モバイルアプリやモバイルサイトを作る際に重宝するようなデザインが揃っている。
デザインは揃いに揃っているし、どれもクオリティが高い。
アラートのデザインもいい。
Materialize
http://materializecss.com/
マテリアルデザインを取り入れたフレームワークがMaterializeだ。基本的にBootstrapと似ているので、使いやすい方も多いだろう。
アニメーションやトランジションも用意されている。これがとてもかっこいい。サイトテンプレートも用意してくれているのでLPをサクッと作るときにも使える。
デザインだけではなく、アニメーションも付くのでぜひ本サイトも見てみてほしい。ボタンデザイン下記だ。
ローディングや進行バーなども完備されている。
Material UI
http://www.material-ui.com/#/
Googleのマテリアルデザインを使えるCSSフレームワークだ。また、Reactも使えるようになっている。
シングルページアプリケーションのために作られている。また、利用するにはNode.jsの知識も多少必要だ。Webデザイナーというより、Webエンジニアのためのフレームワークだと思っていい。
ボタンは4種類あり、それぞれ簡単に使える。下記は「Raised Button」の例だ。
日付選択フォームのUIなども美しい。
http://getuikit.com/
基本的な使い方はBootstrapと似ているが、UIkitの方が便利だという人がいるほどのCSSフレームワークだ。
色々と便利な機能が揃っている。3カラムのビッグメニューが作成できたり、ボタンの常時押し機能があったり、YouTubeライクなメニューが簡単に作れたりする。
本サイトではUIkit自体をカスタマイズして出力することもできる。非常にユーザフレンドリーなCSSフレームワークだ。
変更もできるがこのようなボタンデザインだ。
プログレスバーは次のような形だが、これだけではなく何種類もある。
http://cardinalcss.com/
Cardinalはモバイルファーストを理念としたCSSフレームワークだ。16KB程度と軽い。
必要最低限の機能を用意しており、ユーザがカスタマイズすることが前提になっている。LESS製のフレームワークだ。
ボタンやフォームやテーブルの基礎デザインは提供されている。
ページネーションはこのような形だ。シンプルで使いやすい。
ボタンも同様にシンプルなデザインになっている。
http://workless.ikreativ.com/
凝ったデザインを作るのでなければ、Worklessは機能的だ。
必要なクラスが一通り揃っていて、デザインも他のフレームワークと違う。サクサクとWebサイトを作りたい方にはオススメだ。
ボタンデザインは黒ベースになっている。
ヘルパーも一通り揃っており、ラベルやアラートなどがすぐにつかえる。
http://www.marcellop.com/bootmetro/
BootmetroはBootstrapをベースにしたフレームワークだ。Windows 8のModern UIのスタイルがイメージされている。
Windows 8自体は不人気だったが、UIは先進的だったことを覚えているだろう。ああいったデザインを作りたければ、Bootmetroを選択しよう。
サムネイルデザインなども便利である。
HTML KickStart
http://www.99lime.com/elements/
KickStartはすぐに使えるフレームワークだ。jQueryとサイトからダウンロードできるCSS、JSをコピーすれば導入完了だ。
重厚でもないが、軽くもない一通りの機能は揃っているし、細かい設定もできる。スライドショーやタブもすぐにセッティングできる。
また、コードもデザインを伴って表示ができる。
ボタンはサイトよりもアプリケーションに使いやすい。
フォームのパーツも揃っている。
https://docs.atlassian.com/aui/latest/
AUIはAtlassianが作っているCSSフレームワークだ。Atlassianのデザインアプローチに伴って作成されている。
class名のつけ方は直感的だ。ソースが読みやすい。機能も揃っており、大体なんでもデザインがある。
他の機能も概ねシンプルなデザインになっている。企業内アプリケーションなどに適したデザインだろう。
http://getbase.org/
軽く、最小限のベースをうたっているのがBASEだ。とは言え、インストールはNPMを使う。シンプルというフレームワークの中では機能的にもシンプルではない。
テーブルや、引用、フォームなど一通りのデザインは揃っている。また、アニメーション機能も充実している。
全体的にデザインデザインしていない。フォームのデザインを見ればイメージが掴めるだろう。
Baseという名前の通り、上書きを前提としているのがよくわかる。
SkyBlue CSS
https://stanko.github.io/skyblue/
SkyBlue CSSは肥大化したBootstrapに疑問を感じて、もう少し軽量化を目指したというCSSフレームワークである。汎用性が低い機能は削がれている。
グリッド、テーブル、フォーム、ボタン、アイコンなど基本機能は揃っているが、どれもシンプルだ。
ボタンデザインは揃っている。
フォームも使えそうないいデザインになっている。
http://www.basscss.com/
他のCSSの邪魔をしない、それでいて使いやすくて軽いCSSフレームワークを目指しているのがBasscssだ。
使いやすさという面で色々と工夫が見て取れる。例えば、max-width:100%を設定したい時、class名でfitと入力すればいい。画像にcircleクラスを付けると丸くなる。
.p0でpadding:0 などユーティリティCSSの要素も持っている。
デザインは軽く、上書きが前提にされている。
classにnot-roundedを付けると角丸を消せる。
Cascade Framework
http://www.cascade-framework.com/
Bootstrap系のフレームワークは汎用性をゴールにしている。Cascade Frameworkはユーザにコントロールを任せることをゴールにしている点が異なる。
CSSファイルが分かれていて、どれを使うかは自分次第だ。
また、Webデザイナーにとって最悪のIE対策がすでにされているという点でも優れたCSSフレームワークだ。
デザイン要素はシンプルながら味のあるいいデザインだ。ヘルパーの種類も豊富にある。例えば次のようなパネルが簡単に作れる。
サイトにも使えるが、アプリケーション向きだろう。
http://knacss.com/
フランス生まれのKNACSSはシンプルで軽量なCSSフレームワークである。レスポンシヴウェブデザイン対応だ。レイアウト系の要素が多く、デザイン機能はほとんどない。
また、サイトがフランス語なため、解読が厄介なのも問題だ。
Concise CSS
http://concisecss.com/
Conise CSSはSASS製のフレームワークだ。軽く使いやすいフレームワークを目指している。
機能をなるべく少なくしている。上書きなどによる工数の増加を抑えるためだ。
また、アドオンとしてスクロールバー、ツールチップ、サークルなどの機能も利用できる。
ボタンはシンプルデザインだ。下のように四角だけではなく、角丸のボタンもすぐに作れる。
モーダルも用意されている。
http://furtive.co/
Furtiveはモバイルファーストで軽量のCSSフレームワークだ。カスタマイズが容易で、熟練者には使いやすい。
古いブラウザへの対応を丸ごとカットしている。その分、SVGsやFlexible Boxなどの新しい機能に対応している。
ボタンもフォームも一般的だ。
Kube CSS Framework
https://imperavi.com/kube/
Kube CSS Frameworkはデザイン面で非常に優秀なフレームワークだ。軽いがデザイン面では機能が充実している。
例えばボタンだけでも何種類も用意されている。アウトラインのみ、消えかけ、丸ボタン、小さいボタン、白抜きなど様々だ。
いいデザイン品質を保っているCSSフレームワークだ。
http://eiskis.net/layers/
Layers CSSは軽量でシンプルなCSSフレームワークだ。ダウンロードする前にカスタマイズできる辺りの気遣いが嬉しい。
pxでの定義やカラーの定義は一切ない。また、角丸などもなく、borderも設定されていない。
基本機能最小限で揃っているといったフレームワークで、上書き前提のツールだ。
フォームデザインは次のようになっている。
CSSフレームワークはBootstrap型の重厚パターンとシンプルパターンに分かれてきている。マイナーなものはだいたいシンプルなものだが、十分に使えるフレームワークばかりだ。
いずれもデザインや機能にそれぞれ特徴を持っている。既存のフーレムーワクのほとんど網羅しているので、ぜひこの中から自身の目的にあったCSSフレームワークを選んでほしい。
CSS設計に関する企業研修を考えている方はこちらから
このページの続きや関連ページは下記から一覧で確認できます。
Webデザインカテゴリーに戻る
IT講師に興味はありませんか?
・「今までIT講師をやってきたが、更に多くの講義を行いたい」
・「エンジニアとしてやってきたが講師業に魅力を感じている」
・「講師として活躍するためにベースとなる知識を知りたい」
・「様々な分野や言語の講師にチャレンジしてみたい」
という方はぜひIT講師募集のページをご覧ください。
リスキルテクノロジーでは「受講している方々にITを好きになってもらう」ことを目標に、同じ目標に向かって歩んで行ける講師の方を常に探しています。
システム開発やインフラ構築などのエンジニアリング経験を活かし、新入社員などの未経験者や経験の浅い初学者の方々に対してITトレーニングを行っていただくことになります。
テキストやカリキュラムは事前に用意されており、それらを元に講義を進めていくため、IT講師をはじめて実施する方でも安心してトレーニングを実施できます。
IT講師募集のページを見る
SNSでもご購読できます。
Twitterでフォローする
Feedlyでフォローする
リカレントテクノロジー
【ITエンジニア養成スクール & IT研修専門企業のリカレントテクノロジーです。】エンジニアの入り口に立つために役立つようなコンテンツを日々ご提供していきます。講師や代表やスタッフ陣が毎日楽しく書いています。ご質問・ご指摘等はぜひコメントください。
コメントを残す コメントをキャンセル
メールアドレス(公開はされません。) *
次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
ファイルやディレクトリをコピーするcpコマンドの使い方!【Linuxコマンド集】
ファイルなどを検索する!findコマンドの詳細まとめ【Linuxコマンド集】
grepコマンドの詳細まとめました【Linuxコマンド集】
【初心者向け】3分でわかるLinuxでできることまとめ 10選
【Windows編】フリーテキストエディタ13選!初心者にもおすすめ
lsコマンドの使い方と覚えたい15のオプション【Linuxコマンド集】
ファイル・ディレクトリを削除するrmコマンドについて詳しく!【Linuxコマンド集】
【目的別】初心者におすすめのLinuxディストリビューション7選
【初心者必見】コマンドプロンプトの使い方と覚えておきたい便利な機能
【すぐわかる!】Atomエディタのインストールと日本語化、便利な使い方
【2023年度最新】おすすめの新入社員向けC#研修 9選
【初心者向け】Pythonの特徴8選
【1分で読める】プログラミング講師になる7つのメリット
【PHP入門者向け】 PHPの文字列リテラルについて知ろう
【PHP入門者向け】 文字列の中の変数展開についてまとめました
【ざっくり理解する】 IPv6アドレスとは?
【初心者向け】システムエンジニアとは?その種類と役割は?
【Java & Tomcat】HttpServletResponseインターフェイスについて知ろう
【Java & Tomcat】Webアプリケーションの設定(web.xmlの設定)※サンプルプログラム付き
【Java & Tomcat】Webアプリケーションの設定(マッピング)※サンプルプログラム付き
【Java & Tomcat】コンテンツタイプの設定(setContentType)※サンプルプログラム付き
【Java & Tomcat】サーブレットのライフサイクル ※サンプルプログラム付き
【Java & Tomcat】文字出力用のストリームの取得(getWriter)※サンプルプログラム付き
【Java & Tomcat】リダイレクトの設定(sendRedirect)※サンプルプログラム付き
【Java & Tomcat】サーブレットからフォームデータを取得する(サンプルコード付き)
IT研修サービス(リスキルテクノロジー)
短期IT研修サービス(リスキル)
ビジネス研修(リスキル)
プログラミング講師募集
JavaScript入門
プログラミングスクール
© Copyright 2022 エンジニアの入り口. All rights reserved.
未経験からの育成制度も充実
IT講師に興味はありませんか?
リスキルテクノロジーでIT講師の積極募集を開始! 経験・未経験問わずご応募可能。育成制度で講師スキル向上も目指せます