『HTML/CSS』の次はこれ！Bootstrapで初心者から抜け出そう

HTMLとCSSを学習したとき、「１ページ作るだけでも気が遠くなりそう…」と思いませんでしたか？

反対に、世の中では「簡単なLP（ランディングページ）なら２、３時間で作れるよ！」なんて言う方もいらっしゃいます。しかし、この発言は嘘ではありません。

なぜなら、Webサイトに必要なページの種類や、基本となるデザインはある程度決まっているからです。その上で、本業でサイト制作をしている方なら、それまでに書いたコードを使い回すことで、時間を大幅に短縮できます。

つまり、コーディングするために利用できる「見本」があれば、初心者でも制作時間を短縮できるということです。そこで、Bootstrap（ブートストラップ）を学習しておきましょう。

Bootstrapを使うと、簡単にレイアウトを変更できる上に、最低限の装飾がされているため、時間をかけずにWebページの枠組みを作ることができます。

使い方も、HTMLファイルに数行のコードをコピペするだけなので、基本操作を覚えて、今後のWeb制作に活用していきましょう。

この記事では、効率良くコーディングできるBootstrapの使い方や、学習方法について解説しているので、ぜひ参考にしてください。

Bootstrapの概要

まずは、Bootstrapの概要について簡単に解説します。Bootstrapとは、CSSとJavaScriptが組み込まれているフレームワークです。

Bootstrapは、基本となる構造やデザインが決まっているため、ある程度ルールに沿って作っていく必要があります。その代わり、レスポンシブデザインに対応しています。

レスポンシブデザインとは？

レスポンシブデザインとは、ディスプレイの大きさに合わせてレイアウトを最適に変更できるデザインのことです。

例えば、PC用・タブレット用・モバイル用を全て１つのファイルで作り、自動的に切り替えて下記の通りに表示できます。

最近では、スマートフォンでWebサイトを見ることが多いため、レスポンシブデザインに対応していることはWeb制作の最低条件と言っても良いでしょう。

ですから、コーディングは主にPCで行いますが、必ずモバイル用の表示も確認してください。

Bootstrapを使うメリット

続いて、Bootstrapを使うメリットについて、もう少し詳しく解説していきます。Bootstrapを使うメリットは大きく３つあります。

このうち、レスポンシブデザインに対応していることは前述しました。Bootstrapの基本的なルールを守ってコーディングすれば、自動的にレイアウトを調整してくれます。

では、残りの２つについて説明していきます。

制作時間を短縮できる理由

Bootstrapを使うと制作時間を短縮できます。なぜなら、レイアウトの変更が簡単だからです。具体的に説明すると、要素の場所を簡単に移動できます。

Web制作をしていて、「このブロックを右側に寄せられないかな？」なんて悩んだ経験はありませんか？Bootstrapでは、「flexbox」と呼ばれる仕組みが基本になっているため、簡単なコードで要素の位置を調整できます。

使い方も簡単で、classの中に必要なコードを書くだけで調整可能です。

動きのあるページが作れる

Bootstrapを使えば、JavaScriptに詳しくない方でも「動き」のあるWebページを作ることができます。なぜなら、最初からJavaScriptが組み込まれた状態で設計されているからです。

そのため、公式サイトに載っているコードをコピペするだけで実装可能です。ただ、できればJavaScriptの基礎知識を学んだ上で利用することをおすすめします。

もちろん、それぞれ複数の表現方法があり、カスタマイズすることも可能です。

Bootstrapにはデメリットもある

とても便利なBootstrapですが、デメリットが３つあります。

では、それぞれ簡単に解説していきます。

デザインが似てしまう

Bootstrapを使うと、どうしてもデザインが似てしまいます。なぜなら、基本的なルールやデザインが決まっているからです。

もちろん、自分でカスタマイズすることはできます。しかし、大幅に変更するなら、最初からBootstrapを使わない方が作りやすいかもしれません。

ですから、複雑なデザインのWebサイトには向かないと言えます。

公式サイトの日本語がわかりにくい

Bootstrapは公式サイトを見れば、誰でも無料で使うことができます。導入方法や具体例などが、きれいにまとめられているからです。

しかし、日本語に翻訳された文章は表現がわかりにくいため、少し戸惑う方が多いでしょう。そのときは、実装した表示を見ながら進めてください。

➡︎ Bootstrapの公式サイトを見てみる

最低限の学習が必要

Bootstrapを使うためには、導入方法やコンポーネント（ボタン・ナビなどの部品）についての知識が必要になります。

もちろん全て覚える必要はなく、公式サイトで確認しながらコーディングすれば問題はありません。ただし、定期的に行われるバージョンアップの際は、コードの書き方や読み込むファイルが変わるので注意してください。

