●Top
●Category
●Contact
●About
Web制作者がチェックしておきたい！ 2024年版、CSSフレームワークのまとめ
サイト構築 -CSS
124
162
Post on:2024年2月6日
sponsors
ここ数年定番のCSSフレームワークをはじめ、最近注目されているクラスレスのCSSフレームワーク、ユーティリティファーストのCSSフレームワーク、印刷やメールなどに特化されたCSSフレームワークなど、Web制作者がチェックしておきたいCSSフレームワークを紹介します。
Awesome CSS Frameworks -GitHub
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。
●ベース・リセットCSS・ノーマライズ
●クラスレスのCSSフレームワーク
●超軽量のCSSフレームワーク
●汎用性に優れたCSSフレームワーク
●Material DesignのCSSフレームワーク
●ユーティリティベースのCSSフレームワーク
●特化型のCSSフレームワーク
●ツールキット
ベース・リセットCSS・ノーマライズ
●sanitize.css -GitHub
reset.cssとnormalize.cssに続くCSSリセット。
参考: reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
●modern-normalize -GitHub
モダンなCSSのリセット。
参考: normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize
●minireset.css -GitHub
軽量で、モダンなCSSリセット。
●modern-css-reset -GitHub
現在のWeb制作に合わせて制作された新しいCSSリセット。
●inuitcss -GitHub
大規模なUIプロジェクト向けの拡張可能でスケーラブルなSassベースのOOCSSフレームワーク。
●ress -GitHub
モダンCSS用のリセット。
●Natural Selection -GitHub
ベスト プラクティスのCSSセレクタのコレクション。
各リセットCSSやノーマライズについての詳細は、下記をご覧ください。
2024年、現在の環境に適したリセットCSSのまとめ
クラスレスのCSSフレームワーク
セマンティックHTMLを使用し、クラスに依存しないCSSのフレームワーク。
Water.css
MITライセンス
シンプルなWebサイトの見栄えをすこし素敵にする、Just-add-CSSのスタイル集です。
参考: シンプルなWebサイトを少しだけ美しくするためのスタイルシートのコレクション -water.css
MVP.css
MITライセンス
HTML要素のためのミニマリストなスタイルシート集。
参考: 必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css
sakura
MITライセンス
ミニマルで、クラスレスのCSSフレームワーク。
参考: CSSが苦手な人、CSSを書く時間がない人に最適！見栄えのよいページを簡単に作成できるスタイルシート -sakura
Tacit
MITライセンス
ダミーサイトをさくっと作成するためのCSSフレームワーク。
awsm.css
MITライセンス
クラスや属性などのないセマンティックHTMLマークアップ用のCSSライブラリ。
超軽量のCSSフレームワーク
5Kbよりも軽い、超軽量のCSSフレームワーク。
Pure
BSDライセンス
すべてのWebプロジェクトで使用できる、超軽量でレスポンシブ対応のCSSモジュールのセット。
Milligram
MITライセンス
ミニマルなCSSフレームワーク。
Picnic CSS
MITライセンス
軽量で美しいCSSのライブラリ。
Chota
MITライセンス
3Kbの本当に超軽量のCSSフレームワーク。
汎用性に優れたCSSフレームワーク
小さなプロジェクトから大きなプロジェクトまで、汎用性に優れたCSSフレームワーク。
Bootstrap
MITライセンス
レスポンシブ対応、モバイルファーストのプロジェクトを開発するための最も人気のあるHTML、CSS、JavaScriptフレームワーク。
参考: Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
Bulma
MITライセンス
FlexboxをベースにしたモダンなCSSフレームワーク。
参考: ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma
Foundation
MITライセンス
先進的で、レスポンシブ対応のフロントエンドフレームワーク。
UIkit
MITライセンス
高速でパワフルなWebインターフェイスを開発するための軽量でモジュール化されたフロントエンドフレームワーク。
Primer
MITライセンス
GitHubのフロントエンドデザインを支えるCSSフレームワーク。
Carbon Components
Apacheライセンス
IBMのCarbon Design Systemを支えるコンポーネントライブラリ。
Fomantic UI
MITライセンス
簡潔なHTML、直感的なJavaScript、シンプルなデバッグで美しいWebサイトを素早く構築するCSSフレームワーク。
Pico.css
MITライセンス
ネイティブHTML要素のためのエレガントなスタイル、ダークモードが自動的に有効になります。
Blaze UI
MITライセンス
スケーラブルで保守可能な基盤を備えたWebサイトを素早く構築するための優れた構造を提供するオープンソースのモジュール式ツールキット。
Base
MITライセンス
堅実でレスポンシブ対応のCSSフレームワーク。
Cirrus
MITライセンス
プロトタイプのために設計された、コンポーネントとユーティリティ中心のSCSSフレームワーク。
Turretcss
MITライセンス
アクセシブルでセマンティックなWebサイトのためのレスポンシブ対応のフロントエンドフレームワーク。
Vanilla Framework
GNU Lesser General Public License v3.0
シンプルで拡張可能なCSSフレームワーク。
Pattern Fly
MITライセンス
エンタープライズのWebアプリ用のUIフレームワーク。
HiQ
MITライセンス
レスポンシブ対応のタイポグラフィと入力スタイルを備えたシンプルなCSSフレームワーク。
Material DesignのCSSフレームワーク
Material Components Web
Apache License 2.0
モジュール式でカスタマイズ可能な、Web用のマテリアルデザインUIコンポーネント。
MUI
MITライセンス
Googleのマテリアルデザインのガイドラインに沿った軽量なCSSフレームワーク。
Materialize
MITライセンス
Googleのマテリアルデザインのガイドラインに基づくレスポンシブ対応のフロントエンドライブラリ。
ユーティリティベースのCSSフレームワーク
Tailwind CSS
MITライセンス
UIを迅速に開発するためのユーティリティファーストのCSSフレームワーク。
参考: CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク﹁Tailwind CSS﹂
参考: Tailwind CSSが私には合わなかった理由
Tachyons
MITライセンス
CSSを書かずにさまざまなUIを素早く構築および設計できるCSSフレームワーク。
Open Props
MITライセンス
一貫性のあるデザインを実装するためにCSS変数︵カスタムプロパティ︶で構成されたCSSフレームワーク。
参考: これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
特化型のCSSフレームワーク
98.css
Windows98風インターフェイスを構築するためのCSSフレームワーク。
Tufte.css
Edward Tufteの本や配布物で示されたアイデアを使用してWebページをスタイルするCSSフレームワーク。
Gutenberg
Webページを正しく印刷するためのモダンなフレームワーク。
XP.css
Windows XPのようなインターフェイスを構築するためのCSSライブラリ。
Bojler
レスポンシブ対応で、軽量なメールテンプレートを開発するためのフレームワーク。
TuiCss
MS-DOS風インターフェイスを作成するためのCSSフレームワーク。
7.css
Windows 7のようなインターフェイスを構築するためのCSSライブラリ。
ツールキット
ツールキットは、フレームワークよりもライブラリに近いです。実際のスタイルは提供しませんが、CSSプリプロセッサで使用できるユーティリティ︵ミックスインなど︶を提供します。
Bourbon
軽量なSassのツールセット。
sponsors
Related Posts
●CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
●CSSでスクロールバーのデザインをCSSでカスタマイズする方法を徹底解説 -古いCSSと新しいCSSでの実装のポイント
124
162
top of page
Sponsors
誰よりも先をリードするWordPressテーマTCD
coliss
Recnet Entry
●FigmaのAIによる学習﹁コンテンツのトレーニング﹂をオフにする方法、独自性・機密性の高いデザインを扱っている場合は注意が必要です
●ゴシック体の素晴らしい世界が広がる！ 商用利用無料、可読性に優れたフリーフォント﹁永代ゴシック﹂がリリース
●Web制作・デザイン・イラスト関連のこんな大規模Kindleセールは初めて！ 本日終了のもあるので、お見逃しないように
●2024年のAmazonプライムデーで、見逃しがちなお買い得品を紹介します
●国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書 -モダンWebサイト制作入門
●Amazonで、2024年プライムデーの先行セールが開催！ 私が購入して本当によかったものを紹介します
●CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
●Affinityを使ってみたかった人に朗報！ Win, Mac, iPadのDesigner、Photo、Publisherが6ヵ月無料で使用できる
Pickup Entry
●2024年用、日本語のフリーフォント707種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
●手書きの日本語フリーフォント、筆文字・毛筆の日本語フリーフォントの総まとめ
●おしゃれな手書き！ 筆記体の英語フリーフォントの総まとめ
●商用利用無料、国内のフリーイラスト素材の総まとめ
●商用利用無料、おしゃれでシンプルなかわいい海外のフリーイラスト素材の総まとめ
●フォント名を画像から調べる、日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ
●いい感じの写真画像がクレジット表記無しで無料利用できるサイトのまとめ
●背景素材に困った時に！ダウンロードしておきたい実用度満点のフリーの背景素材のまとめ
●2024年のトレンドカラーは、癒やしのカラー﹁ピーチファズ︵Peach Fuzz︶﹂
●色々な色の名前、伝統色の名前が分かるサイトのまとめ
●VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptなどのコードを書く時に便利
●最近の実装に合わせたHTMLテンプレート
●5分で完璧に分かる！CSS Gridの基本的な使い方を解説
●独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル
●CSS Flexbox の各プロパティの使い方を詳しく解説
●CSS Flexboxの使い方・バグ情報・グリッドの実装など、有用なリソースのまとめ
●CSSの中央揃えで、最も万能で信頼できる実装テクニック
●2024年、現在の環境に適したリセットCSSのまとめ
●2024年版、CSSフレームワークのまとめ
●Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ
●Font Awesome アイコンの使い方と便利な機能のまとめ
●Photoshopの新機能がかなり便利！かゆいところに手が届く改善点が盛りだくさん
●Photoshopの選択範囲や切り抜きはこれが一番簡単で正確！CC 2021で進化した選択範囲とマスクの作成
●UI/UXデザインツールの大本命、Adobe XDの私が大好きな便利な機能をすべて紹介
●2023年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
●ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
●フォントやタイポグラフィの知識・テクニックを学ぶまとめ
●無料で高品質！レスポンシブ対応のWordPressのテーマファイルのまとめ
●プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる
●写真がもっと楽しくなる！写真画像をワンランク上に仕上げるPhotoshopのアクションのまとめ
●黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
●黄金比をサイトのデザインに取り入れる簡単な3つの方法
●フェルメールやゴッホ、北斎など西洋・日本の名画を楽しめるサイト集
● 美しい日本語を使いたい、ワンランク上のビジネスメールの作法
●著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと
Recommend
国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書︵レビュー記事︶
Adobeの進化がすごすぎる！ 生成AIによるデザインの新しい作り方が学べるデザイン書︵紹介記事︶
top of page
Category
●サイト構築 -調査・分析
●サイト構築 -設計
●サイト構築 -制作
●サイト構築 -ユーザビリティ
●サイト構築 -ライティング
●サイト構築 -デザイン
●サイト構築 -CSS
●サイト構築 -JavaScript
●サイト構築 -スタイル ガイド
●サイト構築 -検証
●サイト構築 -運用・更新
●SEO対策・検索エンジン
●WordPress
●WordPressのプラグイン
●Freebies︵無料素材︶
●ウェブ サービス
●ハードウェア
●ソフトウェア・アプリケーション
●ブラウザ
●ブラウザ -Internet Explorer
●ブラウザ -Firefox
●ブラウザ -Opera
●ブラウザ -Safari
●ブラウザ -Chrome
●書籍紹介、書評
●Life︵ライフハック︶
●Digress︵雑記・お知らせ︶
●Sitemap︵記事一覧︶
Blog Info
●follow me on Twitter
●subscribe to my RSS
●Powered by WordPress
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
©2024 coliss
Awesome CSS Frameworks -GitHub
下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。
●ベース・リセットCSS・ノーマライズ
●クラスレスのCSSフレームワーク
●超軽量のCSSフレームワーク
●汎用性に優れたCSSフレームワーク
●Material DesignのCSSフレームワーク
●ユーティリティベースのCSSフレームワーク
●特化型のCSSフレームワーク
●ツールキット
Water.css
MITライセンス
シンプルなWebサイトの見栄えをすこし素敵にする、Just-add-CSSのスタイル集です。
参考: シンプルなWebサイトを少しだけ美しくするためのスタイルシートのコレクション -water.css
MVP.css
MITライセンス
HTML要素のためのミニマリストなスタイルシート集。
参考: 必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css
sakura
MITライセンス
ミニマルで、クラスレスのCSSフレームワーク。
参考: CSSが苦手な人、CSSを書く時間がない人に最適！見栄えのよいページを簡単に作成できるスタイルシート -sakura
Tacit
MITライセンス
ダミーサイトをさくっと作成するためのCSSフレームワーク。
awsm.css
MITライセンス
クラスや属性などのないセマンティックHTMLマークアップ用のCSSライブラリ。
Pure
BSDライセンス
すべてのWebプロジェクトで使用できる、超軽量でレスポンシブ対応のCSSモジュールのセット。
Milligram
MITライセンス
ミニマルなCSSフレームワーク。
Picnic CSS
MITライセンス
軽量で美しいCSSのライブラリ。
Chota
MITライセンス
3Kbの本当に超軽量のCSSフレームワーク。
Bootstrap
MITライセンス
レスポンシブ対応、モバイルファーストのプロジェクトを開発するための最も人気のあるHTML、CSS、JavaScriptフレームワーク。
参考: Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説
Bulma
MITライセンス
FlexboxをベースにしたモダンなCSSフレームワーク。
参考: ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma
Foundation
MITライセンス
先進的で、レスポンシブ対応のフロントエンドフレームワーク。
UIkit
MITライセンス
高速でパワフルなWebインターフェイスを開発するための軽量でモジュール化されたフロントエンドフレームワーク。
Primer
MITライセンス
GitHubのフロントエンドデザインを支えるCSSフレームワーク。
Carbon Components
Apacheライセンス
IBMのCarbon Design Systemを支えるコンポーネントライブラリ。
Fomantic UI
MITライセンス
簡潔なHTML、直感的なJavaScript、シンプルなデバッグで美しいWebサイトを素早く構築するCSSフレームワーク。
Pico.css
MITライセンス
ネイティブHTML要素のためのエレガントなスタイル、ダークモードが自動的に有効になります。
Blaze UI
MITライセンス
スケーラブルで保守可能な基盤を備えたWebサイトを素早く構築するための優れた構造を提供するオープンソースのモジュール式ツールキット。
Base
MITライセンス
堅実でレスポンシブ対応のCSSフレームワーク。
Cirrus
MITライセンス
プロトタイプのために設計された、コンポーネントとユーティリティ中心のSCSSフレームワーク。
Turretcss
MITライセンス
アクセシブルでセマンティックなWebサイトのためのレスポンシブ対応のフロントエンドフレームワーク。
Vanilla Framework
GNU Lesser General Public License v3.0
シンプルで拡張可能なCSSフレームワーク。
Pattern Fly
MITライセンス
エンタープライズのWebアプリ用のUIフレームワーク。
HiQ
MITライセンス
レスポンシブ対応のタイポグラフィと入力スタイルを備えたシンプルなCSSフレームワーク。
Material Components Web
Apache License 2.0
モジュール式でカスタマイズ可能な、Web用のマテリアルデザインUIコンポーネント。
MUI
MITライセンス
Googleのマテリアルデザインのガイドラインに沿った軽量なCSSフレームワーク。
Materialize
MITライセンス
Googleのマテリアルデザインのガイドラインに基づくレスポンシブ対応のフロントエンドライブラリ。
Tailwind CSS
MITライセンス
UIを迅速に開発するためのユーティリティファーストのCSSフレームワーク。
参考: CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク﹁Tailwind CSS﹂
参考: Tailwind CSSが私には合わなかった理由
Tachyons
MITライセンス
CSSを書かずにさまざまなUIを素早く構築および設計できるCSSフレームワーク。
Open Props
MITライセンス
一貫性のあるデザインを実装するためにCSS変数︵カスタムプロパティ︶で構成されたCSSフレームワーク。
参考: これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
98.css
Windows98風インターフェイスを構築するためのCSSフレームワーク。
Tufte.css
Edward Tufteの本や配布物で示されたアイデアを使用してWebページをスタイルするCSSフレームワーク。
Gutenberg
Webページを正しく印刷するためのモダンなフレームワーク。
XP.css
Windows XPのようなインターフェイスを構築するためのCSSライブラリ。
Bojler
レスポンシブ対応で、軽量なメールテンプレートを開発するためのフレームワーク。
TuiCss
MS-DOS風インターフェイスを作成するためのCSSフレームワーク。
7.css
Windows 7のようなインターフェイスを構築するためのCSSライブラリ。
Bourbon
軽量なSassのツールセット。
sponsors
国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書︵レビュー記事︶
Adobeの進化がすごすぎる！ 生成AIによるデザインの新しい作り方が学べるデザイン書︵紹介記事︶
top of page