CSSグリッドレイアウトとCSSフレームワークの議論

コアポイント

• CSSグリッドレイアウトとブートストラップなどのCSSフレームワークは、Web開発では異なって使用されます。 CSSグリッドを使用すると、開発者はネイティブCSSコードを使用して複雑なページレイアウトを構築できますが、Bootstrapは事前に設計されたコンポーネントを提供して、迅速かつ効率的にWebページを作成するためのコンポーネントを提供します。
• CSSメッシュは柔軟性と独立性を提供しますが、ブートストラップは、既製のコンポーネント、カスタマイズの容易さ、およびプロトタイプツールとしての実用性を備えたフロントエンド開発に関連しています。これは、Bootstrapで構築されたレガシーWebサイトの開発者にとって特に便利です。
• CSSグリッドレイアウトとCSSフレームワークの選択は、プロジェクトの特定の要件に依存します。 CSSメッシュは、複雑なメッシュベースのデザインに最適であり、ブートストラップは事前に設計されたコンポーネントとスタイルで時間と労力を節約します。また、両方のツールを利用するために一緒に使用することもできます。

Webレイアウトのコーディングは、CSSグリッドレイアウトやFlexBoxなどの最先端のCSS標準の助けを借りて、もはや苦痛ではありません。グリッドとフレックスボックスのブラウザのサポートが非常に優れている場合、質問が必然的に発生します。なぜ開発作業でCSSフレームワークを学習して使用する必要があるのですか？

この記事では、おそらく利用可能なすべてのCSS UIライブラリの中で最も人気のあるものであるため、ブートストラップに焦点を当てます。

私の意見では、今日でも、ブートストラップを学び、使用する理由はまだたくさんあります。

以下にはいくつかの理由があります。

CSSグリッドとは何ですか？

レイチェル・アンドリュー（CSSグリッド関連で有名なスピーカーおよびライター）は、次のように定義しています。

グリッドはグリッドシステムです。タグで定義することなく、CSSの列と行を定義することができます。グリッドのように見えるようにするためのツールは必要ありません。実際にグリッドがあります！

このCSS標準の実装により、開発者は、グリッドを含むラッパー要素を除き、HTMLタグに依存しないネイティブCSSコードを使用してページレイアウトを構築する必要がある非常に必要な機能を提供します。 Webデザインの柔軟性と創造性の可能性を想像してください！

たとえば、この簡単なレイアウトを作成するには、タグにカスタムクラスや追加の行が必要ありません。

HTMLコードは次のとおりです

CSSについては、ここで視覚的なレイアウトを構築します。この簡単な例では、コードの数行のみが必要です。

それだけです、あなたは終わった！悪くない。

ブートストラップとは何ですか？

<div class="grid">
  <header>页眉内容</header>
  <main>主要内容</main>
  <aside>侧边栏</aside>
  <footer>页脚</footer>
</div>

執筆時点で、インターネット全体の3.6％がブートストラップを使用しています：

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 150px 50px;
}

header, footer {
  grid-column: span 12;
}

main {
  grid-column: span 8;
}

aside {
  grid-column: span 4;
}

Bootstrap Webサイトでは、次の定義があります。

Bootstrapは、HTML、CSS、およびJSを使用して開発されたオープンソースツールキットです。 SASS変数とミキシン、レスポンシブメッシュシステム、多数の事前に構築されたコンポーネント、および強力なjQueryベースのプラグインを使用して、アイデアを迅速にプロトタイプまたはアプリケーションを構築します。

言い換えれば、Bootstrapは、すぐに美しいWebページを作成できるようにする既製のコンポーネントを提供します。

対応するタグを書くだけで、アプリケーションはすぐに見栄えがよくなります。

また、

ブートストラップにより、外観とスタイルを簡単にカスタマイズでき、プロジェクトに必要なコンポーネントを選択して選択できます。

グリッドがあるときにブートストラップを使用する必要があるのはなぜですか？

