Bootstrapとは？使い方を身につけ、Web制作速度を爆速にブーストしよう！

Bootstrapを使えるとコーディングが速くなると言いますが、なんだか難しそうですよね…。

でも大丈夫♪

実はBootstrapはHTMLとCSSをある程度理解している人は、あっという間に使えるようになります！

この記事を読めば「なぁんだ、Bootstrapってこんなものだったのね。」とハードルが下がるので、今日から爆速コーディングを始められますよ♪

Bootstrapを身につけて高速でコーディングができるようになって、一目置かれる存在を目指しましょう！

【↓↓当社の格安スクールではBootstrapを使ったweb開発も学べます♪入会金69,800円 + 月額10,800円】

Bootstrapとは？

Bootstrapとは、Web制作をラクにすることを目的とした、CSSのひな形セット（フレームワーク）のことです。

BootstrapにはすでにCSSファイルが存在し、その中にはweb制作でよく使われるCSSのコードがまとめられています。

車の製造で例えるならネジなどの素材ではなく、ハンドルやタイヤなどが、すでに組み立てられた部品として用意されているということですね！

このようにすでに組み立てられた部品を呼び出して使うだけなので、コーディングが圧倒的に簡略化されるのです。

そのためコーディング量が減り、コーディングスピードが格段に速くなると言えます♪

また、動的な機能（タブやスライダーなど）も実現できるよう、JSファイルも同梱されています。

プロはなぜBootstrapを使う？メリットを確認しよう！

2010年に開発されたBootstrapですが、いまだにプロのWeb制作者に愛されているのには以下の3つのメリットがあるからです。

メリット1. コーディング速度が圧倒的に早くなる

Bootstrapを使うことで、コーディングのスピードは確実に早くなります。

というのも、上記で解説した通りBootstrapはフレームワークなので、汎用性の高いデザインのCSSがすでに用意されているためです。

試しに以下のデザインレイアウトを実現してみましょう！

【実現したいデザイン】

Bootstrapなしだと、要素を横並びにするためdisplay: flex;、左右に余白があるからpadding: 15px;、列の幅を指定するためにwidth: 33.3333%;…など複数のCSSを記述する必要があります。

簡単なレイアウトのようですが、意外と面倒だったりしますよね。

では、Bootstrapで書いた場合はどうなるのでしょうか？

【Bootstrapを使ったコード例】

<!-- HTML -->
<div class="container-fluid">
　　<div class="row">
　　　　<div class="col-4">
　　　　　　<p class="mb-4"><img class="img-fluid" src="img/cat1.png"></p>
　　　　</div>
　　　　<div class="col-4">
　　　　　　<p class="mb-4"><img class="img-fluid" src="img/cat2.png"></p>
　　　　</div>
　　　　<div class="col-4">
　　　　　　<p class="mb-4"><img class="img-fluid" src="img/cat3.png"></p>
　　　　</div>
　　　　<div class="col-4">
　　　　　　<p class="mb-4"><img class="img-fluid" src="img/cat4.png"></p>
　　　　</div>
   　　<div class="col-4">
　　　　　　<p class="mb-4"><img class="img-fluid" src="img/cat5.png"></p>
　　　　</div>
　　　　<div class="col-4">
　　　　　　<p class="mb-4"><img class="img-fluid" src="img/cat6.png"></p>
　　　　</div>
　　</div>
</div>

実はこのレイアウト、Bootstrapを使えば独自のCSSを書かなくても実現可能なのです！

HTMLでclassを指定することで、用意されたCSSを読み込み、レイアウトを実現しています。

class名については後で詳しく解説しますが、いかにコーディングが速くなるか、伝わりますでしょうか？

メリット2. レスポンシブwebデザインにも対応している

Bootstrapは、レスポンシブデザインにも対応するように設計されています。

後ほど詳しく解説しますが、「prefix（プリフィックス）」という画面幅ごとのブレイクポイントが用意されているため、PC・タブレット・スマホのブレイクポイントに合わせて自在にスタイルを当てることができます。

