HTML & CSS プログラミング

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を使って作ったボタンは、とてもきれいです。

すげぇ! 俺が作るよりキレイなボタンだ(血涙)!!!!

こんな感じで、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はほんとに便利だし、完成までのスピードも上がります。

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

それでは、まっわすでした!

-HTML & CSS, プログラミング
-, , ,

Copyright© zackut , 2019 All Rights Reserved Powered by AFFINGER5.