ブートストラップに関する最大の不満は、常にコード肥大化です。その理由は、多くのプロジェクトでは使用されていない追加のCSSコードが含まれているためです。 2番目に大きな不満は、ブートストラップコンポーネントのスタイルが非常に詳細であることであり、特定のCSSルールを上書きするときにいくつかの問題を引き起こす可能性があることです。

この人気のあるフロントエンドコンポーネントライブラリの最新バージョンに基づいて、これらの批判はどちらも維持できません。ブートストラップは完全にモジュール式であるため、必要な部分を含める必要があります。さらに、SASSファイルの構造により、ニーズに合わせて元のスタイルをカスタマイズするのが非常に便利です。

Bootstrapに反対する主な理由は、CSSメッシュを使用して、CSSには外部依存関係がない独自のメッシュシステムがあり、学習すると、開発者がさまざまなレイアウトを簡単に構築できるようにすることです。

私はCSSグリッドのファンですが、ブートストラップはまだフロントエンド開発の場所を持っていると思いますが、今後しばらくの間そうです。

以下は少なくとも3つの理由です。

ブートストラップは、グリッドシステムだけではありません

はい、Bootstrapを使用する主な理由は、便利なグリッドシステムであり、レスポンシブなWebページの構築を簡単にします。ただし、Bootstrapには、多用途の新しいカードコンポーネントなど、いくつかの優れたコンポーネントがあります。これは、テキスト、画像、ビデオ、レスポンシブナビゲーションバーなど、さまざまな種類のコンテンツを箱から表示するために使用できます。また、ほとんどのコンポーネントに対して好みのプリセット配色を選択することもできます。

これらのコンポーネントの多くはどうですか？ブートストラップを使用して、ダイナミックツールチップ、カルーセル、またはドロップダウンボタンを追加するだけで、対応するマークアップを書き込むだけです。 JavaScriptのスキルがあなたの長所ではない場合でも、JavaScriptコードの単一行を記述せずにこれらのコンポーネントを利用できます。

さらに、CSSの専門家でない場合でも、テクニックを学習しながらWebデザインにブートストラップの力を使用できます。

Bootstrapは素晴らしいプロトタイプツールです

顧客に利用可能なプロトタイプを提供する必要がある場合があります。 Bootstrapを使用すると、すぐにこれを行うことができ、カスタムコードはほとんど必要ありません。これは、グリッドシステムだけでなく、提供するすべての既製のコンポーネントにも適用されます。

少量のマーキングを追加するだけで、プロトタイプにはスタイリッシュなレスポンシブナビゲーションバーまたは素敵なアラームボックスがあります。

Bootstrapで構築されたレガシーWebサイトの処理

開発者の一般的なタスクは、他の開発者によって書かれた既存のWebサイトに対処することです。多数のウェブサイトがブートストラップに依存してフロントエンドを構築することは否定できません。コードベースをリファクタリングして維持する必要がある場合は、フレームワークの使用方法を知るのが非常に便利です。多くの職務情報が必要なスキルリストにBootstrapを含むことは偶然ではありません。

結論

全体として、ブートストラップは短期的には消えません。最新バージョンは、SASS Mixinやマッピングの巧妙にカスタマイズするためのマッピングから、新しいコンポーネント、ユーティリティクラス、モジュラーアーキテクチャの導入まで、以前のバージョンから大幅に改善されました。

ブートストラップは、優れたドキュメントと使いやすさと組み合わされて、フロントエンドエコシステムの強力な競合他社のままです。

どう思いますか？次のプロジェクトは、ブートストラップまたはCSSグリッドを使用して構築されますか？

ブートストラップを聞いたことがあるが、複雑すぎるように見えるために学習を遅らせている場合は、ブートストラップ4入門コースを学び、ブートストラップの力について簡単かつ簡単に学ぶことができます。

CSSグリッドレイアウトとCSSフレームワークに関するFAQ

CSSグリッドレイアウトとCSSフレームワークの主な違いは何ですか？

