ブートストラップを使用してレスポンシブWebサイトを構築するための初心者向けガイド–パート1

最終更新日：2019年6月5日

この記事は、Bootstrap Frameworkの基本原則を使用して、レスポンシブWebサイトを迅速かつ効果的に作成する方法についてWeb開発者を教育することを目的としています。 これにより、制作コストが削減され、企業は開発者がWebサイトやページを簡単に管理および構築できるようになります。 Bootstrapフレームワークをダウンロードするプロセスと、このフレームワークをWeb開発の取り組みに使用する利点について説明します。

Bootstrapとは何ですか？

Bootstrapの公式ウェブサイト（getbootstrap.com）によると、「Bootstrapは、ウェブ上でレスポンシブでモバイルファーストの開発プロジェクトに最も人気のあるHTML、CSS、JavaScriptフレームワークです」。 簡単に言うと、Bootstrapは非常にシンプルなフレームワークであり、フロントエンドWeb開発を高速化するだけでなく、さまざまなスキルレベルの開発者にアピールするのに役立ちます。

なぜBootstrapを使用するのですか？

大型ディスプレイ、通常のディスプレイ、電話、タブレットなど、さまざまなメディア向けのWebサイトを設計できる可能性があるため、Bootstrapは非常に魅力的であり、Webコンテンツを作成するための賢い選択です。 Bootstrapなどのフレームワークは、ハードコーディングを必要としないさまざまな機能と応答性のためにWebサイトを最適化するために、簡単に変更できる汎用機能を提供します。 つまり、WordPressサイトとは異なり、Webサイトを構築し、カスタマイズする機能を備えた最も簡単な方法の1つです。

どうやって始めるのか

Bootstrapの使用を開始するには、Bootstrapの公式Webサイト（http://getbootstrap.com/）にアクセスする必要があります。 Bootstrapはオープンソースプロジェクトであり、GitHubでホスト、開発、保守されています。 これにより、ユーザーはソースコードにアクセスし、Webサイトを構築するためのツールとしてフレームワークの全範囲を理解することができます。

Bootstrap（v3.3.6）の現在のバージョンをダウンロードするには、3つの方法があります。コンパイルされたバージョンのBootstrapをダウンロードする方法、Bootstrapソースコードをダウンロードする方法、BootstrapフレームワークをLessからSassに移植する方法です。 この場合、初心者の場合は、コンパイルされたバージョンのBootstrapをダウンロードすることをお勧めします。 BootstrapフレームワークをRails、Compass、またはSassのみのプロジェクトに統合する場合は、ダウンロードをLessからSassに移植する必要があります。

Boostrapファイルをダウンロードしたら、圧縮フォルダーを解凍して、準拠したBootstrapフレームワークの構造を確認する必要があります。 ファイル構造を確認するには、以下を参照してください。

これで、これらのファイルを作業中のWebプロジェクトのファイルシステムにドロップし、Bootstrapを使用して、目的のプロジェクトを設計および構築することができます。 この投稿のパート2で詳しく説明するBootstrapの機能の詳細については、getboostrap.com Webサイトにアクセスして、フレームワークでアクセスできるコンポーネント、CSS機能、およびJavaScript関数を確認してください。

レスポンシブデザイン

レスポンシブデザインは、Bootstrapフレームワークの特徴的な機能の1つです。 Bootstrapを使用して迅速に開発する機能により、開発者は、すべての表示プラットフォームで適切にフォーマットできる単一のWebサイトを開発できます。 多くの場合、Webサイトは適切に設計でき、ユーザーエクスペリエンスは1つの特定のプラットフォームまたは画面サイズでのみ最適です。 Bootstrapは、開発者が小さい画面で読み取るときにWebページの特定の列を特定のサイズに割り当てることができるようにすることで、これらの問題に対処するためのすばらしい仕事をします。 レスポンシブウェブサイトを作成するときにBootstrapが説明するデバイスには次の4種類があります。

• 極小デバイス（スマートフォン<768px）
• 小型デバイス（タブレット> = 768px）
• 中型デバイス（デスクトップ> = 992px）
• 大型デバイス（デスクトップ> = 1200px）

開発者は、これらの上記のクラスにタグを追加して、特定のWebコンテンツを縮小、拡大、非表示、または特定のプラットフォームで表示するように設定できます。 これは、Webサイトのルックアンドフィールを構築するプロセスを簡素化するのに非常に役立ちます。

グリッドシステム

Bootstrapには、レスポンシブWebサイトの設計にフレームワークを使用できるようにする主な機能であるグリッドシステムがあります。 Bootstrapのすべての行は、コンテナクラスに配置する必要があります。その後、後続の行を特定のサイズとして定義できます。

グリッドシステムの表記法の例を次に示します。

• 事前定義された行クラスは行を生成します
• その行内で、2番目のクラスは「col-md-6」を指定します
• これは、クラスがWebページ全体で6列にまたがる列を生成していることを意味します
• 「md」は、これが768ピクセル以下の中型デバイスまたはデスクトップでのみ発生することを指定します。
• 「オフセット」クラスは、これらの列が空白のままになることを意味します。 この場合、オフセットは3であるため、コンテンツの一部を埋めるために3つの列に空白スペースが残されます。
  このグリッドシステムにより、開発者はコンテンツのセクションをすばやく定義し、コンテンツ間に適切な間隔を空けて、クリーンでレスポンシブなデザインにすることができます。

Bootstrapの課題

すべてのBootstrapファイルを直接ダウンロードすると、JavaScriptファイルとCSSファイルのサイズが大きくなります。 これは、高速ページを作成するときにいくつかの課題につながる可能性があります。 これは、ブートストラップファイル内のすべてのファイルが完全に使用されているわけではなく、不要なデータのダウンロードが問題になる可能性があるためです。 これはユーザーエクスペリエンスに影響を与える可能性があるため、投稿「ブートストラップの基本を使用してユーザーエクスペリエンスを強化する方法」（https://moz.com/ugc/how-to-use-bootstrap-）にアクセスして、これについてさらに詳しく確認してください。 Basics-to-enhance-user-experience）。

レスポンシブでクリーンなウェブサイトデザインを構築するための素晴らしいフレームワークであるBootstrapをぜひお試しください。 Bootstrapに関するより多くの最初の概念を取り上げる、シリーズの次の投稿にご期待ください。

著者：Esme Vazquez、ジュニアWeb開発者

メーカー、アーティスト、ゲーマー、コーダー、ウェブ開発者、ブロガー。 Esmeは、コンテンツ管理ブログサイトMediumの最近のブログ出版物Indiellectの作成者です。 彼女の現在の経験は、Web開発とゲーム開発にあります。 彼女は現在、ThatでSEOに取り組んでおり、トレーニングを受けています。 フロリダ州リーズバーグにある会社で、ジュニアWeb開発者として働いています。 彼女は将来、人類の美しさを表現したビデオゲームを作ることを目指しています。 ご不明な点がございましたら、@ EsmeVazquez18でツイートするか、LinkedInに追加してください。