テクノロジー

【入門者向け】Bootstrap(ブートストラップ)とは?【3分で解説】

投稿日:

こんにちは、yassanです。
今回は、入門者向けにBootstrapについて、簡単に解説いたします。

「入門者」といえど様々なレベルがありますが、
ここでは、”htmlとcssを使って、静的なWebページを作ることができる”レベルを指すこととします。

bootstrapが使えるようになると、Webページの外観を簡単に整えることができます。
制作にかかる手間を大幅に削減できることでしょう。

かく言う僕も入門者です!
こちらの記事で、Bootstrapの触りを理解して、一緒に学習していきましょう!

【概要】Bootstrapとは?

Bootstrapとは、Webページ・Webアプリケーション制作のためのフレームワークです。
一言で言うと、“便利なツール”です。
Bootstrapを使うことで、Webページ・アプリケーションのアウトプットをいい感じにすることができます。
「Webページをいい感じにするならCSSがあるじゃん」という方、ご名答です。
しかし、CSSをチマチマ書き換えるのは大変です。Bootstrapを使うと、そのような作業が大幅に減ります。
(厳密には、BootstrapとCSSを使って整えますが)

ちなみに、Bootstrapは無料です。
このような、誰でも無償で公開され、自由に編集できるものをオープンソースといいます。
この手のオープンソースの中で、Bootstrapはとても人気があります。
なぜ人気があるのか、申し訳ありませんが僕は知りません。
おそらく、よくできている・導入しやすい・昔からあるなどの要素があるのかもしれません。

Bootstrapの公式ページはこちらです。
英語で書かれていますが、そこまで難しいことは書いてませんので安心してください。

【準備】どうやって準備するの?

導入の仕方はいくつかありますが、今回は1番簡単な方法を簡単に説明します。(簡単簡単うるさくてすいません)

まずは、Bootstrapの公式ページから、“Get Start”をクリックします。
(公式ページは上にリンクを貼ってあります。
中断に“Start template”があります。
そこに“Quick start”があります。
下段にある“Starter template”を参考に“CSS”と“JS”の文を、htmlのソースコードに突っ込みます。
以上です。

ほんとにこれだけですが、もう少し詳しく書いてある外部リンクもはっておきます。
Bootstrapの使い方とは?初心者でもわかる使い方をまとめて解説!!

なぜこんなに簡単なのかというと、CDNという仕組みを使っているからです。
CDNについての説明は、ここでは割愛いたします。

【メリット】どういう利点があるの?

Bootstrapを使う最大のメリットは、“手間の削減”だと個人的には思います。
Bootstrapを使うことでしかできないことって正直多くはないんですが、同じアウトプットをBootstrapなしで実装しようとすると、とても大変だと感じます。
例えるなら、Bootstrapなしで実装というのは、電動工具なしで家を建てるみたいな感じですかね(家建てたことはありませんが)

そんなBootstrapのメリットがわかりやすい機能を一つ紹介します。
それは、“Grid System”です。

CSSだと、タグに対してこの位置で〜というような指定をしていたと思います。(float: leftやfloat: rightですね)
CSSのおかげで、タグごとに制御ができて楽ではありますが、やはり複雑化すると管理が大変になってきます。
このような、横軸でどの位置にオブジェクトを配置するか、ということを考えたときに、“Grid System”は役に立ちます。

Grid Systemは、オブジェクトを配置するとき、横方向を12分割したとして、その何番目に配置するか、という考え方をします。
つまり、1~4番までは左側の1/3を指し、5~6は中央の1/6を、12は右端を指します。
使ってみるとわかるのですが、この考え方が非常に画期的です。
すごく楽です。

また、画面に対して÷12をするので、画面サイズが変わっても構造が保てます。
Offset値を入力することで空の部分も作ることができます。
オブジェクトの回り込みを解除するタイミングも、変数で制御することができます。
このような、多くのメリットがあります。

Grid Systemについて、公式ページでも解説しています。

まとめ

いかがでしたでしょうか。
Webページを作る際には、このBootstrapを知っているかそうでないかで大きな差が生まれることかと思います。

この記事で興味が湧いた方は、もっと詳しい使い方を学習すると良いでしょう。

読んできただき、ありがとうございました!
お勉強・お仕事頑張ってください!応援してます!

-テクノロジー
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【ITエンジニア登竜門】合格までの勉強方法【基本情報技術者試験】

こんにちは、yassanです。今回は、ITエンジニアの登竜門である「基本情報技術者試験」の合格までに僕がやってきたことを紹介します。自慢話みたいになって気分が悪いかもしれませんが、習い事や勉強は、まず …

AWSに登録したら数日後「AWS Free Tier limit alert」というメールが来た【対処方法のスクショ付き】

こんにちは、yassanです。今回は「AWSに登録したら数日後「AWS Free Tier limit alert」というメールが来た【対処方法のスクショ付き】」を紹介します。 AWSを始めて早数日、 …

オンプレとAWSの違いって?【AWS入門】

こんにちは、yassanです。今回は「オンプレとAWSの違いって?【AWS入門】」についてお話しします。 最近、AWSやクラウドってどこかしこで聞きますよね。クラウドに馴染みのない方からしたら「なんか …

【MySQL】Error Code: 1175. You are using…の対処方法

Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE tha …

VPCとは?学んだことをまとめてみた【初心者エンジニアのAWS備忘録①】

こんにちは、yassanです。今回は「VPCとは?学んだことをまとめてみた【初心者エンジニアのAWS備忘録】」について紹介します。 「AWSを初めたらまずはVPCを構築してみよう」みたいなのをよく見か …