CSSグリッドレイアウトとBootstrapなどのCSSフレームワークは強力なWebデザインツールですが、目的は異なります。 CSSグリッドレイアウトは、行と列を使用して複雑なWebレイアウトを作成できるCSSモジュールです。これはCSSのネイティブ機能です。つまり、作業に追加のライブラリやプラグインを必要としません。一方、CSSフレームワークは、Webデザインのプロセスを簡素化するために設計された事前に準備されたライブラリです。それらには、簡単にカスタマイズして再利用できるボタン、フォーム、ナビゲーションバーなどの事前に設計されたコンポーネントが付属しています。

CSSグリッドレイアウトはCSSフレームワークよりも優れていますか？

CSSグリッドレイアウトがCSSフレームワークよりも「優れている」かどうかは、プロジェクトの特定のニーズに依存します。 CSSグリッドレイアウトにより、Webレイアウトに対する柔軟性と制御が向上し、複雑なグリッドベースのデザインに最適な選択肢となります。ただし、BootstrapのようなCSSフレームワークは、事前に設計されたコンポーネントとスタイルを提供することで時間と労力を節約できます。大規模なプロジェクトに取り組んでいる場合、またはウェブサイトを迅速に開始する必要がある場合は、CSSフレームワークがより良い選択かもしれません。

CSSグリッドレイアウトとCSSフレームワークは一緒に使用できますか？

はい、CSSグリッドレイアウトとCSSフレームワークを一緒に使用できます。実際、多くの開発者はCSSグリッドレイアウトを使用してWebページの全体的なレイアウトを作成し、CSSフレームワークを使用してこれらのページに個々のコンポーネントを作成します。このアプローチを使用すると、両方のツールを利用できます。

CSSグリッドレイアウトとCSSフレームワークの代替品は何ですか？

CSSグリッドレイアウトとCSSフレームワークには多くの選択肢があります。 CSSグリッドレイアウトの一般的な代替品には、FlexBoxおよびCSSマルチカラムレイアウトが含まれます。これらは、柔軟なレイアウトの作成を可能にするネイティブCSSモジュールでもあります。 CSSフレームワークの一般的な代替品には、基礎、Bulma、Tailwind CSSが含まれます。これらは、さまざまな機能とスタイルを提供する他のCSSフレームワークです。

CSSグリッドレイアウトとCSSフレームワークを選択する方法は？

CSSグリッドレイアウトとCSSフレームワークのいずれかを選択する場合、プロジェクトのニーズと開発者としてのスキルと好みを考慮してください。レイアウトを多くの制御が必要で、CSSを使用することを好む場合は、CSSグリッドレイアウトを好む場合があります。事前に設計されたコンポーネントを使用したい場合、Webサイトをすばやく起動する場合は、CSSフレームワークがより良い選択肢になる場合があります。

ブートストラップはCSSフレームワークですか？

はい、ブートストラップはCSSフレームワークです。これは、今日入手可能な最も人気のあるCSSフレームワークの1つであり、そのレスポンシブデザイン、事前に設計されたコンポーネント、幅広いドキュメントで知られています。

CSSグリッドレイアウトを使用することの利点は何ですか？

CSSグリッドレイアウトにはいくつかの利点があります。行と列で複雑なレイアウトを作成することができます。これは、CSSのネイティブ機能であり、追加のライブラリやプラグインを必要とせず、Webレイアウトを多くの柔軟性と制御を提供します。

CSSフレームワークを使用することの利点は何ですか？

CSSフレームワークはいくつかの利点を提供します。事前に設計されたコンポーネントとスタイルを提供することで時間と労力を節約できます。多くの場合、開発者コミュニティによって十分に文書化され、サポートされています。

CSSグリッドレイアウトを始める方法は？

CSSグリッドレイアウトを開始するには、HTMLとCSSの基本を理解する必要があります。そこから、オンラインのチュートリアル、ドキュメント、プラクティスを通じてCSSグリッドレイアウトの詳細について詳しく知ることができます。

CSSフレームワークを始める方法は？

CSSフレームワークを開始するには、HTMLとCSSの基本も理解する必要があります。そこから、ニーズに合ったCSSフレームワークを選択し、ダウンロードし、そのドキュメントと機能の調査を開始できます。

以上がCSSグリッドレイアウトとCSSフレームワークの議論の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。