コアポイント

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

Webレイアウトのコーディングは、CSSグリッドレイアウトやFlexBoxなどの最先端のCSS標(biāo)準(zhǔn)の助けを借りて、もはや苦痛ではありません。グリッドとフレックスボックスのブラウザのサポートが非常に優(yōu)れている場(chǎng)合、質(zhì)問が必然的に発生します。なぜ開発作業(yè)でCSSフレームワークを?qū)W習(xí)して使用する必要があるのですか？

この記事では、おそらく利用可能なすべてのCSS UIライブラリの中で最も人気のあるものであるため、ブートストラップに焦點(diǎn)を當(dāng)てます。

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

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

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

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

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

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

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

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

CSSについては、ここで視覚的なレイアウトを構(gòu)築します。この簡(jiǎn)単な例では、コードの數(shù)行のみが必要です。

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

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

<div class="grid">
  <header>頁(yè)眉內(nèi)容</header>
  <main>主要內(nèi)容</main>
  <aside>側(cè)邊欄</aside>
  <footer>頁(yè)腳</footer>
</div>

執(zhí)筆時(shí)點(diǎn)で、インターネット全體の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変數(shù)とミキシン、レスポンシブメッシュシステム、多數(shù)の事前に構(gòu)築されたコンポーネント、および強(qiáng)力なjQueryベースのプラグインを使用して、アイデアを迅速にプロトタイプまたはアプリケーションを構(gòu)築します。

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

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

また、

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

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

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

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

Bootstrapに反対する主な理由は、CSSメッシュを使用して、CSSには外部依存関係がない獨(dú)自のメッシュシステムがあり、學(xué)習(xí)すると、開発者がさまざまなレイアウトを簡(jiǎn)単に構(gòu)築できるようにすることです。

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

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

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

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

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

さらに、CSSの専門家でない場(chǎng)合でも、テクニックを?qū)W習(xí)しながらWebデザインにブートストラップの力を使用できます。

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

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

少量のマーキングを追加するだけで、プロトタイプにはスタイリッシュなレスポンシブナビゲーションバーまたは素?cái)长圣ⅴ椹`ムボックスがあります。

Bootstrapで構(gòu)築されたレガシーWebサイトの処理

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

結(jié)論

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

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

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

ブートストラップを聞いたことがあるが、複雑すぎるように見えるために學(xué)習(xí)を遅らせている場(chǎng)合は、ブートストラップ4入門コースを?qū)Wび、ブートストラップの力について簡(jiǎn)単かつ簡(jiǎn)単に學(xué)ぶことができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

CSSグリッドレイアウトを使用することの利點(diǎn)は何ですか？

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

CSSフレームワークを使用することの利點(diǎn)は何ですか？

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

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

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

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

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

以上がCSSグリッドレイアウトとCSSフレームワークの議論の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。