レスポンシブサイトが簡単にできる！「Bootstrap(ブートストラップ)」の使い方:第２章

はじめに

こんにちは^ ^
Room8のWeb制作担当。お酒が恋人、あやかです。

前回の”レスポンシブサイトが簡単にできる！「Bootstrap(ブートストラップ)」の使い方:第1章”では、Bootstrapについて説明をしましたが、今回は設定編へ移りたいと思います。

前回のブログはこちら→
・レスポンシブサイトが簡単にできる！「Bootstrap(ブートストラップ)」の使い方:第1章

Bootstrap(ブートストラップ)を使うための準備

Bootstrapを使うためには準備が必要になります。
その場合、以下の2つの方法があります。

• Bootstrapをダウンロードしてローカルに読み込む
• Bootstrapをインターネット経由で読み込む

今回は前者のBootstrapをダウンロードしてローカルに読み込む方法を紹介したいと思います。

《１》Bootstrapの公式サイトからダウンロードを行います。

“Download Bootstrap”をクリックします。

《２》画面が変わったら、一番左のBootstrapの”Download Bootstrap”をクリックします。

《3》ダウンロードが完了したら

使用するファイルはこちら

• bootstrap.min.css
• bootstrap.min.js

《4》HTMLのhead内へ記述します。

    !-- bootstrap.min.cssの読み込み --
    link href="css/bootstrap.min.css" rel="stylesheet"

    !-- bootstrap.min.jsの読み込み --
   　　script src="js/bootstrap.min.js"

※jQueryの読み込みも忘れずに。

《5》ファイルをアップロードします。

作成したhtmlファイルは、先ほどダウンロードしたBootstrapのフォルダの中へ保存します。

《６》準備完了！

注意するべきこと

必ず、BootstrapのJavaScript(bootstrap.min.js)よりも、jQueryを先に読み込んでください。
そうしないと、動かない場合があります。

さいごに

いかがでしたか？
Bootstrapの設定は、意外と簡単かと思います。
これを機会にBootstrapを活用して作業の効率化を目指してください^ ^

次回は、本格的に実践へ移りたいと思います。

前回のブログはこちら→
・レスポンシブサイトが簡単にできる！「Bootstrap(ブートストラップ)」の使い方:第1章