悩む人
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なサイト
Bootstrapを使うと、下記ようなサイトが作れます。
Bootstrapのグリッドが特徴です。
Bootstrapの案件もなくはない
Bootstrapの案件例
ランサーズやクラウドワークス
で案件を探すと、2022年でもチラホラ見受けられます。
というわけで、1件でも受注すれば、物価の安い国に1ヶ月ほどバカンスできますね。
「Bootstrap=意味はない」と遮断するのは、マコトに如何なものかと。
Bootstrapは、Flexboxを学ぶときも役立ちますし、「使わない」と理由だけで学習を排除するのは、わりと機会損失だったりします。秒速で身につけて、リモートの可能性を広げましょう。
Bootstrapを効率的に学ぶ方法←YouTubeでOK
YouTubeで写経します。
タダで学べる時代に、感謝ですね。
2022年だと、Bootstrap5が最新です。jQueryの削除などがありますが、詳しくは、Bootstrap5への移行をご覧ください。
Bootstrapは、YouTubeで学ぶべし
理由は、手を動かすことで
Bootstrapの機能を体感的に理解できるから。
YouTubeで「Bootstrap tutorial」と検索。
オススメは、下記の動画です。
- Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3：英語ですが写経しましょう
- Build A Complete HTML & CSS Website with Bootstrap 4：英語ですが写経しましょう
わかりにくかったら、日本語の動画もアリかと。
もし暇なら、手を動かしてみましょう。
結構、ボリューミーですが、1本1時間くらいで写経できますよ。
無料で学べるのは、素晴らしいですね。
本で学ぶ必要は、なし
参考書籍なんて、使う必要はありません。
無料で学べる時代です。
書籍代だけで3,000円くらいしまして、その知識は動画やネットでサクッと手に入ります。
ぶっちゃけ、書籍で学んでもいいカモですが、手を動かすことの方が大切です。控えめにいって、ムダなのでやめましょう。
ポートフォリオも作りましょう
基礎を学んだ後にやるべきことは
ポートフォリオ制作です。
案件を受注をするには、ポートフォリオが必須でして、コレがあなたのスキル証明となります。
上記Bootstrapの動画で学んだら
アウトプットして技術を深めましょう。
ポートフォリオ制作に役立つ記事
【名刺不要】ポートフォリオに最適なCarrdの使い方【ノーコードでOK】
【悲報】模写コーディングは意味ありません【ヒント：デザインカンプ】
Bootstrapの実装方法
下記の2通りです。
- 方法①：Bootstrapをダウンロードする
- 方法②：BootstrapのCDNを利用する
CDN経由で実装した方がわかりやすいので
自分で調べて実装してみてください。
【裏ワザ】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の醍醐味を体感できるかと。
効率的にスキルを身につけるには、こうした「引き算方式」で学習することをオススメします。
楽しいコードライフを送りましょう。
リモートの未来は、すぐそこです。