また、「グリッドレイアウト」が採用されていることもレスポンシブに強い理由です。

「グリッドレイアウト」についても後ほど詳しく解説させていただきますが、簡単にいうとページの最大幅を決めて、その最大幅を何分割のグリッドにするかを決めていくデザイン手法のこと。

分割された幅は「%（パーセント）」で指定されるため常に割合は一定で、デスクトップ（PC）での閲覧だけではなく、タブレットやスマホ閲覧時でも、最適化して表示することができるのです！

以下でレスポンシブでの動きを確認してみましょう！

要素の幅が割合で決められているため、このように画面幅ごとに画像が滑らかに縮小されるのです。

gif画像の通り、プリフィックスを使えばカラム数も変えることができます。

しかもこれ、先ほどのHTMLにいくつかclass名を追加しただけで、CSSを書き換えていません。

CSSを書き換えなくても、3カラムから2カラム、1カラムなどに変更が可能です。

モバイルファーストが叫ばれる現在、とても嬉しい機能と言えますね♪

メリット3. JavaScriptが使えなくても動的な機能を実装できる

Bootstrapにはjsファイルも用意されていて、シンプルな動的機能なら簡単に実装できます♪

具体的にはスライダーやタブ、ドロップダウンメニューなど、webサイト制作で必要なものは大体実現可能です。

しかも、ほとんどはHTMLにclassや属性を指定するだけ！

プログラマーの方はJavaScriptなどのプログラミングを理解できますが、webデザイナー兼コーダーの方にとってはプログラミングは難易度が高いので助かりますよね！

Bootstrapのデメリット

Bootstrapにもデメリットと呼べるポイントが2つあります。

デザイン性は決して高くない！

Bootstrapは、初めの頃「ノンデザイナーでも簡単にオシャレなサイトを構築できる」という触れ込みで人気が高まりましたが、現在ではデフォルトのデザイン性は決して高いとは言えません。

というのも、近年のwebデザインは多様性に富んでいるため、CSSファイル1つで全てのデザインを用意するのには限界があるためです。

（デザイン性が低いということではなく、カスタマイズ性重視のためデザインがシンプルです。リッチなデザインにするには、独自のCSSを記述する必要があります。）

例えばボタンデザインですが、Bootstrapのデフォルトだけで実現できるデザインは以下の通りです。

【Bootstrapのボタンデザイン】

一方で、近年のボタンデザインは以下のような様々なデザインのものを採用されることが多いですね。

【最近のボタンデザイン例】

もちろん、Bootstrapでベースの形を作ってデザインを変更すれば問題ありませんが、デフォルトだけでリッチなデザインができるわけではないということは覚えておきましょう！

使い方を覚える必要がある

BootstrapはHTML/CSSがわかればすぐに習得可能ですが、ある程度は使い方を覚える必要があります。

グリッドシステムの使い方、タブの実装など、独自のclass名や中身をある程度は覚えておかないと機能が上手く反映されないためです。

もちろん毎回調べればできますが、それだとBootstrapを使うメリットがなくなってしまいますものね？

慣れるまで時間は必要ですが、コーディング速度を上げるために使い続けましょう！

Bootstrapを使いこなすためのたった1つのコツ

Bootstrapはたった1つのコツを知っていれば難しくありません。

なぜclassの中身を知っていれば使いこなせるかというと、最初にお話しした通りBootstrapはただのCSSのひな形だからです。

そのひな形の仕組み（中身）を知っていれば、あなたが勉強してきたただのCSSなので、柔軟に対応できるようになります。

例えばBootstrapの「.row」という部品ですが、ぱっと見なんのことだか分からず、難しそうに感じますよね？

ですが、中身を確認すると以下のようになっています。

.row {
　　display: flex;
　　flex-wrap: wrap;
　　margin-right: -15px;
　　margin-left: -15px;
}

CSSを勉強した人なら大体何を指定しているのか分かりますよね？

