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

bootstrapとは,bootstrapの使い方

コーディングをもっと速くできるようになりたいなぁ…。

Bootstrap(ブートストラップ)を使うと速くなるって聞いたけど、そもそもBootstrapって何?

使い方まで身につけたいな♪

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

でも大丈夫♪

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

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

【この記事の内容は以下の通りです♪】

  • Bootstrapとは?
  • なんでみんな使ってるの?Bootstrapのメリット
  • Bootstrapを使いこなすコツ
  • 現役web制作者がよく使うBootstrapの機能と使い方…etc

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

やぁみんな!僕が現役Web制作者社長の松崎だ。

僕がBootstrapについて本気で解説するから、ぜひ見ていってくれよな!

当社のWeb制作でもBootstrapを使っているから、実務でのリアルなBootstrap情報を提供できると思うぜ!

HTML/CSSをある程度理解していることを前提にしてるから、まだHTML/CSSがわからない人は以下記事でまずは学んでみよう!

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

web食いオンラインスクール

Bootstrapとは?

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

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

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

bootstrapの解説

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

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

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

Bootstrapってただのひな形なんだ。

もっと難しいものだと思ってたよ。

Bootstrapの実態(中身)はCSSファイルとJSファイルが用意されただけのものだからね。

よく使うデザインや機能なら、Bootstrapでサクッと実現するのがおすすめだ!

Twitter社が作ってるから作りはかなりしっかりしてるぜ。

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

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

【Bootstrapを使う3つのメリット】

  1. コーディング速度が圧倒的に早くなる
  2. レスポンシブ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名については後で詳しく解説しますが、いかにコーディングが速くなるか、伝わりますでしょうか?

え!CSSなしでもさっきの画像のデザインを再現できるの!?

実際にはBootstrapで用意されたCSSが適用されているだけだから、CSSが不要ということではない。

けど、このくらいのレイアウトなら独自のCSSはなしで実現可能だぜ!

これからのコーディングが想像を遥かに超えるくらいラクになりそうでしょ?

超絶怒涛にワクワクしてる♪

横並びのレイアウトがあるだけでゾッとしてたもん!

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

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

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

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

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

グリッドレイアウト

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

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

レスポンシブ

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

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

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

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

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

ウソウソウソウソ…!!!

CSSに新しい記述なしでカラム数変えられるの!?

Bootstrapすごいでしょ?

prefix(プリフィックス)というのがあって、これをつけることで画面幅による切り替えをしているんだよ。

スマホサイズのコーディングって結構面倒だから、すごく助かるよね!

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

動的コンポーネント

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

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

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

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

スライダーって画像をスライド表示させる機能ってことだよね!?

これも簡単にできるなんて凄すぎる…!!!

結構簡単に実装できるよ♪

動的機能の利用頻度で言うと、タブなんかはよく使うぜ!

よく使うものを使い回すことで、圧倒的に効率よくコーディングができるから覚えておいて損はないね♪

ただ実際スライダーをBootstrapで実装する機会はほとんどない。

最近はjQueryとかJavaScriptでも簡単に、しかもリッチに実装できるプラグインが増えたからね。

全部の機能を使えるようになろうとしなくてもいいよ♪

Bootstrapのデメリット

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

【Bootstrapのデメリット】

  1. デザイン性は決して高くない
  2. 使い方を覚える必要がある

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

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

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

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

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

【Bootstrapのボタンデザイン】

bootstrapのボタンデザイン

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

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

最近のボタンデザイン例

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

Bootstrapを使えばオシャレなwebサイトを作れるということではないんだね!

デフォルトでwebサイトを作って満足している人は、高級ブランドのロゴが入ったトレーナーを着ればオシャレだと勘違いしている人と同じだぜ。

Bootstrapはシンプルなデザインがカスタマイズしやすいけど、それだけで現代風のオシャレサイトは作れない。

今現在、Bootstrapのメリットは汎用性の高さと機能性と言えるね。

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

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

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

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

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

何度か使ってればclass名とかは勝手に覚えるから、最初は我慢して使い続けた方がいいね!

長期的に見ると、最初の労力は絶対無駄にならないぜ!

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

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

