トップ21のHTML5 / CSS3グリッドシステムとフレームワーク

ほんの数年前の従来のデザイン手法では、ホームページをすべて単独でデザインし、ワイヤーフレームとコンテンツボックスをつなぎ合わせて、最高のものを期待する必要がありましたが、徐々にこの手法はなくなり、新しい、より現代的な、迅速なWebサイト開発の手法になりました。出現しました。 特に、CSS3はFlex-boxを導入しました。これは、コンテンツレイアウトの作成に使用できる使いやすいグリッド機能ですが、それでも、抵抗力のあるものもあれば、絶対的な設計精度のためにさらに複雑なアプローチを採用するものもあります。

新しいWebサイトを開くと、通常、サイトのヘッダー部分、コンテンツ領域、サイドバーが表示されます。これらの主要な領域には、独自のデザインレイアウトと仕様も含まれており、うさぎの穴はさらに深くなっています。 すべてのメディア、デバイス、およびソフトウェアで見栄えのするホームページ（またはその他のページ）レイアウトを設計する方法を見つけることが重要です。 そのため、グリッドレイアウトを開発するためのCSSおよびHTMLフレームワークとシステムのコレクションをまとめることは、他の開発者にとって役立つかもしれないと考えました。

より多くのフレームワークが必要ですか？ 他のまとめを試してください：

• JavaScriptフレームワーク
• HTML5フレームワーク
• CSS3フレームワーク
• Node.jsフレームワーク

言うまでもなく、これらのデザインはどのような状況にも適応できるため、デザインレイアウト自体のねじれや癖を解決する必要がなく、グリッドボックスを必要なコンテンツで満たすことに集中する代わりに、頭痛の種から身を守ることができます。そこに置く。 これらのグリッドシステムにはさまざまなスタイルがあり、デモページにアクセスして、探しているものを書き留めておくと、一致するフレームワークを簡単に見つけることができます。あなたのニーズに合わせて。

デッドシンプルグリッド

グリッドは決して複雑であってはなりません。本質的には、グリッドは全体的なデザインをまとめたHTML要素にすぎず、VladimirAgafonkinはその概念を採用している開発者の1人です。 彼のグリッドフレームワークであるDeadSimple Gridは、わずか200バイトのCSSコードで提供されます。 これは非常に最小限のコードであり、ページはそこにあることに気付くことさえありません。グリッドを分離してメインコンテンツ領域と、必要に応じて柔軟なサイドバーを表示できます。 この種のグリッドは、最小限のデザインが好まれるブログや一般的なホームページのレイアウトに適しています。 メディアクエリのおかげでレスポンシブデザインが統合されているため、グリッドは、使用されているどのデバイスでも完璧に見えます。

バーボンニート

Bourbonは、SASSプリプロセッサ用のミックスインの非常に成功したライブラリです。 もちろん、これにより、NeatはすでにBourbonとSASSを使用している人にとって魅力的な選択肢となっています。 Neatを使用すると、開発者は数分でセットアップするのに十分な速度と簡単さを備えながら、無制限の変更や調整が問題にならない程度の柔軟性を備えた流体グリッドシステムにアクセスできます。

Grd

Grdは、柔軟で最新のレスポンシブレイアウトを作成するためのバックエンドツールとしてFlexboxを使用するCSSグリッドシステムです。 ライブデモを使用すると、設定やさまざまなデザインのカスタマイズを試して、Grdが特定のデザイン要素を既存のワークフローに統合するという問題を解決できるかどうかを確認できます。 設定のドロップダウンだけを使用して、ヘッダー、フッター、および一般的なコンテンツ領域を簡単に作成できることがわかりました。

構造

同じくFlexboxに基づくStructureは、セクションとレイアウトパラメーターを定義するために宣言型構文パターン（Angular.jsのものと同様）を使用します。 一部の開発者は、ページの最終的なマークアップを検証できないと不満を述べていますが、Structureを使用すると、クラスやID名などの従来のCSS属性を台無しにしない宣言型グリッドを作成できるという考えです。

960グリッドシステム

何十万ものWebサイトが、NathanSmithの960グリッドシステムを使用してデザインレイアウトを強化しています。 これは、勤勉なWeb開発者のワークフローを合理化するための効率的なツールです。 2つの異なる列レイアウト（それぞれ12と16）を選択することで、開発者はあらゆる種類の動的入力と静的入力をサポートするホームページをすばやくブートストラップできます。 さらに列を追加することは可能ですが、使用法をより明確に理解するには、ドキュメントを操作する必要があります。