要素をflexコンテナに変更し、中の要素の幅が画面幅を超えたら折り返し、左右の余白を-15pxにしているというのが理解できると思います。

「あ、これは要素を横並びにしたいときに使えそう…」と気づいたのではないでしょうか？

つまり用意されているclassの中身を把握することで、「難しそうなもの」から、一気に「理解できる簡単なもの」に変わりますよね！

[おすすめ] チートシート

チートシートを使うと、ソースとデザインを即確認できます。

どういうclassをつかったらどういう見た目になるのかがわかるので、実装時に役立ちますよ～

※bootstrapのバージョンによってURLが異なります。

Bootstrapを使うための3つの準備

ではここから、実際にBootstrapを導入するために準備すべきことを学んでいきましょう！

Bootstrapを使うには、以下の3つの手順を踏む必要があります。

jQueryをダウンロード

BootstrapにはjQueryを使ったjsファイルも同梱されているため、jQueryをまず読み込む必要があります。

※jQueryとは、JavaScriptで作られたライブラリのことで、JavaScriptでよく使われる機能を簡単に記述できるようにしたものです。今の段階では「BootstrapにはjQueryが必要」と覚えればOKです。

そのため、まずはjQueryファイルをダウンロードしていきましょう！

⇒jQuery公式サイト

公式サイトに飛んだら、「Download」ボタンをクリックします。

ページが移動したら「Download the uncompressed, development jQuery 3.x.x」を右クリックします。

※バージョンは常にアップデートされるので、「3.x.x」のxの部分はタイミングによって変わります。

圧縮ファイル（容量の小さなファイル）を使いたい場合は「Download the compressed, development jQuery 3.x.x」を右クリックしましょう。

「リンク先を別名で保存」を選択し、「保存」すればダウンロード完了です（macの場合です。windowsの場合は準拠したものを選択してください。

これでjQueryファイル（jquery-3.x.x.js）をダウンロードできました！

ほかにも、ネット上からjQuery読み込む方法もあります。

以下はCDNという方法で、HTMLのhead部分に以下コードを記述するだけで完了するものもあります（以下は2021年8月現在のもの）。

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

Bootstrapをダウンロード

今度はBootstrapをダウンロードしていきましょう！

まずは公式サイトに移動し、「ダウンロード」をクリックします

⇒Bootstrapの公式サイトはこちら

ページ移動したら、Compiled CSS and JSの下のダウンロードをクリックします。

これでBootstrapの圧縮ファイルがダウンロードされるので、解凍すればダウンロード完了です！

バージョンによりますが、「bootstrap-5.0.0-beta1-dist」や「bootstrap-4.5.0-dist」といったフォルダ名になるかと思います。

中身を見るとCSSフォルダとjsフォルダがあり、その中のbootstrap.cssとbootstrap.jsファイルを使うことになります。

次で実際に読み込んでいきましょう！

上記のファイルをHTMLファイルで読み込む

ここまでで以下3つのファイルが登場しましたね。

• jquery-3.x.x.js
• bootstrap.css
• bootstrap.js

このままではバラバラで使い勝手が悪いので、CSSファイルはCSSフォルダ、jsファイルはjsフォルダにまとめておくようにしましょう！

以下画像のようなファイル構成がわかりやすいです。

そしてこれらを全てHTMLファイルで読み込むことで、Bootstrapを使う準備が完了となります♪

<head>
・
・
　　<link rel="stylesheet" href="css/bootstrap.css">
　　<link rel="stylesheet" href="css/style.css">
・
・
</head>

BootstrapのCSSファイルはheadタグの中に読み込みましょう！

Bootstrapのファイルは、独自のCSSファイルより先に読み込んでください。

CSSは最後に読み込まれるものが優先されるため、bootstrapで呼び出したデザインをstyle.cssで自在に上書きできて便利だからですね。

<body>
・
・
・
 　 <script src="js/jquery-3.5.1.js"></script>
　　<script src="js/bootstrap.js"></script>
</body>

jsファイルは</body>の直前で読み込みます。