【Bootstrapを使いこなすためのたった1つのコツ】
用意されているclassの中身を把握する

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

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

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

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

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

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

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

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

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

そっか、中身を知ればこれまで勉強したただのCSSだから、実際は大したことないってことね。

そうゆうことさ♪

bootstrap.cssを開いたり、Bootstrapが使われたサイトを検証ツール(デバックツール)で中身を確認したりしてみよう!

男の中身(性格)を理解すれば騙されないのと同じだぜ!

キャバコも僕の中身をもっと知ってみない?♡

いや興味ないわ。

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

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

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

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

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

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

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

【Bootstrapを使うための3つの手順】

  1. jQueryをダウンロード
  2. Bootstrapをダウンロード
  3. 上記のファイルを読み込む

jQueryをダウンロード

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

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

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

jQuery公式サイト

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

jQueryのダウンロード

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

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

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

jQueryのダウンロード方法

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

jQueryのダウンロード方法

これで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>

CDNの方が簡単だね!

CDNは簡単なんだけど、jQueryのサイト自体に何か起こった場合、jQueryが使えなくなる。

このリスクを考えると、おすすめはjQueryファイルをダウンロードして設置する方法だよ♪

まぁ、jQueryのサイト自体が飛ぶ確率はかなり低いと思うけどね。。。

大切な相手のことを深く想像できる男って…オトナな感じ♡

今宵は長くなりそうだぜ。

Bootstrapをダウンロード

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

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

Bootstrapの公式サイトはこちら

Bootstrapをダウンロード

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

Bootstrapのダウンロード

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

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

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

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

bootstrap-4.5.0〜とかの「4.5.0」って何?

バージョンのことさ。

新しくなるごとにこの数字が大きくなっていくんだ。

「松崎45歳」みたいな感じだね。

アップデートするごとに変わるから、この数字は徐々に大きくなっていくぜ。

基本的には最新のもので大丈夫だけど、プラグインを使うときに古いバージョンじゃなきゃ使えないなんてこともあるってことだけ覚えておこう!

クラシックな男もたまにはいいもんね♪

そういえばさっきから「圧縮ファイル」って名前が出るけど、これはなんなの?

圧縮ファイルは「読み込み容量の小さいファイル」のことで、これを使うことでブラウザの読み込み速度が上がるんだ。

書いてある中身は基本的に同じで、改行とかを無くすことで圧縮しているよ。

bootstrap.min.jsみたいに、「.min(ミニファイ)」が入っているものは圧縮ファイルってことを覚えておこう!

圧縮ファイルを使った方がいいってこと?

今回は分かりやすく普通のファイルを使って解説したけど、僕のおすすめは圧縮ファイルの活用だね。

元ファイルはどうせ編集しないから、はじめから圧縮ファイルで問題ないと思ってる。

人によっては「本番環境に反映するときにだけ」圧縮ファイルを使う人もいるから、状況によって選んでね!

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

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

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

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

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

Bootstrapのフォルダ、ファイル構成

BootstrapのCSSファイル構成

Bootstrapの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を読み込まなくても問題ありません。

なんで、jsファイルは</body>の直前で読み込むの?

head内じゃダメなの?

head内でも問題ないけど、jsファイルはなるべく後で読み込んだ方が良いぜ。

最後(</body>の直前)に読み込むことで、HTMLとCSSを先に読み込めるからね。

その方が、ブラウザ閲覧者が高速でwebサイトが表示されるように感じられるんだ。

jsファイルが読み込まれている最中は、HTML/CSSの読み込みがストップしてしまうからね。

そっか、先にjsファイルを読み込むと、その分タイムロスが発生しちゃうかもしれないってことね。

飲み込みが早くて助かるぜ!

まぁ先に読み込む必要がある時もあるから、「基本的には」って位置付けで覚えておいてくれ!

【Bootstrapを使う3つの準備おさらい】

  1. jQuery、Bootstrapをダウンロード
  2. jqueryのjsファイル、Bootstrapのcss、jsファイルの3つを配置
  3. HTMLファイルで全て読み込む
    ※Bootstrapのバージョン5を採用する時は、jQueryの読み込み不要。

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

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

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

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

