CSS/UIフレームワーク

2021-02-24

上位に移動

概要

HTML/CSSフレームワークの格安教材（ LinkedIn PremiumとドットインストールPREMIUM、それとUdemyの有料及び無料の★4.5以上の動画、YouTube）を紹介します。

CSSフレームワークはWebサイト及びUIを迅速に作成するのに役立つが、CSSの基本を学ぶのが先になります。

  • Tailwind CSS
  • Bootstrap
  • Materialize
  • Bulma

他にも以下ようなものがあり、上記と合わせて記事「Best CSS Frameworks in 2020」(2020-09-08)で概要が説明されています。

  • Material Design Lite
  • Foundation
  • Skeleton
  • Semantic UI
  • Pure CSS
  • UI kit

Tailwind CSS

提供元教材名備考
LinkedIn Premium?tailwindで13コース、154動画検索されたが教材タイトルからはぴんとこない。
ドットインストール PREMIUMn/a
UdemyMaster Laravel with GraphQL, Vue.js and Tailwind動画1,067分、2020-08
その他tailwind、English、有料、★4.5以上で5個検索された。
YouTube以外の教材
Tailwind CSS Crash Course

Bootstrap

  • UI及びテーマのためのフロントエンドフレームワーク
  • HTML/CSS/JavaScriptを含む
  • レスポンシブ、モバイルファーストなWebアプリケーション及びWebサイトの構築に使われる
  • 圧倒的に人気なフレームワーク
  • 使用する理由
    • 開発速度の向上
    • レスポンシブ
    • 一貫性（クラス名など）
    • カスタマイズ可能
    • サポート（多くの人が使っている）
提供元教材名備考
LinkedIn PremiumBootstrap 4 基本講座動画352分、2018-03-13
Bootstrap 4 Essential Training動画406分、2020-8-10
Bootstrap 4 with Sass動画116分、2019-04-18
Bootstrap 4 Layouts: Responsive Single-Page Design動画193分、2018-09-17
その他言語:ENでBootstrapの動画は9コースあるが、2017-03-31よりも前の動画はBootstrap 4以前のもの。
ドットインストール PREMIUMBootstrap 4入門動画22本
UdemyBootstrap 4 From Scratch With 5 Projects動画690分
Build Modern Responsive Website With HTML5, CSS3 & Bootstrap動画780分
Bootstrap 4 – Create 4 Real World Projects動画600分
その他Bootstrap、English、有料、★4.5以上で302個検索された。
YouTube以外の教材
Bootstrap 4入門
Bootstrap Beginner Crash Course

Materialize

提供元教材名備考
LinkedIn Premium?materialize cssで392コース、2,267動画検索されたが教材タイトルからはぴんとこない。
ドットインストール PREMIUMn/a
UdemyMaterialize CSS From Scratch With 5 Projects動画625分、2018-02
その他materialize css、English、有料、★4.5以上で６４８個検索された。
YouTube以外の教材
Materialize CSS Crash Course [Part 1]

Bulma

提供元教材名備考
LinkedIn Premium?bulmaで7コース、18動画検索されたが教材タイトルからはぴんとこない。
ドットインストール PREMIUMn/a
UdemyMaster Bulma CSS framework and code 4 projects with 14 pages★4.3、動画770分、2020-06
YouTube以外の教材
Bulma CSS Framework Crash Course

書籍

上位に移動

Posted by pitang1965