注意点として、bootstrap.jsより先にjqueryを読み込む必要があります。
※bootstrapのバージョン5を採用している場合は、jqueryを読み込まなくても問題ありません。

ブレイクポイントを理解しよう！

ここまででBootstrapを使う準備ができましたが、使う前に「ブレイクポイント（画面幅によってスタイルを切り替えるポイント）」について知っておくと良いでしょう。

ブレイクポイントとは画面幅に合わせてCSSを切り替えるためのポイントで、Bootstrapでは1200px、992px、768px、576pxの4つのブレイクポイントが用意してあります。

それぞれのブレイクポイントに「xl」「lg」「md」「sm」という名前（プリフィックス）がついているのも特徴です。

このプリフィックスを知っているとHTMLだけで画面幅に合わせたCSSを指定できるので、覚えておきましょう！

例えば、上記で紹介したネコのサイトは、以下のように記述しています。

<div class="container-fluid">
　　<div class="row">
　　　　<div class="col-md-4 col-sm-6 col-12">
　　　　　　<p class="mb-4"><img class="img-fluid" src="img/cat1.png"></p>
　　　　</div>
　　　　<div class="col-md-4 col-sm-6 col-12">
　　　　　　<p class="mb-4"><img class="img-fluid" src="img/cat2.png"></p>
      </div>
      ...以下省略

「col-〇〇-4」などの部分にブレイクポイント（プリフィックス）が指定されているのがわかりますよね！

今回の場合は、768px以上（md）では3カラム、576px以上（sm）では2カラム、575px以下（prefix指定なし）では1カラムと指定されています。

カラム数はグリッドレイアウト（12分割）が採用されているので、4で3カラム、6で2カラム、12で1カラムとなります。

そのため、以下gif画像のように画面幅によってカラム数が切り替わっているというわけです。

現役web制作者がよく使うBootstrapの機能と使い方

ここからは、実務で実際によく使われるBootstrapの機能と使い方を紹介します。

全てを紹介するわけではありませんが、web制作者がリアルに今も使っている機能だけ紹介しますね！

グリッドシステム

グリッドシステムとは、ガイド（グリッド）で画面を均等に分割することで、レイアウトを簡単に配置できるようにするものです。

例えば、Bootstrapでは12分割のグリッドシステムが採用されているのですが、「12分割中の6分割をその要素に割り当てる」という指定ができます。

こうすることで、簡単に要素の幅を指定できるだけでなく、画面幅が変わっても「12分割中の6分割をその要素に割り当てる」が使えるため、レスポンシブコーディングの時に大変便利というのが想像できますでしょうか？

上記画像の「Webデザイナー向け」「Webプログラマー向け」という箱も、黄色の線が6本分 = 12分割中の6つで配置されているため、2カラムを簡単に実現できています。

3カラムにしたい場合は、12分割中の4つを指定すれば可能ですね。

Bootstrapでグリッドシステムを活用する場合、「.container」「.row」「.col」という3つのclassを指定するだけです。

.container

.container（コンテナ）とは、グリッドシステムを利用する場合の「大枠」の役割があります。

具体的には「ここからここまではグリッドシステムを使うよ〜」というイメージですね！

Bootstrapでは「.container」「.container-fluid」「.container-{break-point}」の3種類のコンテナがありますが、レスポンシブコーディングまでやる場合は流動的にレイアウトを組める「.container-fluid」を使うのがおすすめです。

「.container-fluid」の中身をさっそく確認してみましょう！

/* .container-fluidの中身 */

.container-fluid {
　　width: 100%;
　　padding-right: 15px;
　　padding-left: 15px;
　　margin-right: auto;
　　margin-left: auto;
}

widthが100%で要素 or 画面いっぱいに広がるようになっており、左右のmarginがautoに指定されていますね！

つまり、任意でその要素の最大値（max-width）を指定してあげればコンテナごと左右中央に配置され、画面幅によって流れるように中身がリサイズされるのがイメージできますでしょうか？

.row

