bootstrapとは？コーディング初心者にもわかりやすく解説

『bootstrap』をご存じですか？

『bootstrap』を使えば、キレイなサイトを簡単に作れます。ちょっとHTMLとCSSの知識は必要ですが。

今回は、CSSのフレームワーク『bootsrtap』とはなにか、説明しますね。

この記事はこんな人向け

HTMLとCSSの知識はあるけど、フレームワークってよくわからない人が対象です。

「bootstrapってなんだよ！」
「フレームワークってなんだよ！」

って人向けです。わかりやすく簡単に書きました（書いたつもり）

この記事を読んでできること

『bootstrap』と『フレームワーク』とは何かがわかり、素早くコードを書く方法がわかります。

そして、ワードプレスのテーマを探すように、血眼でCSSのフレームワークを探すようになります。もろ刃の剣だぞ！

『bootstrap』とはなんぞや？なにかできるの？

「ブーストラップ」じゃないぞ！『ブートストラップ』だ！気をつけような！！

（ずっとブーストラップだと思ってました）

bootstrapとは『あらかじめ様々なclassを装飾したCSS』を読み込んで、簡単にページを作るものです。

たとえば、青いボタンを作ってみます。

ボタン

ボタンのコードは下のようになってます。

See the Pen blue-button by ガクマーケの井上 (@mawwas) on CodePen.

キレイなボタンを作りたいなら、もっとCSSを書き込むので、そこそこめんどくさいです。

ところが、bootstrapをつかえば、ボタンに関するクラスがCSSで用意されています。それをHTMLのクラスに突っ込めば、いい感じのボタンが作れるのです！

実際に、bootstrapで用意されているクラスを使ってみると、こんな感じ。

すげぇ！　俺が作るよりキレイなボタンだ（血涙）！！！！

こんな感じで、bootstrapは『あらかじめ様々なclassを装飾したCSS』を使うことで、簡単にキレイなサイトを作れます。

フレームワークってなんだよ

bootstrapで検索すると、よく出てくる『フレームワーク』って言葉。カタカナばっかりで困りますね。

フレームワークとは『プログラミングの土台・標準』になるものです。

たとえば、AさんとBさんに『この画面に表示されたボタンと、全く同じボタンを作って』と頼みます。

すると、見た目は同じボタンができますよね。でも、HTMLのクラス名とかCSSの装飾はバラバラになるんです（順番とか）。

CSSがバラバラだと、他人がそのCSSを修正しようとしたとき、「このボタンのCSSどうなってんのかわからん」と非効率的。

また、複数人で分担してCSSを書いたとき、class名が競合して、CSSが崩れることもあります。

しかし、フレームワークを使うと、みんな同じCSSになるのです。ボタンのクラス名が競合することもありません。

今のはCSSのフレームワークについての例え話ですが、他のプログラミング言語でも同じです。

JavaScript でサイトに動きをつけるとき、同じ動きでも人によりプログラムは異なります。それを他人がみると、混乱するのは必須。

しかし、jQuery（JavaScriptのフレームワーク）を使えば、同じプログラミングになり、管理しやすいのです。

あと、自分で書くと大量になるコードも、フレームワークなら数文字です。らくちん！

『bootstrap』はなんで流行ってるの？

CSSのフレームワークといえば、bootstrapがメジャーです（最近はちょっと下火らしい）けど、他にもたくさんあります。

• Materialize CSS
• Pure CSS
• Foundation
• Bulma
• Skeleton
• などなど……

その中でもbootstrapが流行っているのは、もちろんその機能が優れていて、現代風（モバイルファースト）だからです。

以下では、bootstrapのいいところを紹介します！

『bootstrap』のなにが便利なの？

普及している

みんなが使っていれば、それだけサポートが多いってことです。

わからないことがあれば、ググると答えが出てくる。これはすごくありがたい。

わからないことはググれは解決する。つまりなんでもできるのでは・・・？

レスポンシブデザイン

bootstrapを使えば、PC用ページとスマホ用ページをいっしょに作れます。

floatを使わずに、パネル風にデザインできて、スマホで見ると縦に並んでる。そんなデザインも簡単です。

これを手打ちでやると、PC用ページとスマホ用ページをメディアクエリで2つ分書くので、相当めんどくさい。

というか、bootstrapはもともとスマホページ用のフレームワークなので、スマホページをPC対応させるって言い方のほうが正しいかも。

『bootstrap』って誰でも使えるの？

無料だし、誰でも使えるぞ！！！

bootstrapは、Twitter社が自社用に作ったフレームワークでしたが、2011年に外部に公開されました。

公式サイト（Bootstrap · The most popular HTML, CSS, and JS library in the world.）にいって、画面上部の『documentation』から少し下がったところの、『Starter template』にあるコードを貼り付ければ、もう準備完了です。

このあたりは、別記事で詳しく紹介するかもしれません。

まとめ：bootstrapとは？

bootstrapとはCSSのフレームワーク。

すでに装飾されたCSSを使って、HTMLにクラス名をつけるだけで、簡単にサイトを作れます。

bootstrapはほんとに便利だし、完成までのスピードも上がります。

無料なので、ぜひ使ってみてください。ほんと楽ちん。

それでは、ガクマーケの井上でした！