【Webデザイン】現場でも使っているオススメするCSSフレームワーク

初心者の方が

Webデザインにチャレンジする時に

HTML/CSSの学習を始めていきます。

そんな学習の中で、

CSSフレームワークを使って何かを作る

ということは、

シンプルなHTML/CSSで作るよりも、

楽しく、早く作れる

ために、

実際にCSSフレームワークを使って、

何かを作ることに、

取り組んでもらうことをオススメしています。

そんなCSSフレームワークに関して、

実際に使ってもらいたいCSSフレームワークを、

有名どころを中心に紹介していきます。

CSSフレームワークは、

一番、有名どころに取り掛かる

というのもありですし、

見た目を見て「いいな」と思うもの

を使ってみるのも良いです。

自分自身が気になったものから、

実際に使って、取り組んでみましょう。

【Webデザイン】初心者にオススメするCSSフレームワーク

Bootstrapは、

CSSフレームワークの中でも有名で、

実際の現場でもよく使われています。

Webデザインのレイアウトの中で、

よくみることがあるカードのレイアウトなど、

Bootstrapを使うことで、

このようにシンプルなHTMLで作ることができます。

参考:Bootsrapの公式サイト

カードのようなレイアウトを、

1つのコンポーネント(Component)と呼び、

シンプルなHTMLで、

そのレイアウトを作ることができます。

コンポーネントの種類も多いので、

Webデザインにおけるサイト作成では、

Bootstrapを使うことで、

必要なレイアウトは一通り、

作ることができるでしょう。

初心者の方にもオススメのCSSフレームワークです。

レイアウトを作る中で、

Googleでも採用されている

マテリアルデザイン

このマテリアルデザインに沿った、

コンポーネントを作ることができます。

例えば、

カードのレイアウトに関しては、

参考:materializeのカード

このように、Bootstrapと違い、

影の付け方などが、

Googleで使われているマテリアルデザインに、

より近いものとなっています。

こちらのレイアウトが好きな人は、

このCSSフレームワークを使ってみると良いでしょう。

CSSフレームワーク「Foundation」

レスポンシブサイトを作る時に、

候補としていれたいのが、

Foundation

と呼ばれるCSSフレームワーク

BootstrapやMaterializeなどよりは、

レイアウトは非常にシンプルです。

ドキュメント内に、

英語ですが、動画で説明してくれています。

この辺りも参考にすると、

より、このCSSフレームワークへの理解が深まり、

使ってみると楽しいので、

気になったら試してみると良いでしょう。

CSSフレームワーク「Bulma

HTML/CSSのレイアウトを作っていく中で、

Flexboxは非常に便利です。

そのFlexboxを多用されるようなら、

この

Bulma

と呼ばれるCSSフレームワークはオススメです。

要素の左右寄せなど、

このように、

Flexboxを扱うのと同じように、

レイアウトを組むことができるので、

CSSでFlexboxになれているようなら、

このCSSフレームワークはオススメです。

CSSフレームワークに関する記事

Webデザインの学習ですぐに挫折しそうな初心者は、Bootstrapで楽しみながら学習しよう

HTML/CSSの学習で、

うまく進まないなど、

進展がなくて嫌気が指している人は、

この記事で紹介したCSSフレームワークのどれでも良いですが、

Bootstrapなどをまずはためして、

全体のレイアウトを作ることを、

まずはやってみると良いでしょう

全体が見えると、

HTML/CSSの理解度もあがりやすいので、

悩んでいるようならトライしてみましょう

独学向け(勉強方法)
独学向け(プログラミング)
独学向け(Webデザイン)
独学向け(javaScript)
独学向け(PHP/Laravel)
独学向け(Ruby/Rails)