「.row」は「行」という意味で、文字通り「行」の範囲を指定するclassとなっています。

上で紹介した「.container-fluid」の中に配置します（.container-fluidの中であれば、場所はどこでも大丈夫です）。

<div class="container-fluid">
  <div class="row"></div>
</div>

「.row」の中身を見るとより理解が深まるかと思います。

/* .rowの中身 */

.row {
　　display: flex;
　　flex-wrap: wrap;
　　margin-right: -15px;
　　margin-left: -15px; 
}

.rowは「display: flex;」が指定してあるため、中身の要素を「横並び」にしていることがわかります。

「flex-wrap: wrap;」は子要素の幅が親要素の幅を超える場合に、要素を折り返すプロパティですね。

flex-wrap: wrap;によって中身がはみ出さずに済みます。

よくわからないのが左右のマイナスマージン（margin-right: -15px , margin-left: -15px）ですが、こちらは次に紹介する「.col」に指定される左右のpaddingを相殺するためにつけられています。

.col-○

「.col-○」には「横並びにするコンテンツ」を記載します。

「.row」で「display: flex;」を指定しているので、flexアイテムとなるものですね！

使い方ですが、「.row」のなかに記載します。

<div class="container-fluid">
  <div class="row">
    <div class="col-○"></div>
    <div class="col-○"></div>
    <div class="col-○"></div>
  </div>
</div>

「col-○」の「○」には、「12分割中の何分割使うかを示す数字」を記載します。

例えば3列（3カラム）にしたい場合、12を3分割すると4（12 ÷ 3 = 4）なので、「col-4」となりますね。

また、画面幅によってカラム数を変更したい場合、「col」と「数字」の間にプリフィックスを入れて「col-md-6」などとします。

例えば「画面幅768px以上は3カラムだけど、576px以上は2カラム、それ以下は1カラムにしたい」という場合は以下の通りです。

<div class="container-fluid">
　　<div class="row">
　　　　<div class="col-sm-6 col-md-4"></div>
　　　　<div class="col-sm-6 col-md-4"></div>
　　　　<div class="col-sm-6 col-md-4"></div>
　　</div>
</div>

では、.col-○の中身を見てみましょう！

/* .col-4の中身（数字によって値は変わります） */

.col-4 {
　　flex: 0 0 33.333333%;
　　max-width: 33.333333%;
}


/* 各.colの中身（colと付くもの共通のスタイル） */

.col ...省略 {
　　position: relative;
　　width: 100%;
　　padding-right: 15px;
　　padding-left: 15px;
}

.col-4とした場合、3列になるようmax-widthが33.3333%で最大値を決め、flex（flex-basis）で幅を33.3333%としていますね！

.col-3（4列）の場合はmax-width: 25%;、.col-6（2列）の場合はmax-width: 50%;、.col-12（1列）ならmax-width: 100%;とそれぞれ変わります。

なんとなく理解できましたでしょうか？

つまり、横並びにしたい要素を「.col-○」という箱の中に書けば、カラム数に応じた横並びは簡単に実現が可能です♪

しかもレスポンシブ！！

.gutter-20 {
　　margin-right: -10px;
　　margin-left: -10px;
}
.gutter-20 div[class^="col-"] {
　　padding-right: 10px;
　　padding-left: 10px;
}

Bootstrap独自のclass（コンポーネント）

CSSが１行だけ用意されたclassも多くあり、意外と汎用性が高いため使いやすいですよ。

<!-- 例 -->
.text-center {
　　text-align: center;
}
.d-none {
　　display: none;
} 

どんなときに使うかというと、「このテキストだけ「text-align: center;」を指定したいけど、これだけのためにわざわざclass名をつけてCSSでスタイル当てるの面倒だな…」なんて時に便利です♪

以下、よく使うものを紹介していきますね！

d-〇〇（displayプロパティ）

<!-- 記述例 -->
<p class="d-none d-sm-block d-md-inline d-lg-flex">記述例</p>

特定のhtml要素にd-〇〇と記載すると、その要素のdisplayプロパティを変更できるclassです。

