icon
icon

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分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

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

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

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週間限定)

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