ブートストラップと純粋な CSS グリッド: 比較ガイド

素晴らしい皆さん、私のブログへようこそ! ?

導入

Bootstrap または純粋な CSS グリッドを選択するタイミングと理由を深く理解しましょう。この記事では、Web プロジェクトについて情報に基づいた意思決定を行うのに役立つ、ニュアンスを説明し、視覚的な支援を提供し、実践的な例を提供します。

この記事で学べること?

• ブートストラップの基本: グリッド システム、カスタマイズ、実際の使用法。

• Pure CSS Grid: その仕組み、最新機能、利点。

• 視覚的な比較: 概念を視覚的に説明するレイアウトの例。

• 現実世界のアプリケーション: ケーススタディとシナリオ。

• インタラクティブな要素: 実践的な体験のためのコード例。

• ツールとリソース: 詳細を確認してサポートを受ける場所。

ブートストラップを選ぶ理由? ?

• 速度: すぐに使用できるクラスを使用すると、応答性の高いレイアウトを迅速に構築できます。

• 一貫性: さまざまなプロジェクト間で統一されたデザインを維持します。

• コミュニティとエコシステム: 広範なドキュメント、チュートリアル、サードパーティの拡張機能。

ブートストラップ グリッド システム

Bootstrap のグリッドは、レスポンシブ ブレークポイントを備えた 12 列のレイアウトに基づいています:

html

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

カスタマイズ

TL-DR: ブートストラップは、SCSS 変数を介して、またはブートストラップ カスタマイズ ツールを使用してカスタマイズできます。デフォルトのグリッドを変更する方法は次のとおりです:

$grid-columns: 16;
$grid-gutter-width: 30px;

カスタマイズについてすでに知っている場合は、次のパートをスキップして、実際の使用例: E コマース テンプレートに進みます。

カスタマイズの詳細 :

Bootstrap は、Web サイトの外観と動作をカスタマイズするさまざまな方法を提供します。

SCSS 変数

ブートストラップは SCSS で構築されており、変数を使用して広範なカスタマイズが可能です。

• 色: 基本の配色、ボタン、背景色を変更します。

• タイポグラフィ: フォント サイズ、ファミリー、ウェイトを調整します。

• 間隔: デフォルトの間隔スケールまたはグリッドの余白幅を変更します。

例:

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

ブートストラップ カスタマイズ ツール

SCSS に慣れていない人、または簡単なカスタマイズを希望する人向け:

• ブートストラップ カスタマイザーにアクセスして、変数を調整したり、含めるコンポーネントまたは除外するコンポーネントを選択したり、ブートストラップのカスタム ビルドをダウンロードしたりできます。

効果的なカスタマイズのためのヒント

• 変数から始める: 始めたばかりの場合、フレームワークを深く掘り下げずにカスタマイズする最も簡単な方法は、変数を変更することです。

• クイック プロトタイプにカスタマイザーを使用する: SCSS ファイルを変更せずに、さまざまな外観をテストするのに最適です。

• カスタム ビルドの作成: 特定の要件を持つプロジェクトに取り組んでいる場合、Bootstrap のカスタム ビルドを作成すると、未使用のコンポーネントを削除してファイル サイズを削減できます。

• Sass 部分ファイル: ブートストラップはコンポーネントごとに部分ファイルを使用します。プロジェクト内で同じ名前の独自のパーシャルを作成することで、これらをオーバーライドできます。

これらの追加の詳細を提供することで、読者は、単純な変数の変更から、よりパーソナライズされたバージョンの Bootstrap の作成に至るまで、カスタマイズ プロセスをより明確に把握できます。

実際の使用例: E コマース テンプレート ?

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

Codepen で完全な例を確認してください。

HTML (上記の Codepen の例) は、Bootstrap クラスを使用して次のレイアウトを作成します。

• 固定上部ナビゲーション バー。
• メイン コンテンツ領域内のグリッド システム。8 列の製品リストとカートの 4 列のサイドバーに分割されます。
• 商品やカートの外観を向上させる、境界線、パディング、背景色などの追加スタイル用のカスタム CSS。

カスタム スタイルはいくつかの基本的なスタイルを提供しますが、Bootstrap のデフォルト スタイルは、レスポンシブ デザインとコンポーネント スタイルに関する重労働のほとんどを実行します。 Bootstrap は高度にカスタマイズできるように設計されているため、これらのスタイルを簡単に変更したり、SCSS を使用して変数を変更してよりカスタマイズされた外観にすることができることを覚えておいてください。

純粋な CSS を選択する理由?

• コントロール: フレームワークの制約のない完全な設計の自由度。

• パフォーマンス: ファイル サイズが小さく、外部依存関係がありません。