【Bootstrapのブレイクポイント】

  • xl = Extra Large:1200px以上の大型ディスプレイ用。
  • lg = Large:一般的な中型ディスプレイ。992px以上用。
  • md = Medium:タブレットや横向きスマホ。768px以上用。
  • sm = Small:大きめのスマホや横向きスマホ。576px以上用。
  • 575px以下は何も指定しない。

このプリフィックスを知っていると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画像のように画面幅によってカラム数が切り替わっているというわけです。レスポンシブ

HTMLでブレイクポイントを指定できるのはすごく便利だね♪

だよね!

他にも、CSSのdisplayをblockに指定する「d-block」ってクラスが用意されているんだけど、「d-block d-sm-none」と書けば「0~575pxまではdisplay: block;、576px以上はdisplay: none;」みたいな指定もできるぜ。

表示、非表示をHTMLのclassで指定できるのは超便利だよ。

CSSで画面幅ごとにいちいち「@media screen and ~」って書くの面倒だったんだよね…。

これなら圧倒的にコーディング速度が上がる気がする♪

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

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

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

Bootstrapの機能は、全部使える必要はないぜ!

よく使うもの、全く使わないものがあるからね。

ここからは、僕たち現役web制作者がリアルに使う機能と使い方を紹介するから、以下を覚えればとりあえずBootstrapを使えると言えるぜ!

サンプルコードもいくつか載せてあるから、確認してくれよな!

グリッドシステム

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

グリッドレイアウト

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

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

グリッドレイアウト

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

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

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

幅を固定単位(pxなど)で指定しないで、範囲を「%」で指定するイメージだよ。

Bootstrapのメインと言ってもいいのがグリッドシステムだから、じっくり理解しようね♪

ちなみに、以下で紹介する「.container」「.row」「.col」は必ずセットで使うことを覚えておこう!

.container

.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)を指定してあげればコンテナごと左右中央に配置され、画面幅によって流れるように中身がリサイズされるのがイメージできますでしょうか?

グリッドシステム

なるほど、枠をまずは作るんだね。

HTML/CSSは枠作りが大切だからね、Bootstrapも同じだ。

種類が3つあるけど、.container-fluidを使えばOK?

基本は.container-fluidだけでいいと思うぜ!

うちでもそうだし。

とりあえず.container-fluidクラスがついた要素の中に、.rowと.colを配置していくってことを理解しておこう!

.row

.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を相殺するためにつけられています。

.rowってよく意味がわからなかったけど、display: flex;が指定されているものなんだね!

中身を確認するとほんとにただのCSSのひな形だ(笑)

そうなんだよ、Bootstrapって簡単なんだよ…。

おまけにflex-wrapとか欲しい機能も用意されてあるから便利だし。

よく考えられているよね♪

.col-○

.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-○」という箱の中に書けば、カラム数に応じた横並びは簡単に実現が可能です♪

しかもレスポンシブ!!

.colで横並びの要素1つ1つの幅を決めているんだね♪

これめっちゃ便利かも…。

でもさ、各要素間の余白はどうするの?webサイトによって違うよね?

gutter,ガター,余白

ナイス質問だ!

結論を言うと、もちろん調整可能だ!

独自classを指定する必要があるけど、.rowのマイナスマージンと、.colの左右のpaddingの値をいじることで変更できるぜ。

デフォルトだと余白が30pxだけど、余白を20pxにしたいならclass名を「.gutter-20」みたいにわかりやすく指定して、以下のようなCSSを当てよう!

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

.rowがついている要素に.gutter-20を追加しようね!

余白を20pxにしたい場合は左右の余白を10pxにするってことか。

隣の要素も余白が10pxだから、合計20pxだね!

セレクタのdiv[class^=”col-“]ってなんだっけ?

これはdiv要素のclass名が「col-」から始まるものを指定しているぜ!

.col-のあとはプリフィックス(lg,md,smなど)や数字が画面幅によって変わるから、この指定がベストだ!

セレクタについて忘れちゃった人は以下をブックマークしておくと便利だよ♪

