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

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

 

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

目次

 

フレームワークとは

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

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

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

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

 

メリット

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

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

 

デメリット

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

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

 

おすすめフレームワーク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) が代表格でした。

 

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

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では、初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

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