WEB制作でBootstrapを学ぶ価値とは?【通勤排除の未来】

PCと書籍で学習する男性

悩む人

WEB制作Bootstrapを学ぶ価値ってあるのかな?

WEB制作でBootstrapを学ぶ価値ってあるのかな?現場で使われていないって聞いたんですけど、本当かな?Bootstrapを学ぶべきか、学ぶ価値があるなら効率的な学習方法を教えてください。

こんなお悩みを解決します。

✔︎本記事の内容

  • WEB制作でBootstrapを学ぶ価値とは?
  • Bootstrapを効率的に学ぶ方法
この記事を書いている僕は、フロントエンドエンジニア歴2年ほど。WEB制作で月収30万ほど稼ぎました。

最初に心を折るようで申し訳ないですが
事実として、Bootstrapは現場で使われません。

それじゃあ、学ぶ価値はあるのか?
僕は、価値アリだと思います。

※ Bootstrapとは?
HTML/CSS/JavaScriptから構成されるフレームワーク。ザックリいうと、雛形を使ってサクッとプログラムできるテンプレートのようなモノ。世界中で使われてまして、ネットでググればたくさん情報が出てきますよ。

WEB制作でBootstrapを学ぶ価値とは?

シーソーに乗る女性と男性

ズバリ、「リモートの未来をゲット」です。

余談ですが、僕はBootstrapのことを「ブーストラップ」と呼んでました。正しくは、「ブートストラップ」です。英語が少し苦手でしたが、今は克服しました。

よくある勘違い

よくある論争として、、、

Bootstrapを学ぶ意味ってありますか?ないですよ。なぜなら、企業で使われてないからです。故に、Bootstrapはオワコンです。

みたいな意見がありますよね?

僕も実際に案件をこなしてて、Bootstrapを使ってる会社はありませんでした。なので、上記の意見はあながち事実だったりします。

リモートだと、通勤で消耗しません

Bootstrapを学んだからといって案件獲得できるワケではないですし、リモート勤務になるワケでもないです。

しかし、大切なのは、何かを学んで行動しない限り人生は不自由に拘束される、、、という事実です。

僕の場合は、Bootstrapを学びポートフォリオも作り、ガンガン行動したら案件を獲得し、リモートをサクッと3ヶ月で実現した、、、という事実です。

せっかく、Bootstrapという素晴らしい技術があるので、使わない手はないかと。リモート勤務を手に入れるチャンスが減りますね。

Bootstrapで使うのは、一部だけです

Bootstrapの魅力は、グリッドシステムです。
要は、コンテンツの分割化です。

ズバリ「col」でして、クラスにつけるだけでサクッとカラムを作れます。しかも、レスポンシブ対応。

詳しいグリッドの使い方は、下記をご覧ください。

>> Bootstrap | Grid system

Bootstrapなサイト

Bootstrapを使うと、下記ようなサイトが作れます。

Bootstrapのグリッドが特徴です。

Bootstrapの案件もなくはない

Bootstrapの案件例

Bootstrapの案件例



ランサーズ
クラウドワークスで案件を探すと、2022年でもチラホラ見受けられます。

というわけで、1件でも受注すれば、物価の安い国に1ヶ月ほどバカンスできますね。

「Bootstrap=意味はない」と遮断するのは、マコトに如何なものかと。

Bootstrapは、Flexboxを学ぶときも役立ちますし、「使わない」と理由だけで学習を排除するのは、わりと機会損失だったりします。秒速で身につけて、リモートの可能性を広げましょう。

Bootstrapを効率的に学ぶ方法←YouTubeでOK

長い望遠鏡で未来を覗く男性

YouTubeで写経します。
タダで学べる時代に、感謝ですね。

2022年だと、Bootstrap5が最新です。jQueryの削除などがありますが、詳しくは、Bootstrap5への移行をご覧ください。

Bootstrapは、YouTubeで学ぶべし

理由は、手を動かすことで
Bootstrapの機能を体感的に理解できるから。

YouTubeで「Bootstrap tutorial」と検索。
オススメは、下記の動画です。

わかりにくかったら、日本語の動画もアリかと。
もし暇なら、手を動かしてみましょう。

結構、ボリューミーですが、1本1時間くらいで写経できますよ。

無料で学べるのは、素晴らしいですね。

本で学ぶ必要は、なし

参考書籍なんて、使う必要はありません。
無料で学べる時代です。

書籍代だけで3,000円くらいしまして、その知識は動画やネットでサクッと手に入ります。

ぶっちゃけ、書籍で学んでもいいカモですが、手を動かすことの方が大切です。控えめにいって、ムダなのでやめましょう。

ポートフォリオも作りましょう

基礎を学んだ後にやるべきことは
ポートフォリオ制作です。

案件を受注をするには、ポートフォリオが必須でして、コレがあなたのスキル証明となります。

上記Bootstrapの動画で学んだら
アウトプットして技術を深めましょう。

ポートフォリオ制作に役立つ記事

ポートフォリオを作る3人の男性 【名刺不要】ポートフォリオに最適なCarrdの使い方【ノーコードでOK】  【悲報】模写コーディングは意味ありません【ヒント:デザインカンプ】

Bootstrapの実装方法

下記の2通りです。

  • 方法①:Bootstrapをダウンロードする
  • 方法②:BootstrapのCDNを利用する

CDN経由で実装した方がわかりやすいので
自分で調べて実装してみてください。

>> Bootstrap公式サイト

【裏ワザ】Bootstrap臭を消す方法

Bootstrapを実装したことある人ならわかるのですが、かなりコテコテ感なサイトになります。

界隈では「Bootstrap臭」と呼ばれてまして
なんかダサいサイトが完成します。

その解決方法は、下記のとおりです。

  • 手順①:最初にBootstrapを読み込む
  • 手順②:その直下にCSSのスタイルシートを読み込む

こうすることで、独自のCSSに上書きされ、Bootstrap感がなくなります。下記に、ヒントも載せておきますね。

<link rel="stylesheet" href="bootstrapのCDN">
<link rel="stylesheet" href="css/style.css">

Bootstrapは、学ぶ価値アリです

さいごに、本記事の内容をまとめます。

  • Bootstrapは、WEB制作の現場では使われない
  • じゃあ、学ぶ価値はないのか?
  • 答えはNO、価値アリです
  • なぜなら、リモートで働ける可能性があるから
  • サクッと、YouTubeでスキルを身につけましょう
  • やることは、Bootstrapでポートフォリオを作ることです
  • リモート未来の可能性を広げよう

ザックリとこんな感じです。

Bootstrapも奥が深いので
すべてを学ぼうとするとキリがないです。

なので、グリッドの理解をメインに学習れば
Bootstrapの醍醐味を体感できるかと。

効率的にスキルを身につけるには、こうした「引き算方式」で学習することをオススメします。

楽しいコードライフを送りましょう。
リモートの未来は、すぐそこです。