「d-none（display: none;）」「d-block（display: block;）」「d-flex（display: flex;）」「d-inline（display: inline;）」など、displayプロパティの基本的な値を使えます。

d-〇〇-noneのように、〇〇にブレイクポイントのprefixを指定すれば、画面幅ごとに値を変更することも可能です。

例えば768px以上では表示（d-md-block）し、画面幅767px以下では非表示（d-none）とするなどの使い方があります。

表示・非表示の切り替えは特によく使うので、とても便利そうですよね♪

position-relative（positionプロパティ）

<!-- 記述例 -->
<div class="position-relative">
　　<p>親を基準にしたabsolute指定の要素</p>
</div>

positionプロパティも用意されています。

「この親要素をposition: relative;にしたいけど、それ以外指定することないから新しくclass名をつけてCSSに書くのは記述が増えてやだなぁ…」なんてことはありませんか？

そんな時は指定の要素のclassに「position-relative」と記載することで、絶対位置指定の基準を作ることが可能です！

text-〇〇（text-alignプロパティ）

<!-- 記述例 -->
<p class="text-center">text-align: center;（中央寄せ）</p>
<p class="text-left">text-align: left;（左寄せ）</p>
<p class="text-right">text-align: right;（右寄せ）</p>

「text-〇〇」などと記述すると、text-alignプロパティを指定できます。

text-center、text-left、text-rightがあるので、「このテキストだけは〇〇寄せにしたい…!!」なんて時に便利です♪

p○-○、m○-○（padding、marginプロパティ）

<!-- 記述例 -->
<p class="p-0">上下左右のpaddingを0にします</p>
<p class="pt-1">上のpaddingを要素の基本サイズ*0.25にします</p>
<p class="pr-2">右のpaddingを要素の基本サイズ*0.5にします</p>
<p class="pb-3">下のpaddingを要素の基本サイズ*1にします</p>
<p class="pl-4">左のpaddingを要素の基本サイズ*1.5にします</p>
<p class="px-5">左右のpaddingを要素の基本サイズ*3にします</p>
<p class="py-0">上下のpaddingを0にします</p>

paddingとmarginについてもclassの用意があります。

{property（プロパティ）}{direction（上下左右）}-{size（値）}のように記載するのが基本となり、上下左右に余白をつけることが可能です。

プロパティは「p」がpadding、「m」がmarginとなります。

方向は何も指定しなければ上下左右、「t」で上、「r」で右、「b」で下、「l」で左、「x」で左右、「y」で「上下」です。

値を細かく指定することはできませんが、1~5を指定することである程度の余白をつけられるのでとても便利ですよ♪

【Bootstrapでのpadding,marginの値の早見表】

.wrap {
  position: relative;
  padding-top: 1rem;
  display: block;
}

タブ

Bootstrapでは、class名と属性を指定するだけで、簡単にタブ機能を実装できます。

jQueryで実装すると意外と面倒だったりしますものね…。

機能さえ実装できれば、あとはCSSでデザインを変更するだけでかなりリッチなスタイルを当てられるので、とても使いやすいですよ♪

当社のweb制作でもよく使われますし、web食いのトップページでも使われています。

【web食いトップページで使われているBootstrapのタブ機能】

タブ機能を爆速で実装できたら、コーディング速度にかなり貢献できるはずです！

記述方法はこのページでは割愛しますが、以下サイトがとてもわかりやすいので、実装する場合は参考にしてみましょう♪

⇒最新版で学ぶBootstrap4入門 タブの作り方

フォームのデザイン

フォームのデザインも、Bootstrapには用意されています。

フォームに関しては、Bootstrapのデフォルトデザインを使っても違和感がないので、サクッと実装できて便利かと思います。

【Bootstrapのフォームデザイン（デフォルト）】