非セマンティック

Unsemanticは、完全なレスポンシブデザイン機能を提供する960グリッドのフォローアップバージョンです。 独自のプルクラスを通じて、開発者は作成しているページのレイアウトを再配置できます。これは、検索エンジンが各コンテンツ要素の目的をよりよく理解するのに役立つ既知の戦略である、最も重要なコンテンツをいつでも宣伝および紹介するのに役立ちます。 Unsemanticはメディアクエリの誇り高いユーザーでもあるため、確立されたフロントエンド開発者は、自分のニーズに合わせてこのグリッドフレームワークをカスタマイズするのに苦労することはありません。

シンプルグリッド

そのため、Simple Gridという名前は、シンプルさと使いやすさを追求するすべての人を対象としています。 レイアウトはレスポンシブで、スマートフォン、タブレット、デスクトップコンピューターと互換性があります。 言い換えれば、あなたのプロジェクトのパフォーマンスは疑いの余地なく一流になります。 大画面や高解像度にも完全に調和しています。 また、Simple Gridは単なるグリッドであり、追加のアセットがないため、非常に軽量です。 便利な12列構造により、お好みに合わせたレイアウトを自由に作成できます。 あなたはそれを2、3、4または6列に完璧に分割することができます。

csswizardry-grids

csswizardry-gridsのようなHTMLグリッドを使用すると、時間とエネルギーを節約できます。 心ゆくまで正確に活用できる堅牢なツールです。 それは非常にユーザーフレンドリーで簡単に構造化され、すべてのレベルのWeb開発者がそれを最大限に活用できるようにします。 上のスクリーンショットでは、csswizardry-gridsがサポートするさまざまなバリエーションをすべて確認できます。 あなたは物事を自由に並べ替えることができるので、それはあなたの欲望をティーに合わせます。 今すぐcsswizardry-gridsを使ってゼロから物事を実行することを避けて活動を行い、右足から始めてください。

深遠なグリッド

深遠なグリッドが提供する自由は、それ以上のものです。 この柔軟で拡張可能なグリッドシステムは、固定レイアウトと流動レイアウトの両方に使用できます。 結果は、箱から出してスムーズにバターを塗るすべての最新のデバイスで機能します。 好みに応じて列を変更、削除、または追加することで、必要な構造を正確に作成できます。 最初にいくつかの例をチェックして、ProfoundGridで何が可能かを確認できます。 さらに、列を計算するときにマージンが負になるため、Profound Gridは、画面サイズやWebブラウザーに関係なく、流動的なレイアウトが同じように表示されることを保証します。

グリドル

グリッドシステムを使用することの利点は、時間を節約できるだけでなく、技術的なことを心配する必要がないため、非常に大きなものです。 たとえば、Griddleは、一般的なデバイスやWebブラウザとの完全な互換性を保証します。 つまり、アプリケーションのパフォーマンスは常に一流になります。 Griddleを使用すると、比例グリッドやネストされたグリッドから、中央に配置されたハイブリッドユニットまで、あらゆるものを実現できます。 後者に関しては、いくつかのカスタマイズを行うことで、固定ユニットと流動ユニットを1つの印象的なビルドに組み合わせることができます。 ユニットの水平方向の中央揃えを制御でき、垂直方向の配置を変更することもできます。

CSSスマートグリッド

CSSスマートグリッドは、さまざまなデバイスとの互換性を確保するために、最新のトレンドと規制に従います。 つまり、このツールは軽量で応答性が高く、モバイルファーストであるため、壮大なものを作成できます。 スマートフォンを使用する場合でも、大きなデスクトップ画面を使用する場合でも、CSSスマートグリッドはレイアウトが問題なく両方で動作することを保証します。 参考までに、誰かがフィーチャーフォンを使用してインターネットを閲覧している場合でも、CSSスマートグリッドに基づくプロジェクトは、単一の列ビューで同様に機能します。 公式ウェブサイトでは、簡単な方法もあるので、ツールを使用するときに問題は発生しません。

Gridlex

Gridlexは、その優れたデザインと使いやすさで際立っています。 このFlexboxベースのグリッドフレームワークのシンプルさは驚くべきものであり、ビジョンはシンプルです。列をグリッド内にラップし、必要に応じて追加の調整を行って、最終的なデザインを魅力的に見せます。 Gridlexを使用するWebサイトのデモを見るだけで、これが最上位のグリッドシステムであり、独自のプロジェクトやワークフローで何ができるかに失望することはありません。