• 最新機能: サブグリッドやコンテナ クエリなどの最新の CSS 機能を利用します。

CSS グリッドのセットアップ: CSS グリッドを使用すると、最小限のマークアップで複雑なレイアウトが可能になります:

$grid-columns: 16;
$grid-gutter-width: 30px;

ビジュアル:

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

最新の CSS 機能

• サブグリッド: TLDR 親グリッド内でネストされたグリッドを整列させるため。

• コンテナ クエリ: TLDR ビューポートではなく独自のサイズに応答するコンポーネント用。

サブグリッド

大きなグリッドがあり、そこにいくつかのボックスが配置されていると想像してください (壁にあるフォトフレームなど)。さて、これらの大きなボックスの 1 つに小さなボックスを入れたいと考えていますが、これらの小さなボックスは大きなグリッドの線と完全に一致するようにしたいと考えています。

サブグリッド は、大きな壁のグリッドのパターンと一致する透明な方眼紙を大きな箱の中に入れるようなものです。こうすることで、小さなボックスを配置するときに、大きなボックス内だけでなく、壁全体に対しても整列させることができます。

例:

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+---+---+
| 1     |
+---+
| 2 |
+---+

ビジュアルコンセプト:

$grid-columns: 16;
$grid-gutter-width: 30px;

コンテナクエリ

コンテナ クエリは、壁 (ビューポート) のサイズだけでなく、壁の各ボックスにそのボックス自体のサイズに基づいてどのように見えるかを決定する機能を与えるようなものだと考えてください。

通常、Web サイトをレスポンシブにするときは、画面全体の幅に基づいて変更するように指示します。しかし、サイドバーなど、ページの一部が広くなったり、狭くなったりした場合はどうなるでしょうか? コンテナ クエリ を使用すると、このサイドバーはページの残りの部分に影響を与えることなく、独自のコンテンツを調整できます。

例:

// _variables.scss

// Change primary color
$primary: #3498db;

// Adjust font size
$font-size-base: 1rem;

// Increase grid gutter width
$grid-gutter-width: 30px;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

ビジュアルコンセプト:

<div>



<p><strong>Visual:</strong><br>
</p>

<pre class="brush:php;toolbar:false">+--------+--------+
|Product |Cart    |
|List    |Sidebar |
+--------+--------+

これは、各コンポーネントが独立して適応できることを意味し、設計をよりモジュール化して柔軟にすることができます。

ケーススタディ: 個人ブログ ?

ブートストラップ は次の目的で選択される可能性があります:

• クイックセットアップ : テンプレートまたはスターターキットを使用してすぐに起動したい場合。

純粋な CSS グリッド は次の場合に適しています。

• カスタム デザイン : Bootstrap のデフォルトに適合しない独自のレイアウトが必要な場合。

Codepen の例:

(以下のリンクを確認してコードを取得してください。)

Codepen サンプルのコードは、ヘッダー、ナビゲーション バー、メイン コンテンツ領域、最近の投稿のサイドバー、フッターを備えた基本的なブログ レイアウトを設定します。レイアウトには CSS Grid が使用され、応答性のためにメディア クエリが含まれています。

各アプローチを選択する場合

• Bootstrap : サイトのさまざまな部分にわたる設計の一貫性が重要な場合や、Bootstrap に精通したチームで作業する場合など、迅速な展開が必要なプロジェクトに最適です。

• 純粋な CSS : デザインを完全に制御したい場合、依存関係を減らしたい場合、または最新の CSS の高度な機能を活用する準備ができている場合に、これを選択します。

ツールとリソース ?

ブートストラップ

• ブートストラップのドキュメント

• ブートストラップ カスタマイザー

• ブートストラップ テーマ

純粋な CSS グリッド

• CSS グリッドの MDN Web ドキュメント

• CSS-Tricks による CSS グリッド ガイド

• 例によるグリッド

結論

Bootstrap と純粋な CSS Grid のどちらを選択するかは、どちらが優れているかということではなく、プロジェクトのニーズとスキル レベルにどちらが合うかによって決まります。 Bootstrap は、初心者や迅速な開発が必要なプロジェクトに最適な構造化されたアプローチを提供します。 Pure CSS Grid は、レイアウトを正確かつ創造的にペイントしたい人にキャンバスを提供します。

Web 開発の取り組みが進むにつれて、プロジェクトの要求に応じて、両方を組み合わせるか、一方から他方に移行することが最善の選択であることがわかることがあります。

探索を続け、学習を続け、コーディングを続けてください。 ?

---

?こんにちは、私はエレフテリアです。コミュニティ マネージャー開発者、講演者、コンテンツ クリエイターです。

?この記事が気に入ったら、共有することを検討してください。

? すべてのリンク | X | LinkedIn