<!-- Bootstrapのフォーム実装方法例 -->
<form>
　　<div class="form-group my-5 ">
　　　　<label>氏名</label>
　　　　<input type="text" class="form-control">
　　</div>
　　<div class="form-group my-5 ">
　　　　<label>メールアドレス</label>
　　　　<input type="email" class="form-control">
　　</div>
</form>

基本的な使い方は、divなどの親要素のclassに「form-group」をつけ、中身にlabelタグとinputタグを設置し、inputタグのclassに「form-control」を付ければ上記画像のように表示されます（上下余白は「my-5」で指定しています）。

サクッと現代デザインをフォームに当てたい方は、使ってみると良いでしょう！

もちろん、textareaやselect、ラジオボタンも用意されています。

詳しくは、以下サイトがわかりやすいです。

⇒Bootstrap Form おさらい

パンくずリスト

<ol class="breadcrumb py-3">
　　<li class="pr-3"><a href="/">HOME</a></li>
　　<li class="pr-3"><a href="/blog">web食い</a></li>
　　<li class="active">BootStrap</li>
</ol>

パンくずリストに関しても、Bootstrapのクラスをつけるとサクッと実装が可能です。

class名に「breadcrumb」と記載すれば、要素を横並びに、上下に余白をとってくれるので便利かと思います。

また、カーソルを乗せた（hover）時にカーソルをpointerにしてくれたり、色も変えてくれます。

一方で、左右の余白や区切り線をつける必要があったり、デザインは独自CSSで上書きしないとかなりダサくなるので注意しましょう！

その他のBootstrapの便利なコンポーネントや機能一覧

使うことはあまり多くないと思いますが、他にも以下のような便利なコンポーネントや機能も用意されているので、知識として持っておくと良いでしょう♪

Bootstrapを使う際の注意点

Bootstrapを導入する場合、注意点があります。

それが「クライアントによっては使えない」ということ。

Bootstrapはコーディングが楽になる一方で、ファイル数が増えるために容量が重くなる、学習コストがかかる、などのデメリットがあります。

ゆえに、クライアントから「Bootstrapはなしでお願いします」と依頼されることも、まれにあります。

案件を受ける際は、事前に「Bootstrapを導入しても良いでしょうか？」と確認を取っておきましょう！

後から「Bootstrapは削除して」と言われると、修正が面倒ですからね…!!!

Bootstrap以外のCSSフレームワーク

BootstrapはTwitter社が開発・運営するCSSフレームワークで1番使われていますが、もちろん他のCSSフレームワークも存在します。

Bootstrapは初期の頃に人気になったため今でも使われることが多いですが、機能に関しては他のCSSフレームワークの方が使いやすかったりもするので、お気に入りのものを探してみるのも良いでしょう♪

Foundation（ファウンデーション）

FoundationはBootstrapの次くらいに知名度の高いCSSフレームワークで、カスタマイズ性でいうとBootstrapより上と言えるかもしれません。

一方でカスタマイズ性の高さによって覚えることが多かったり、人によってはBootstrapなどと比べるとデザインが古いと感じることもあります。

BULMA

BULMAは、JavaScriptを使わずに動的なコンポーネントを実装できるCSSフレームワークです。

JavaScriptを使わないため、vue.jsやreactなどの他のライブラリ・フレームワークとの相性が良いと言えます。

そのため、近年人気が高まっています。

UIkit

UIkitは、軽量でシンプルなCSSフレームワークのため、とても使い勝手が良いです。

Bootstrapでは「row」や「col」「text-center」など独自のclass名なのかフレームワークに用意してあるclass名なのかがわかりにくいですが、UIkitは「uk-」から始まるものに統一されているなど、とにかく使いやすさにこだわっています。

カスタマイズ性もピカイチですね。

Materialize CSS

Materialize CSSは、Googleが提唱した「マテリアルデザイン」を簡単に実装するためのCSSフレームワークです。

ユーザーの使いやすさを追求した、シンプルなデザインを作成する場合に活躍しそうですね！

Bootstrapのまとめ

【↓↓当社の格安スクールではBootstrapを使ったweb開発も学べます♪入会金69,800円 + 月額10,800円】