レスポンシブグリッドシステム

レスポンシブグリッドシステムには、完璧なドメイン名、明確なビジョン、レスポンシブグリッドデザインを簡単にするために必要なツールなど、多くのメリットがあります。 グリッドジェネレーターは、使用する列の数と列の間に表示するマージンを指定できる簡単なフォーム入力を提供します。[送信]をクリックすると、コード出力の準備が整います。あなたの次のレスポンシブグリッドレイアウトの。 著者のグラハムは、あなたが望むなら、あなたのためにすべての大変な仕事を喜んでやってくれます。あなたはページのフッターで彼と連絡を取ることができます。

グリッドリー

開発者は、今日の最新のブラウザをサポートするための最小限のグリッドレイアウトシステムとしてGridlyを構築しました。 軽量な構造であるため、開発者は、グリッド/列のレイアウトを簡単に立ち上げて実行することができます。 全体として、このライブラリのサイズがとてつもなく最小であるため、今後のプロジェクトにもっと多くのことを望んでいます。

フォームストーン

Formstoneは、それ自体が単一のマネージドグリッドシステムではありません。実際には、日常的に遭遇する従来のWebページを構成する高度にカスタマイズ可能なコンポーネントとWeb要素を必要とするフロントエンド開発者向けのライブラリです。 モジュール式で応答性が高く自動化されたライブラリである— Formstoneは、大規模なWebサイトプロジェクトをスケーリングする目的だけでなく、グリッドレイアウト自体の使用にも使用できます。

ブートストラップ

他のすべてが構築されたグリッドシステムがなかったら、Bootstrapは今日どこにあるでしょうか？ Bootstrap 4が到着するのをまだ待ち望んでいますが、それまでの間、今世紀で最も著名なフロントエンドフレームワークの1つとしての地位を確立したフレームワークに「はい」と言うのは仕方がありません。 何百万ものWebサイトがBootstrapの機能を利用していますが、Bootstrapのコアに統合されたグリッドフレームワークがなければ、それは不可能でした。

財団

Foundationは、レスポンシブデザインをサポートする、もう1つの成功したフロントエンドライブラリです。最新バージョン（Foundation 6）は、開発者がクライアントに信じられないほど用途の広いデザインを提供するのに役立つ、さらに最新の機能と要素を提供します。 Foundationが提供する使いやすいテンプレートを使用すると、このグリッド開発のすべてから休憩を取り、代わりに重要なもの、つまりグリッド自体に配置するものに集中することができます。

スケルトン

スケルトンは美しく自然なデザインで、もっと欲しくなるでしょう。 クリエイターは、スケルトンの背後にあるアイデアを、小さなプロジェクトに最適な選択肢として形成しました。 また、本格的なフレームワークを使用するのが適切だと思わないプロジェクトでも使用できます。 Skeletonは、Webサイトのプロトタイプを稼働させるために必要な必需品を提供します。 グリッドレイアウト、見出しとセクションのタイポグラフィオプション、すべてのフォームニーズに対応するボタン要素、実際にはカスタムフォームなので、独自のコードを作成する時間を節約でき、リスト、テーブル、コード構文、メディアを追加できます。フレームワークをクエリして、デザインが完全にレスポンシブになるようにします。

レスポンシブグリッドシステム2

レスポンシブグリッドシステム（バージョン2）は、サイズが非常に小さいが、スタイルが非常に効果的なモバイルファーストのグリッドシステムです。 さまざまな列レイアウト（24、16、12）から選択できます。 列間の余白とパディングをカスタマイズしたり、ポリフィルを使用して優れたデザインレイアウトを作成したりすることもできます。

次のプロジェクトのためのレスポンシブグリッドシステム

次のプロジェクトのレスポンシブグリッドシステムは、960グリッドシステムと同じクラスを使用します。 これは、最初にモバイル訪問者にサービスを提供するように構築されており、ヘッダー管理の定型文を提供します。 開発者はそれをすべての最新のブラウザでテストしたので、あなたは良い手にあります。 これを、レスポンシブWebデザインの構築に役立つベースグリッドシステムとして使用できます。 これにより、一般的なグリッドシステムに対する既存の習熟度が維持されます。

HTML5ボイラープレート

HTML5ボイラープレートは、フロントエンド開発者向けの堅牢なボイラープレートフレームワーク（テンプレート）です。 これは、BootstrapやFoundationなどのより大きなフレームワークに煩わされることなくプロジェクトをキックスタートしたい開発者向けです。