CSSの軽量フレームワーク10選を現役エンジニアが解説【初心者向け】

初心者向けにCSSの軽量フレームワーク10選について解説しています。フレームワークを使用すると、スタイルシートを効率的に実装することができます。主なフレームワークの例と導入方法を覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

CSSの軽量フレームワーク10選について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSの軽量フレームワーク10選について詳しく説明していくね!

大石ゆかり

お願いします!

目次

1時間でできる無料体験!

 

フレームワークとは

フレームワーク(framework)とは、会社の大規模の組織(リソース)での協業を前提として、多少なりの規模が異なっていても規則性のあるソースコードを実現するためのソフトウェアです。

 

[PR] Webデザインで副業する学習方法を動画で公開中

フレームワークを使うメリットとデメリット

フレームワークを導入するだけではなく、フレームワークを使用することによる恩恵と損失の可能性を下記に述べます。

 

メリット

ある程度の品質が保たれた規則性もある成果物の生産について、組織の複数人での協業を円滑に活動させて、工数の圧縮や作業の効率化を望めます。

品質については、生産量を堅調に安定化できると労力を軽減できるでしょう。

 

デメリット

会社の成果物に対する品質は期待可能であるものの、それに伴う構成員に対する負荷の分散にはなりません。

なお、会社の組織での協業を前提としているため、会社の大規模の組織が必要不可欠になりやすいです。

 

おすすめフレームワーク10選

  1. reset.css
  2. Font Awesome
  3. Skeleton(normalize.css, skeleton.css)
  4. Bootstrap
  5. YUI(Yahoo User Interface)
  6. INK(Ink Interface Kit)
  7. Semantic UI
  8. UIKit(User Interface Kit)
  9. Materialize CSS
  10. Milligram

かつては、YUI(Yahoo User Interface) が代表格でした。

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

人気のあるフレームワークを試してみよう

reset.cssとFont Awesomeを導入するためのサンプルコードです。

 

HTMLのheadタグの内側

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/fontawesome.min.js">

 

HTMLのbodyタグの内側

<i class="fas fa-clone"></i>

 

表示結果

See the Pen
2020-7-23-sample01
by YOHEI INAI (@yohei_inai)
on CodePen.

 

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

CSSの軽量フレームワーク10選がよく分かりやすくて良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する