Bootstrapの使い方

では、Bootstrapの使い方を簡単に解説します。Bootstrapを使う場合は２つの方法があります。

では、それぞれ説明していきます。

CDNで読み込む

Bootstrapを簡単に使うなら、CDNで読み込む方法がおすすめです。具体的には、公式サイトにある「スターターテンプレート」のHTMLファイルをコピペするだけで、誰でも簡単に始められます。

➡︎「スターターテンプレート」を見る

CDNとは、ネットワーク上にあるデータをファイルで読み込むことで利用する仕組みです。最初は、手軽に使えるCDNでBootstrapを試してみてください。

ファイルをダウンロードする

「必要なファイルだけを使いたい」など、条件がある場合はBootstrapファイルをダウンロードする方法がおすすめです。

ファイルをダウンロードすることで、必要なファイルのみを抜き出して使うこともできます。詳しく知りたい方は、公式サイト「ダウンロード」のページで確認してください。

Bootstrapの学習方法

Bootstrapの公式サイトを見れば、誰でも無料で使い方を学ぶことができます。もちろん、利用するときに確認すれば良いため、コードを覚える必要もありません。

ただ、公式サイトでは「どのように使うのか？」を理解しにくいです。そこで、Bootstrapのおすすめの学習方法を３つご紹介します。

では、順番に解説していきます。

YouTubeで学ぶ

Bootstrapの学習をするなら、Webページの動きを実際に目で見て確認できる「動画」がおすすめです。１つ前のバージョンのBootstrap４であれば、YouTubeを使って無料で学習できます。

Bootstrapを学べるチャンネルは「たにぐち まことのともすたチャンネル」です。

たにぐち まことさんは、ご自分でWeb制作会社を立ち上げたり、書籍やオンライン学習教材を販売するなどの実績がある方です。その中のひとつに、YouTubeがあります。

なお、Bootstrap５（最新のバージョン）を学習したい場合は、YouTubeの有料メンバーシップに登録が必要です。月額990円で最新の情報を入手することができます。

➡︎【Bootstrap５ マスター講座】を見てみる

Udemyで学ぶ

Udemy（ユーデミー）とは、約13万の動画コースから選んで学習できるサービスです。動画には視聴期限がないため、忙しい方でも自分のペースで学習できます。

各コースごとに料金が異なりますが、定期的にセールを行っており、実際は2,000円以下で購入できることが多いです。（90％OFFになることもあります）

ただし、2021年10月現在、Bootstrap５には日本語のコースがありません。とはいえ、プログラミングはコードの書き方とディスプレイの表示を見れば、言葉がわからなくても理解することは可能です。

Udemyで人気があり評価が高い英語の学習コースを載せておきますので、興味のある方は確認してみてください。

➡︎ Bootstrap５の人気コースを見てみる

本で学習する

Bootstrapの場合、本の使い方は学習するというよりも、「すぐに確認できるよう手元に置いておく」という表現の方が正しいです。

なぜなら、公式サイトでも同じ内容が学習できるからです。しかし、Webより本の方が、必要な情報が書いてあるページを早く調べられるため便利です。

ただ、残念ながら2021年10月現在では、下記でご紹介しているBootstrap４の解説本までしか発行されていません。

ですから、最新情報を学ぶなら公式サイトか動画サービスを利用しましょう。

効率良くコーディングをしよう

Web制作を学んだばかりの初心者は、簡単なデザインのページを作るだけでも時間がかかります。なぜなら、効率良くコーディングする方法を知らないからです。

ですから、Bootstrapのような便利な仕組みを覚え、過去に自分で書いたコードを使い回すことで、Web制作のスピードを上げていきましょう。

ちなみに、複数のページを組み合わせてWebサイトは作られます。しかし、情報を更新するごとに、その都度ページをアップロードするのは面倒です。

このとき、「WordPress」を使っていれば、簡単にWebサイトの更新ができます。ちなみに、世界中のWebサイトの約40％がWordPressを使っているそうです。

ですから、Webサイトを作りたいならWordPressの学習も必要です。なお、WordPressの学習方法についても、⬇︎の記事で解説しているので、ぜひ参考にしてください。

➡︎ 初心者でも難しくない！WordPressを独学してWebサイトを作ろう

Web制作に使われている言語は、次々にバージョンアップしていきます。そのため、新しい情報を学んでいく必要があり、ベテランであっても古い知識のままでは取り残されてしまうかもしれません。

そこで、効率良くコーディングする方法をたくさん学んで、自分のレベルを上げていきましょう。