Glacial Webwork : 駆け出し未満のデザイナー(自称)のお勉強ブログ。

Bootstrap4をさくっと導入する方法

Bootstrapはtwitterが作ったCSSフレームワークです。
整ったデザインのサイトを手軽に作成できる!レスポンシブ対応のサイトも手軽に作れる!(CSSやHTMLの最低限の知識は必要ですが・・・)と、とっても便利ですがBootstrap4の情報はまだまだ少ない状況だと思います。Bootstrapの導入の仕方や使い方を検索したけど、Bootstrap3の情報が出てきて「訳分からねぇ!」状態になった人もいないでしょうか。・・・私のことです。

現在、お仕事でBootstrap4を使ったWebサイトを制作中なので、難しい話はなしにしてさくっとBootstrap4を導入できるコードを用意しました。

※2018/6/17追記

サンプルのサイトを用意して、より分かりやすいよう記事を書き直しました!

導入の仕方

Bootstrapを導入する方法は主に二つあります。一つ目はBootstrap本体をダウンロードして使う方法、二つ目はCDNを使ってBootstrapのリンクを直接HTMLファイルに記述する方法です。

難しそうなこと書いてるけど、単純に言ってしまえば保存して使うか、直リンクして使うかの違いです。CDNって何?とか気にする暇があるなら、CSSやHTMLの知識を仕入れたほうがいいと個人的には思います。

Bootstrapのダウンロード

Bootstrap · The most popular HTML, CSS, and JS library in the world.

Bootstrapのことをあれこれ調べてる人なら、細かく書くことでもないでしょう。CDNを使うならダウンロードも不要です。

いざ、導入!

TeraPadやBracketsなどのソフトでhtmlファイルに以下のコードを入力すれば、導入OKです。
私が現在制作中(2018年1月現在)のWebサイトでベースにしたコードです。

ポイント

  • 私が実際に制作の現場で用いているものと同じコードです
  • Bootstrapに必要なファイルはすべてCDNで呼び出しているので編集の必要なし
  • style.cssの置き場所やファイル名が違うなら、そこは編集してください
  • ありがちな無駄なコメントは排除(日本人には必要ない)
  • jQueryのバージョンを変更している

Bootstrap公式サイトそのままだと他所のjQueryプラグインが動かなかったため、jQueryのバージョンを下げています。2.2.4でもBootstrapのカルーセルなどは問題なく動作することを確認しています。

DEMO

あとはbodyタグ内にhtmlをどんどん打ち込んでいって、style.cssにスタイルシートを書いていくだけです!必要に応じて、JavaScript、jQueryプラグインなどを追加していきましょう。
私も頑張ってWebサイト制作します!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA