初心者でもわかるBootstrap(ブートストラップ)とは?《コピペで持ってこれる部品です》

初心者でもわかるBootstrapとは?《わかりやすくいうとコピペして使える部品です》

初心者でもわかるBootstrap(ブートストラップ)とは?《コピペで持ってこれる部品です》

「プログラミングでよく聞くBootstrap(ブートストラップ)って何?どう学べばいいの?」

そんなアナタに。HTML&CSSを学んだあとに知っておきたいBootstrap(ブートストラップ)についてわかりやすくお伝えします。

これを読めば、いろんなデザインを簡単に使うことができるようになって、あなたのウェブ制作がラクになりますよ。いってみましょう。

初心者でもわかるBootstrapとは?《わかりやすくいうとコピペして使える部品です》

初心者でもわかるBootstrapとは?《わかりやすくいうとコピペして使える部品です》

基礎のHTML&CSSがだいたいわかったらBootstrap(ブートストラップ)もおさえておきましょう。

ブートストラップは簡単にいうと、ウェブ制作をしやすくするためにあらかじめ用意された部品(コード)です。

ブートストラップのサイトに用意されたコードをコピペすれば、いろんなデザインを簡単に自分のサイトに持ってくることができます。なので、ブートストラップが使えれば作業量や時間を減らして効率的にサイト作りができるわけですね。

ちなみにこうした「あらかじめ用意された使えるプログラミングコード」のことを『フレームワーク』といいます。

ブートストラップを始める前にコチラの動画を見ておけばすんなりわかります↓

Bootstrapとは?できることや覚えるのに必要なスキルを解説

初心者でも使いやすいフレームワークのひとつであるブートストラップ、さっそく使えるようにしていきましょう。

ドットインストールの無料動画でブートストラップ(Icons)を学ぼう

ドットインストールの無料動画でブートストラップ(Icons)を学ぼう

まずは、ドットインストールの無料動画『Bootstrap Icons入門』を見ましょう。

無料動画>>>Bootstrap Icons入門(全3本)

『Bootstrap Icons』には使えるアイコンが用意されています。

僕らがよく目にする以下のようなアイコンマークがありますね↓

  • Twitterのアイコン
  • Appleのアイコン
  • ベルのアイコン
  • マイクのアイコン
  • バッテリーのアイコン
  • 傘のアイコン

などなど全部で約1800個。

なので「こんなアイコンマーク使いたいな」って時はBootstrap Iconsから持ってきて埋め込めばいいわけですね。

ドットインストールの有料動画でブートストラップを学ぼう

ドットインストールの有料動画でブートストラップを学ぼう

ブートストラップをしっかり学ぶには、有料会員になってる時に以下の講座を見ましょう↓

>>>Bootstrap 5入門(全21本)

ざっくり言うと「ブートストラップのサイトからコードをコピペ」して「あとは好きにいじって作ればいい」わけですね。

でも、ブートストラップをカスタマイズして使いこなすには知識が必要です。なので21本も動画があります。

場合によっては「ブートストラップを使うよりイチからサイトを作った方が早い」ということもありますので、考えて使えるようにしましょう。

Youtubeでも無料でブートストラップが学べる

ブートストラップについてもっと学びたければ、Youtubeでも学べます。

まずはコチラ。前のバージョン『Bootstrap4』の動画ですが、9本あって入門講座として学べます↓

Bootstrap 4入門 #01〜9

コチラは1時間半の長尺で『Bootstrap5』を教えてくれます↓

Bootstrap5でレスポンシブなウェブサイトを作ってみよう

こちらの動画もわかりやすくてオススメ↓

初心者でもわかるBootstrap まとめ

初心者でもわかるBootstrap まとめ

ブートストラップは「効率良くサイト制作するためのフレームワーク」ということがわかりましたね。

ブートストラップを使うことができればコードを書く労力を減らせるので、使えるようになっておきたいところです。

ただし、使い方を知っておかないと逆に時間がかかったりすることも。ブートストラップの内容を理解して「使うべき場面かどうか」を判断できるように学んでいきましょう。

Twitter(@saisei_to_hakai)では、気になるカルチャーについてつぶやいています。レアな情報を流したりするのでフォローしといてください。