CSSフレームワーク
CSSフレームワークは、カスケーディングスタイルシート言語を用いて、より簡単で標準に準拠したウェブデザインを可能にするライブラリです。これらのフレームワークのほとんどには、少なくともグリッドが含まれています。より機能的なフレームワークには、より多くの機能とJavaScriptベースの追加関数も含まれていますが、主にデザイン指向で、インタラクティブなUIパターンに重点を置いています。この点が、CSSフレームワークと他のJavaScriptフレームワークの違いです。
注目され、広く使用されている 2 つの例として、BootstrapとFoundation があります。
CSS フレームワークはさまざまなモジュールとツールを提供します。
- スタイルシートをリセットする
- レスポンシブWebデザインに特化したグリッド
- ウェブタイポグラフィ
- スプライトまたはアイコンフォントのアイコンセット
- ツールチップ、ボタン、フォームの要素のスタイル設定
- アコーディオン、タブ、スライドショー、モーダルウィンドウ（ライトボックス）などのグラフィカルユーザーインターフェースの一部
- 同じ高さのコンテンツを作成するためのイコライザー
- よく使われる CSS ヘルパークラス ( left、hide )
より大きなフレームワークでは、 LessやSassなどの CSS インタープリターが使用されます。
注目すべきCSSフレームワークのリスト
| 名前 | 最新リリース | ライセンス | グリッド | ユニット | 特徴 | 列数 | |
|---|---|---|---|---|---|---|---|
| バージョン | 日付 | ||||||
| 青写真 | 1.0.1 | 2011年5月14日[1] | MITライセンス | タイポグラフィ、フォーム、印刷、ボタン、タブ、スプライト用のプラグイン。 | |||
| ブートストラップ | 5.3.3 | 2024年2月20日[2] [3] [4] | MITライセンス （Apacheライセンス3.1.0より前） | 固定、流動的、応答性 | ピクセル、% | レイアウト、タイポグラフィ、フォーム、ボタン、ナビゲーション、メディア クエリ、.sass ファイル、JavaScript ライブラリ、RTL レイアウト。 | 任意、 デフォルト12 [5] |
| 財団 | 6.7.5 | 2022年7月13日[6] | MITライセンス | 流体 | ピクセル、% | レスポンシブ レイアウト、ソース順序、タイポグラフィ、フォーム、ボタン、ナビゲーション、メディア クエリ、JavaScript ライブラリ。 | 任意、 デフォルト12 [7] |
| ヤムル | 4.1.2 | 2013年7月28日[8] | CC-BY 2.0 | 固定、弾性、流動性 | ピクセル、em、% | レイアウト、グリッド、列、フォーム、ボタン、レスポンシブ レイアウトのプログレッシブ線形化、フロート処理、ナビゲーション、タイポグラフィ、アクセシビリティ、アドオン。(アクセシブルなタブ、RTL サポート、マイクロフォーマット) | どれでも |
| YUI CSS グリッド | 3.18.1 | 2014年10月22日[9] | BSD -3 | 固定と流動 | |||
| 追い風 | 3.4.3 | 2024年3月27日[10] [11] | MITライセンス | 固定、流動的、応答性 | どれでも | ||
参照
- レイアウトエンジンの比較（カスケーディングスタイルシート）
参考文献
- ^ “Releases · joshuaclayton/blueprint-css · GitHub”. GitHub . 2020年4月23日閲覧。
このリポジトリは所有者によってアーカイブされており、現在は読み取り専用です。
- ^ “Releases · twbs/bootstrap · GitHub”. GitHub . 2014年6月1日時点のオリジナルよりアーカイブ。2021年11月15日閲覧。
- ^ Déramond, Julien (2024年2月20日). 「Bootstrap 5.3.3」. blog.getbootstrap.com . 2024年4月11日閲覧。
- ^ "bootstrap". npm . 2024年2月20日. 2024年4月11日閲覧。
- ^ Bootstrapドキュメント - グリッドのカスタマイズ
- ^ “リリース · foundation/foundation-sites · GitHub”. GitHub . 2020年4月24日閲覧。
- ^ Foundation ドキュメント - The Grid
- ^ “Releases · yamlcss/yaml · GitHub”. GitHub . 2020年4月24日閲覧。
- ^ “リリース · yui/yui3 · GitHub”. GitHub . 2020年4月24日閲覧。
- ^ “リリース · tailwindlabs/tailwindcss”. GitHub . 2024年4月11日閲覧。
- ^ "tailwindcss". npm . 2024年3月27日. 2024年4月11日閲覧。