▼CSSセレクタのチートシート
https://web-cheatsheet.com/css-selector

Bootstrap独自のclass(コンポーネント)

CSSが1行だけ用意された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)とするなどの使い方があります。

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

d-none,d-block

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の値の早見表】

0 0
1 要素の基本サイズ*0.25
2 要素の基本サイズ*0.5
3 要素の基本サイズ*1
4 要素の基本サイズ*1.5
5 要素の基本サイズ*3

CSSを書かなくても指定できることが多いんだね!

コーディングで意外と面倒なのは「わかりやすいclass名を考えること」だったりするのよ…。

Bootstrapなら用意してあるclass名を指定するだけでスタイルを当てられるから本当に便利だぜ!

他にも色々あるから、Bootstrapのドキュメントでも確認してみよう!

<div class=”wrap position-relative pt-3 d-block…

おいおいおい…ちょっと待ってくれ…。

「wrap」みたいな独自のclass名を指定する場合は、Bootstrapのclassを当てるんじゃなくて、その独自classにCSSをまとめて記述するのがおすすめだ!

というのも、HTMLがかなり読みにくくなるからね…。

そっか!Bootstrapのclassは独自のclass名をつけない時だけ使う方が良いんだね。

確かに<div class=”wrap”></div>にして、

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

こっちの方が圧倒的に見やすいわ。

基本的にはそうしよう!

HTMLにclassがたくさん書いてあって読みにくいと、何をしているのか伝わりにくい。

ラブレターでも、「あなたの全てが好きです!」って告白の方がシンプルで胸に響くでしょ?

ラブレターきゅんです!

タブ

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

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

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

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

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

Bootstrap,タブ

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

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

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

Bootstrapのタブはカスタマイズ性も高いから、使えるようになっておくと便利だぜ!

フォームのデザイン

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

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

【Bootstrapのフォームデザイン(デフォルト)】

bootstrapのフォーム,form

<!-- 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 おさらい

パンくずリスト

Bootstrapのパンくずリスト,breadcrumb

<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で上書きしないとかなりダサくなるので注意しましょう!

ここまでの機能をよく使うってことでOK?

人にもよるけど、現役web制作者は上記をよく使うね♪

特にグリッドシステムはコーディングを爆速にしてくれるから、必ず使えるようになっておこう!

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

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

Bootstrapを使う際の注意点

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

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

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

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

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

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

そっか、コーディングする側からすると楽になるけど、クライアント側からするとデメリットになることもあるんだね。

Bootstrapは重すぎるってことはないから気にしなくていいんだけど、クライアントが気にする場合は素直に従おう!

郷に入れば郷に従えってことね。

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

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

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

Foundation(ファウンデーション)

Foundation,ファウンデーション,CSSフレームワーク

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

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

BULMA

BULMA

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

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

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

UIkit

UIkit

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

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

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

Materialize CSS

Materialize CSS

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

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

ヘェ〜。CSSフレームワークにもいろんなのがあるんだね。

もっといろんなのがあるから、探してみるのも楽しいぜ!

結局どれがいいの?

うーん、悩ましいなぁ。

Bootstrapより使いやすいものもあるしさ。

でもやっぱりBootstrapかな。

使える人が多いから修正のことを考えると親切だと思うし。

日本語の解説も多いからね。

日本語解説の多さは超重要だわ!

Bootstrapのまとめ

Bootstrapについて、理解できたかな?

Bootstrapは難しくないってことがチョーわかった!

それでOKだ(笑)

Bootstrapは使っているうちにどんどん慣れてくるから、使いまくろう!

使っているうちにコンポーネント(部品)の中身を知れば普通のCSSってことがわかるからさ。

Bootstrapは書籍も少ないから、とにかく実践あるのみだね!

スクールで学ぶのはアリかな?

Bootstrapのためだけにスクールに行くのはナシだね!

お金もったいないから(笑)

webデザインやプログラミング、コーディングを学ぶついでにBootstrapって感じがおすすめだよ♪

うちのスクールでもBootstrapを使って実績を作れるから、気になった人は覗いてみてね!

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

web食いオンラインスクール

メニューを閉じる