【2018】CSSのおすすめフレームワーク3つと導入方法を紹介!

CSSのフレームワーク おすすめを3つ紹介!

みなさんこんにちは! Webサイト制作の鬼・かいです。

近年CSSを書くときには、フレームワークの導入が主流になってきています。しかし、その数はとても多くどれを選べばよいかわからなくなってしまいますね。

自分好みのCSSフレームワークを作成するのも良いですが、やはりコードがスッキリしなかったり、乱雑になってしまうことはよくあります。

そこで今日は、実際の現場でもよく使われているおすすめのフレームワークを紹介していきたいと思います!

CSSのフレームワークいっぱいありすぎて困っているというかたはぜひこちらの記事を参考にしていただければ幸いです。

CSSフレームワークは導入すべきか?

まず、実際に紹介する前にCSSのフレームワークはそもそも必要なのか、という点について軽く書いておきます。

自分専用のデザインをするのでフレームワークは必要ない、フレームワークを使っている人はデザインができない人だという意見も時々耳にします。

しかし、僕個人の見解としては、CSSのフレームワークは使うべきだと思っています。

なぜなら、フレームワークを使うと

  • 開発スピードがあがる
  • 規則性にのっとったコーディングができる
  • 他人からみて分かりやすい
  • メンテナンス性があがる

というメリットがあります。

フレームワークだけしか使えないというのは問題がありますが、必要なときに最適なフレームワークを選定できるのもスキルのうちですので、CSSフレームワークの扱いに慣れておくのは重要です。

また、チームで開発、引き継ぎ作業等がある場合はやはりフレームワークを使って、メンテンス性を担保しておくとみんな幸せになれますね。

王道Bootstrap

公式サイト

それでは、実際におすすめフレームワークを紹介していきます。

まずは、王道中の王道ですが、Bootstrapです。名前くらいは聞いた事がある人は多いのではないでしょうか。

主要で使われているものは、Bootstrap3Bootstrap4がありますが、初めて使う方は4の方を選んでおけばよいでしょう。

おすすめなポイント

さて、実際にどこがよいのかというと、

  • 有名なので、情報が多い
  • レスポンシブデザインが簡単に行える
  • 多くの人が使っているので導入コストが低い(チーム内ですぐに利用できる)
  • 慣れればとにかく効率良く開発できる

などがあります。

初学者には、1つ目の情報が多いことがとてもメリットになるのではないでしょうか。また、多くのフレームワークには導入されていますが、レスポンシブデザインが楽というのも大きいです。

幾つもブレイクポイントを設定して、適用してと繰り返す作業が軽減されるのはありがたいですね。

しかし、Bootstrapは大きなフレームワークのため、慣れるまで、理解するまでは逆に時間がかかってしまうことがあったり、バグが多いというデメリットもあります。

しかし、慣れれば爆速開発は間違いないですし、バグも少しずつ減ってきているので十分導入を検討する価値はあります。

導入方法

導入には、関連ファイルをDLして読み込む方法と、CDNを利用した方法があります。

一つずつ見ていきましょう。

ソースファイルをダウンロードして読み込む

 

まずは、以下の公式ページから「Compiled CSS and JS」のDownloadボタンより、ソースファイルをダウンロードしましょう。

公式サイト

その後、中にあるCSSフォルダ、jsフォルダをindex.htmlが置いてある階層にコピーしてやりましょう。

そして、このようにlinkタグで指定してやれば、Bootstrapの導入は完了です。

例えばこのように、コンテンツを中央寄せにするクラス名をつけてやれば動作確認ができますね。

CDNを利用して読み込む

次はCDNを利用する方法をみていきましょう。

公式サイト

先程と同じように公式ページへ行きスクロールしていくとBootstrapCDNというのがあるのでこの上の方をコピーして、

このようにheadタグ内に貼り付けましょう。

きちんとできていますね。

また、Bootstrapについて詳しく知りたい方はこちらの記事で解説されているので参考にしてみるとよいでしょう。

Bootstrapとは?最新版のBootstrap4の使い方についても徹底解説!
更新日 : 2019年5月6日

Googleに準じたMaterialize

公式サイト

これはGoogleが推奨するデザインのガイドラインであるマテリアルデザインに準じたフレームワークです。

やはり、Google先生のSEO下で運営する限りはGoogleが推奨するものを使いたいですね。

おすすめポイント

こちらの利点は、

  • Bootstrapと似ていて知っている人は操作しやすい
  • Googleが推奨しているデザインに準じている
  • 開発が活発
  • デバイスに依存しないデザイン


というところでしょうか。

最後のは、デザインが統一されていて、デバイスごとに変わったりしないので閲覧するデバイスが変わっても操作性が統一されます。

しかし、やはり多機能なことは多機能なので、つかいこなすまでのコストはかかります。

導入方法

こちらも導入には、関連ファイルをDLして読み込む方法と、CDNを利用した方法があります。

ソースファイルをダウンロードして読み込む

公式サイト

こちらの公式サイトから、緑色のMATERIALIZEボタンよりダウンロードできます。

こちらもBootstrap同様、中のcssフォルダ、jsフォルダをindex.htmlと同階層にコピーします。

その後、head内に上記のように記述してやりましょう。

上記のようなクラス名を与えて、バックグラウンドの色を指定することで動作確認してみます。

うまく動作していますね。

CDNを利用して読み込む

同じ公式ページより、CDN以下のコードをコピーして以下のようにペーストしましょう。

公式サイト

うまく動作していますね。

軽量シンプルMilligram

公式サイト

さて、最後に紹介するのはこちらの超シンプルなつくりであるMilligramです。

おすすめポイント

このフレームワークの利点は、

  • めちゃめちゃ軽量
  • 余分な機能が入っていない
  • すぐにマスターできる
  • 機能追加してもコードがクリーンに保たれる

という利点があります。

Bootstrapほど多機能は必要なくて、最低限の機能に留めて、必要になったら足していきたいという方にピッタリのフレームワークです。

導入方法

公式サイト

こちらのサイトをスクロールしてGetting Startedからダウンロードしましょう。

また、上記の公式サイトに殆どの機能をデモした様子などものっているので、興味がある方は最後まで見てみるとよいでしょう。

ダウンロード後、distフォルダの中のmilligram.min.cssをindex.htmlと同階層にコピーしましょう。

先程までとは違い、フォルダではなく、ファイル一つでかつjsファイルがないことからもいかに軽量なフレームワークかわかると思います。

いつもどおりこのように、読み込んであげれば良いですね。

containerで囲んでやると、余白など調整してくれているのがわかり、動作確認できます。

まとめ

いかがでしたでしょうか。

今日はおすすめのCSSフレームワークを3つ紹介しました。

フレームワークごとにclass名などを覚えたりするのは少し大変ですが、cssフレームワークを使うことに慣れると良いことがいっぱいあるので、是非サクッと使えるようになりましょう!

それでは!!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

かい

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説