今日、サイトの作成はIT分野で最も人気のあるタスクの1つと考えられています。 ITは世界経済の重要な原動力であり、 世界中で毎日40,000以上の新しいサイトが作成されています。 アナリストによると、2019年も、この数は大幅に増加します。
フレームワークとは何かを知らない開発者はいません。 本当に時間を節約することができるため、Webサイトの作成ではCSSをよく使用します。 CSSフレームワークは、各WebデザイナーがWebサイトを作成するために必要なツールを提供します。 あなたも、ダウンロード速度がサイト品質において非常に重要な要素であることを知っていることでしょう。
知らない人のために説明しておくと、フレームワークは大切なソフトウェア開発のさまざまな要素の作成と組み合わせを容易にし、加速するソフトウェアです。
#1 Pure CSS
PureはYAHOOによって開発されたカスケードスタイルシート（CSS）です。 速くて美しく、反応のよいウェブサイトを作るのを助けます。 このフレームワークは高度に最適化されており、作業する際の快適さを向上させます。
Pure CSSは最小のフレームワークの1つで、gzip形式でわずか3.8 KBですが、 膨大な数の機能があります。 Pure CSSは、アウトソーシングのためにソフトウェア開発者のチームと仕事をするときを含めて、長年にわたって最も単純なモデルと考えられています。
Pure CSSはNormalize.css上に構築されていて、HTML要素、そしてユーザーインターフェースの最も一般的なコンポーネントのためのレイアウトとスタイルを提供します。 これはまさに自由な仕事のために必要なものです。
Pure CSSはレスポンシブフレームワークであり、その要素はすべての画面サイズで作業しながらでもきれいに見えます。
Pure CSSには最小限のスタイルしかありません。ですが、 Pure CSSの上にアプリケーションスタイルを作成することができます。これは、 独自のスタイルを作成するときに開発者を邪魔しないように作られたためです。
クリーンCSSには、HTML、CSS、JavaScript、DOM（Document Object Model）、およびあらゆるテキストエディタの基本的な知識が必要です。 大きな利点は、Webアプリケーションがどのように機能するかを理解できることです。
#2 Bootstrap
このフレームワークは、TwitterのMark OttoとJacob Thorntonによって開発されたもので、内部のTwitterツール間の一貫性を保証します。 Pure CSS Bootstrapは、最も一般的で広く使用されているインターフェースシステムの1つです。 ブートストラップを使用すると、（ゼロから）大きなコードを書き込むのに必要な時間が短縮されます。
このようなフレームワークを使用すると、ページ作成プロセスが大幅にスピードアップします。 標準スタイルは簡単に変更でき、サイトモデルを作成するための柔軟で簡単なプロセスを提供します。
HTMLリセットは“Reboot”と呼ばれる単一のモジュールにあります。 HTMLリセットは、デフォルトのブラウザで設定されている通常のCSSスタイルを置き換える、一連のスタイルです。 これらは、CSSが接続されていなくてもページが機能する場合に見られます。 それらがレイアウトプロセスを損なわないようにされているため、無効になることもありません。
flexboxの組み込みサポートはユーザーに多くの利点を提供します。 Flexboxはhtml5の最も強力なコンポーネントです。そのおかげで、開発者の望みに応じて、レイアウトはテーブルのように、またはブロックのセットのように動作します。通常、開発者はブロックレイアウトがfloaを使用して実行されないように、しかしflexboxに基づいてCSSを再コンパイルします。
フレームワークのクールなコンポーネントはSass変数と、より構造化されたフレームワークシステムです。 良いことに、フレームワークは改善され、古い間違いや新しい間違いも修正されています。
#3 Milligram
Milligramは、迅速でクリーンな出発点のための最小限のスタイリングを提供します。 わずか2KBのgzip形式で、この小さいながらも強力な構造は、軽量フレームのTop 3に入ります。Milligramには、必要なものがすべて揃っています（グリッド、テーブル、フォーム、ヒント、ボタン、その他のツール）。
CSS Milligramは、 “root em”を表すremブロックを含む、新しい単位を導入しています。 remモジュールはhtmlルート要素のフォントサイズを参照します。 これは、ルート要素に1つのフォントサイズを定義し、合計に対する割合としてすべてのrem単位を定義できることを意味します。 文字体裁のフォントサイズは16ピクセル、行の高さは24ピクセルです。 Milligramは、Christian RobertsonがGoogle用に作成したRobotoフォントファミリーを使用しています。
ボタンは、すべてのユーザーインターフェイスに不可欠な部分です。 Milligramのボタンには3つのスタイルがあります。ボタン要素はデフォルトで色の傾向に基づいて単色になります。一方、.button-outlineは単純なアウトラインを持ち、.button-clearは完全に明確なアウトラインを持ちます。
リストは、与えられたCSSの要素を表示するためには、非常に普遍的で一般的な方法です。 Milligramには3種類のリストがあります。番号なしリストはul要素を使用し、等高線でマークされ、番号付きリストはol要素を使用し、ユーザーの要素は番号でマークされ、dl要素は説明リストで使用されます。 要素はラベル付けされません。
始めるにはいくつかの方法があります。 まず、CSSで利用可能なすべてのダウンロードオプションを確認してから、ニーズに最も適したオプションを選択します。 これで、メインのMilligramとCSSのリセットファイルをプロジェクトのヘッダに追加する必要があります。 それで全部です！ これだけでもう始めることができます。
#4 Bulma
Bulmaは21KBのミニチュアを持ち、このフレームワークはgzip形式で動作します。 Bulmaはこのリストの中では最も簡単なフレームワークではありませんが、この新しい構造はとても興味深いのでリストアップしました。 Bulmaは、テクノロジの流動性を考慮して作成されました。
これにより、フレームワークの各要素が縦書き用にできるだけ最適化されます。 グリッドは完全にFlexboxを使って構築されています。 Bulmaで同一の列を使用して柔軟なレイアウトを実現するのは、HTML要素に.columnクラスを追加するのと同じくらい簡単です。 唯一の欠点は、JSがないことです。
頻繁に使用される、必要なクラスに対してのみパッケージを最適化するため、モジュール式のsass構造を提供します。
#5 UIkit
UIkitは高速で強力なWeb開発のための簡単でモジュラーなインターフェースです。
UIKitフレームワークは、iOSまたはtvOSアプリケーションに必要なインフラストラクチャを提供します。 作成者のインターフェイスを作成するためのウィンドウアーキテクチャ、アプリケーションでマルチタッチやその他の入力タイプを配信するためのイベント処理インフラストラクチャ、およびユーザー、システム、およびアプリケーション間の対話を管理するために必要な基本起動サイクルを提供します。
その他のインフラストラクチャ機能には、アニメーションのサポート、ドキュメントのサポート、描画と印刷のサポート、現在のデバイス情報、テキストの制御と表示、検索のサポート、ユーザー補助のサポート、アプリケーション拡張のサポート、およびリソースプロジェクトの管理があります。
メインアプリケーションスレッドまたはメイン送信キューからのみUIKitクラスを使用するのが最善です。 この制限は、特にUIResponderから派生したクラス、またはアプリケーションのユーザーインターフェイスの制御に適用されます。
#6 Skeleton
Skeletonは広く普及しています。 わずか400行のコードにもかかわらず、グリッド、タイポグラフィ、フォーム、メディアクエリなど、速く高品質なWebサイトを作成するために必要なすべてが含まれています。
ほとんどの場合、Skeletonは小さなWebサイトプロジェクトを作成する必要があるときや、Webサイトを作成するときに、フレームワークの一部の機能しか必要としないときに使用されます。Skeletonは標準的なHTML要素を様式化し、グリッドを含んでいますので、ウェブサイトを作成するのに十分です。
実際、ウェブサイトは200行程度のカスタムCSS（その半分はドッキングナビゲーションになります）で構築されます。 その後、モバイルデバイスに基づいてサイトを作成するために400行が使用されます。 Skeletonのスタイルは出発点用であり、ユーザーインターフェイス用ではありません。 最初からコンパイルするか、必要なスタイルをインストールする必要があります。
#7 Base
Baseは非常にシンプルですが、信頼性の高いフレームワークです。 軽量で最小限のコードの原則に基づいて構築されたBaseは、開発者やデザイナーにクロスブラウザやモバイルアプリケーションを簡単に作成する方法を提供するために作成されました。
Baseそれ自体は、Normalize.cssといくつかのmixinを必要とする、非常に薄いフレームワークです。これらのニュアンスを完成させた後、タイポグラフィ、グリッド、個々のコンポーネントなど、必要な機能を有効にすることができます。
Baseフレームワークの最も興味深い機能は次のとおりです。
1.ベースアニメーションは非常に薄いレイヤーで、コンテンツをフェードインするためのアニメーションが含まれています。
2.ベースボタンは、ボタンやリンクを装飾するためのスタイルを含む非常に薄いレイヤーです。
3.ベースコンテナはコンテナのスタイルを含む非常に薄いレイヤです。
4.ベースフォームには、入力、テキストエリア、ラジオ、フラグ、その他のフォーム要素のスタイルが含まれています。
5.ベースグリッドには、テンプレート用の行と列を持つ柔軟なグリッドのスタイルが含まれています。 基本テンプレート。 テンプレートヘルパーには、フィールド、レイアウト、フロートの再設定、さまざまな種類の位置の設定、および柔軟なヘルパーのためのスタイルが含まれています。
#8 Spectre
あなたのプロジェクトのための軽量（〜10KB gzip）出発点となります。 Spectreは、優雅にデザインされた要素と柔軟でモバイルフレンドリーなコンポジションを提供します。
Spectreは、タイポグラフィと要素の基本的なスタイル、柔軟な機能に基づく柔軟なモデルシステム、きれいなCSSコンポーネント、そしてベストプラクティスとシーケンシャル言語を備えたユーティリティを提供します。
Spectreのいくつかの利点：
1.美しい要素デザイン。
2.あなたのアイデアを具体化するための壮大な機会。
3. JavaScriptがないため、非常に軽量（たとえば、Bootstrapよりも100％軽量）であり、CSSをあまり使用しません（gzip形式でBootstrapよりも74％軽量です）。
4. Flexboxを使った使いやすいデザイン。
#9 Dead Simple Grid
Dead Simple Gridは、Vladimir Agafonkinによって作成された柔軟な微細構造/ CSSグリッドの概念です。 熟練したプログラマーはしばしばこのフレームワークをMalevichの黒い四角格子と呼びます。
そして利点は：
1.サイズが小さく（約250バイト）、依存関係がありません。
2.2つのクラス – 行と列のみです。
3.無限のデータフローをサポートし、本物のレスポンシブデザインを可能にします（メディアクエリの列設定の変更）。
4. IE 8以降、すべての主要ブラウザをサポートしています。漸進的な改善とモバイルの概念を備えた、古いブラウザ用の単一行のモバイルコンポジションを提供します。
Simple Gridは12桁の軽量CSSグリッドです。 レスポンシブWebサイトを迅速に作成するのに役立ちます。 CSSスタイルシートをダウンロードし、レイアウトに適切なクラスを追加すれば、作業を開始でき、すべてが簡単です。
各列は、コンテナー内に保持されている行内に含まれています。 コンテナの最大幅は960ピクセルですが、そのプロパティを壊さずに編集できます。
#10 Picnic CSS
それはgzip形式でわずか3 KBの重さです。 Picnicは、その重さにもかかわらず、優れた多機能Webサイトを作成するために必要なすべてを備えた、間違いなく優れたフレームワークです。Picnicを使用しながら、HTMLと混在するクラスを作成する必要はありません。 これは大きな利点です。
Picnicは完全にモジュール化されているので、簡単に修正するか、一部分のどれでもテストすることができます。また、Picnicを任意のプロジェクトに統合して、それを機能させることもできます。
Picnicはその作業を簡単にするために多くの変数とクラス（フィラー）でSCSSで書かれています。Picnicでは細くて慎重に作られたCSSスイッチをたくさん見つけることができるでしょう。興味深い事実として、マルチステップフォームを制御するためのJavaScriptの単一行がありません。
Picnic開発者たちは高い目標を設定しました – 速いモバイルダウンロードのための非常に圧縮されたCSS（10 KB以下）を作成すること。 そして彼らはそれを達成したのです。
これらのツールでより優れたWeb開発を
ご覧のとおり、フレームワークはWebサイト開発者にとって不可欠な要素です。 あなたはCSSなしではウェブサイトを作成できません。 CSSは多くの機能を実行し、サイトのグリッド、テーブル、フォーム、ヒント、ボタンや他の要素を作成するのに役立ちます。 最も人気のあるフレームワークはMilligram、BootstrapとPure CSSです。
おすすめ新着記事
おすすめタグ