CSS/UIフレームワーク

2021-06-17

上位に移動

概要

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 PremiumTailwind CSS Essential Training動画189分、2021-02-12
これ以外にtailwindで13コース、157動画検索されたが違うtailwindが検索されている感じ
ドットインストール PREMIUMn/a
Udemy【tailwindcss】CSSが苦手な人向け じっくり取り組んでみよう【次世代のCSS】【わかりやすさ重視】動画106分、2021-03
その他tailwind、English及び日本語、有料、★4.5以上で22個検索された。
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の動画は28コースあるが、Bootstra 5のものはなく、2017-03-31よりも前の動画はBootstrap 4以前のもの。
ドットインストール PREMIUMBootstrap 5入門動画21本
UdemyBootstrap 5 Essential Training : With Projects動画189分
その他Bootstrap、English、有料、★4.5以上で374個検索された。
YouTube以外の教材
Bootstrap 5 Crash Course | Website Build & Deploy

Materialize

提供元教材名備考
LinkedIn Premium?materialize cssで392コース、2,267動画検索されたが教材タイトルからはぴんとこない。
ドットインストール PREMIUMn/a
UdemyMaterialize CSS From Scratch With 5 Projects動画625分、2018-02
その他materialize、English、有料、★4.5以上で27個検索された。
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、動画799分、2021-02
YouTube以外の教材
Bulma CSS Framework Crash Course

書籍

上位に移動

Posted by pitang1965