Bootstrapの基本を学ぼう①初級編

Webアプリ開発コース初級編

WEBサイトとミニアプリを作れるようになろう

Bootstrap学習編

DAY 11

Bootstrapの基本を学ぼう①

HTML/CSSのコーディングでは、class名や対応するCSSファイルは全て自作する必要がありました。ですが、世の中には読み込むだけですぐに使える『CSSフレームワーク』というものが存在します！

Bootstrapは最も有名なCSSフレームワークの一つで、利用することでコーディングスピードが飛躍的に上がります。

元々はTwitter社内で開発されて使われていました。今は誰でも簡単に使うことができますし、ライセンスはMIT License（商用利用可能）なので、自分で仕事を受けるときに使えますよ！

まずはBootstrapの基礎を学んで、効率的にコーディングできるようになりましょう！

TIPS

Bootstrapの基本的な使い方を解説していきます！以下の公式サイトを開いて、動画と一緒に確認しながら進めていきましょう。

「なんでCSSも書いてないのにこんなことができるの？」という方のために補足しておくと、Bootstrapは既に用意されたスタイルシートを読み込んでいます。

実感がわかない人は、実際にBootstrapのスタイルシートがあるURLにアクセスしてみましょう↓
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css

アクセスしたら、動画内で使っていた「text-primary」というclassを検索して見つけてみてください。

.text-primary{color:#007bff!important}　のように、文字色を青くするclassが定義されていることがわかるはず。

このファイルを<link>タグで読み込んでいるので、用意されたclass名を書くだけで見た目が変えられるというわけです^^

Bootstrapの最新バージョンは5.xですが動画内では4.xのバージョンを使っています。動画通りに進めるためにサイトの右上からバージョン選択をしてバージョン4.6のものを使用するようにしてください！

お疲れ様でした！

Bootstrapの凄さ、なんとなく実感できましたか？
明日からも引き続きBootstrapの使い方を解説していきます！