Bootstrapの導入方法【インストール不要 コピペだけでOK】

Bootstrapプログラミング備忘録
https://getbootstrap.jp/からの画像
スポンサーリンク

どうも、ちゃんかま(@chan_kama0244)でございます。

もしかしてBootstrapの導入方法についてお調べですか? 
Bootstrapの導入に、面倒なインストールは不要ですよ。

私は点数計算を行うWebアプリを制作する過程で、Bootstrapを導入して使用しました。
Bootstrapはインストール不要で、コードのコピペだけで導入することが出来ました。

そこで今回は、そのBootstrapの導入方法について解説します。

ちなみに私が作ったアプリはこんな感じです。(↓GIF動画参照)

点数計算アプリの動作の様子
点数計算アプリの動作の様子

「+」や「ー」のボタンを押すと数字がカウントされて、その合計や条件に応じた加算点を自動で計算する、というアプリです。
アプリの外観はBootstrapで作りました。

この記事ではこんな疑問や悩みにお答えします
  • Bootstrapの導入方法を知りたい
  • 時間無いから、コピペするだけで直ぐにBootstrapが使えるようになるコードが欲しい
この記事の内容
  • Bootstrapの導入方法
  • 実際にそのままコピペでするだけで、Bootstrapを導入することが出来るコードも記載してます

Bootstrapの導入方法【そのままコピペで使えるコードを記載】

index.htmlに下記のコードをコピペするだけで、Bootstrapを使うことが出来るようになります。

そのままコピペで使えるコードを下記に記載します。
「解説とか不要」、「とりあえずコードが欲しい」という方はどうぞ使ってください。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<!-- Normalize CSS -->
	<link rel="stylesheet" href="normalize.css">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

	<!-- Style CSS -->
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- Bootstrap JavaScript -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

これだけで、Bootstrapの導入は完了です。
では、上記のコードの内容について解説してみます。

Bootstrapとは?

BootstrapはCSSやJavaScriptのライブラリです。

Bootstrap
世界で最も人気のあるフロントエンドフレームワーク

例えば、ボタンの上にマウスが乗ったらフワッと色が変わる、そんなボタンを作りたい時。
CSSやJavaScript本体では、色の指定やボタンの形、アニメーションのコードなどを1つ1つ書いていく必要があります。

一方、Bootstrapなら「class=”btn btn-primary”」とHTMLの<button>要素にクラスを指定してあげるだけでOKです。
すると、「このクラスの<button>要素にはこのボタン!」とBootstrapが判断して、勝手に良い感じのボタンを作ってくれます。

Bootstrapはカンタンに良い感じのデザイン、アニメーションを作ることが出来ます

Bootstrapは面倒なインストールは不要、コピペするだけ

BootstrapはCDNから読み込む方法で使用します。

「CDNって何?」と思った方もいるかもしれませんが、要するにコードをコピペするだけでBootstrapを導入することが出来るということですね。
もう少し詳しく解説すると、インストールは自分自身のパソコンにBootstrapのファイルを保存して使うのに対して、CDNではCDNというWebサイトからファイルを都度読み込んで使う方法になります。

BootstrapはCSSとJavascriptの2種類のファイルを読み込む

BootstrapではCSSとJavaScript、2種類のファイルを読み込む必要があります。

BootstrapのCSSファイルを読み込むコードは下記になります。

Bootstrap CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

これを、HTMLの<head></head>内にコピペします。

次は、BootstrapのJavaScriptファイルの読み込みです。
下記のコードになります。

Bootstrap JavaScript
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

こちらは、HTMLの</body>タグ直前にコピペします。

Bootstrapの導入には、<head>タグ内にBootstrapのCSSファイルをコピペ、</body>タグ直前にBootstrapのJavaScriptファイルをコピペ

style.cssの読み込み

Bootstrapを導入しても、ある程度のカスタマイズは必要かと思われます。
そこで style.cssファイルを作成し、それも読み込んでおきます。

style.cssファイルを読み込むコードは下記になります。

<link rel="stylesheet" href="style.css">

これを、HTMLの<head></head>内のBootstrapのCSSファイルの後にコピペします。

「BootstrapのCSSファイルの後」というのがポイントです。
Bootstrapの前だと、style.cssがBootstrapに上書きされてしまい、CSSでカスタマイズすることが出来なくなります。

アプリ外観の大枠はBootstrapで作成し、細かい修正はstyle.cssで調整する、という感じです。

style.cssはBootstrapのcssの後に読み込む

normalize.css の読み込み

最後に、忘れてはいけないnormalize.cssも読み込んでおきます。
「normalize.cssって何?」という方は、下記のサイトを参考にどうぞ!

CSSのnormalize.cssの使い方を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
初心者向けにCSSのnormalize.cssの使い方について解説しています。CSSはブラウザの種類によって表示が異なってしまうことがあります。タグのパッディングやマージンなどを全てリセットせずに一部を残した物がnormalize.cssになります。

下記の Normalize.css のページからファイルをダウンロードします。

Normalize.css: Make browsers render all elements more consistently.

normalize.css を読み込むためのコードは、下記になります。

<link rel="stylesheet" href="normalize.css">

これを、HTMLの<head></head>内にコピペします。
normalize.css は基礎となるcssなので、読み込み位置はBootstrapのCSSやstyle.cssよりも前にコピペします。

normalize.css の読み込みを忘れずに! 読み込みは一番最初に読み込むこと!

おわりに

Bootstrapの導入方法について解説してみました。
Bootstrapはカンタンに良い感じのデザイン、アニメーションを作ることが出来る、便利なCSSライブラリです。
それをコードのコピペだけで、導入することが出来ました。

今回の記事が皆さんの参考になれば幸いです。
以上、ちゃんかまでした。

コメント

タイトルとURLをコピーしました