More than 5 years have passed since last update.

Bootstrap 4 でラクラクWEBページ制作　～導入編～

Posted at 2018-12-07

サポーターズColabにて2018/11/26に開催されたBootstrapでラクラクWEBページ制作の講義ノートです。
WEBページ作ったことないよーって人向けの内容です。
一応調べたりしながら書いているので大体合ってるハズですが、間違いや誤植等を見つけた際は下のコメント欄又は@gnocckiに指摘頂けると幸いです。

前書き

Bootstrap公式サイト
全3回の内の1回目です。
導入編なのでHello,Worldができるまでが目標です。
本稿でのバージョンは Bootstrap 4.1.3 及び jQuery 3.3.1 です。
HTMLでHello, Worldしたことある程度の人向けの内容です
CSSもスタイルシートね、(･∀･)/ﾊｰｲってな人向けです
JavaScriptについてはなにそれおいしいの？という状態でOKです
全3回を通してWEBページを作ることまでを目的とします。動きは付けません。 ~~というか私がJavaScript書いたことないので分からない~~
2018/12/7 現在公開しているのは導入編までです。12月中に全部上げられるよう頑張ります。

１ BootStrapの準備

まずはBootStrapを使えるように準備をします。ここでは2通りの紹介をします。
また、本稿では以下のようなフォルダ構成であることを前提として書かれています。

resource/
    ├ css/
    ├ img/
    ├ js/
    └ ###.html

１.１ローカルに直接Bootstrapを設置する

~~導入簡単だけどあとあと面倒臭くなるほう~~
ローカルに直接BootStrapを導入する場合、2つのファイルをWEB上からダウンロードする必要があります。

Bootstrap
- 上のリンクで飛んだ公式サイトのdownloadボタンからBootStrapをダウンロードしてください。zip形式で落ちるので解凍して使います。
jQuery
- 上サイトの the compressed, production jQuery (バージョン数) slim buildというフォルダをダウンロードして下さい。ダウンロードできない場合は右クリック→名前を付けてリンク先を保存でjsファイルをダウンロードできます。

　Bootstrapの本体を解凍するとcssとjsファイルが中に入っているので、bootstrap.css及びbootstrap.bundle.min.jsをresourceフォルダ内のcssフォルダ、jsフォルダにそれぞれ投げ込みます。また、jQueryのサイトから落としてきたjquery-3.3.1.slim.build.jsもjsフォルダに配置します。

resource/
    ├ css/
    |　└ bootstrap.css
    ├ img/
    ├ js/
    |  ├ bootstrap.bundle.min.js
    |　└ jquery-3.3.1.slim.build.js
    └ ###.html

１.２ CDNでBootStrapを利用する

CDN[Content Delivery Network]

　CDNの利用のために特別な準備は必要ありません。CDNとはコンテンツデリバリネットワークと呼ばれる仕組みのことで、ざっくりとした説明をすると、オンライン上にある Bootstrap.css や bootstrap.bundle.min.js , jquery-3.3.1.slim.build.js にアクセスして利用することができる仕組みです。CDNの詳細については上記のリンク先を参照してください。CDNを使うことで相対パスや独自の設定について気にする必要が無くなります。

２ Hello, World をしよう

新しくBootStrapを始めるときは、いにしえより伝わる儀式としてHello, Worldをしましょう。

２.１.１ローカルに配置したBootstrapを適用

ローカルに設置する場合は以下のようにhtmlファイルを作成します。

HelloWorld.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device, initial-scale=1,  shrink-to-fit-no">
    <link rel="stylesheet" href="css/bootstrap.css">　<!-- CDNと異なるところ -->
    <title>ラクラクWEBページ制作</title>
</head>

<body>
　　<h1>Hello, World</h1>

    <script src="js/jquery-3.3.1.slim.min.js"></script>　<!-- CDNと異なるところ -->
    <script src="js/bootstrap.bundle.js"></script>　<!-- CDNと異なるところ -->
</body>
</html>

　ローカルに css や js ファイルを置くことはおすすめしません。私見ですが、デメリットとしては以下のようなことが挙げられます。

css や js ファイルの相対パスがズレてしまうとレイアウトが適用できない。
- フォルダの編集が行いにくくなり管理が煩雑になる。
css や js ファイルが独自なものに編集されている可能性がある。
- ~~手前勝手なcssなんぞ知らんがな~~
- 独自のcssやjsファイルを作った場合は別ファイルに分けて、パスも改めて別に通しましょう。

２.１.２ CDNを用いたBootstrapを適用

CDNを用いてBootStrapを使う場合は以下のようにします。当たり前ですが直打ち厳禁です、コピペして張りましょう。

HelloWorld.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device, initial-scale=1,  shrink-to-fit-no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">　<!-- ローカル配置と異なるところ -->
    <title>ラクラクWEBページ制作</title>
</head>

<body>
　　<h1>Hello, World</h1>

　　<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><!-- ローカルと異なるところ -->
　　<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><!-- ローカルと異なるところ -->
　　<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script><!-- ローカルと異なるところ -->
</body>

</html>

２.２初めてのBootstrap

まずは作成したhtmlファイルはフォルダの###.htmlの部分に配置する。

resource/
    ├ css/
    |　└ bootstrap.css
    ├ img/
    ├ js/
    |  ├ bootstrap.bundle.min.js
    |　└ jquery-3.3.1.slim.build.js
    └ HelloWorld.html

　作成したhtmlを開いてみましょう。以下のようにHello,Worldが表示されます。

　作成したhtmlでBootstrapを使ってみましょう。まずは Hello, World のフォントの色を変えてみます。

bodyタグ内

 <h1 class="text-success"> Hello, World </h1>

　Hello, World のフォントの色が緑色になったらBootstrapの適用ができています。

やったぜ

　導入完了です、おつかれさまでした。

脚注

編集履歴

2018/12/7 公開

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Bootstrap 4 でラクラクWEBページ制作 ～導入編～

前書き

目次