合同会社アルティマシステム
Bootstrap3

第2回目 実際にBootstrapを動かしてみよう!

前回の復習

前回は、Bootstrapのダウンロード方法・ファイル・フォルダの紹介をしました。
第2回目は、Bootstrapの読み込み方・実際に動かすところまでを紹介をします。
読み込みってなんだ?と、少しややこしく感じると思いますが全然難しいことではありません!
ゆっくり進めていきましょう!!!
こちらの記事は、初心者の方に向けての記事となっております。
Macの環境を前提に紹介をしています。

始める前の準備

Bootstrapを読み込むのに必要なフォルダ・ファイルについて書いていきます。
まず初めに、testというフォルダを作成してください。
(デスクトップで右クリックをすると、新規フォルダと表示されるのでクリックするとフォルダができます。)
testフォルダが作成できたら、次にindex.htmlというファイルを作成します。
テキストエディットを開き何も書いていない状態で、ファイル名をindex.htmlにして保存をしてください。
作成したindex.htmlと、第1回目でダウンロードした Bootstrapフォルダを testフォルダの中に入れてください。

< 例 >

test

  • Bootstrap
  • index.html

htmlファイルに必要なタグ

index.htmlに必要なタグを書いていきましょう。

< 参考 ① > htmlファイルを使用するのに必要なタグ。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <title>実際にBootstrapを動かしてみよう!</title>
 </head>
 <body>
  <p>Bootstrapを使う練習。</p>
 </body>
</html>

< 参考 ② > それぞれのタグの説明。

<!DOCTYPE html> 文書型宣言です。html5で作成するため!DOCTYPE htmlとなります。

<html lang="ja"></html> 言語を指定できます。日本語を指定する場合は、lang="ja"となります。

<head></head> ページに必要なデータ・詳細を書く場所です。

<meta charset="UTF-8"> 文字エンコーディングを指定しています。文字化けを防ぎます。

<title></title> ページのタイトルの記入欄。

<body></body>書いた内容が実際に表示されます。
テキストエディットでindex.htmlを開き< 参考 ① >を書いてみてください。
保存をしたら、index.htmlをウェブブラウザで開いて見てみましょう。(ウェブブラウザとは、Safari・Google Chromeなどのことです。)
index.htmlをウェブブラウザで開くと、< 例 >のようにBootstrapを使う練習。と書いてあるページが表示されます。

< 例 >

Bootstrapを使う練習。

Bootstrapを読み込んでみよう

次は、実際にBootstrapを読み込んでみましょう。

< 参考 ③ >

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>実際にBootstrapを動かしてみよう!</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 </head>
 <body>
  <p>Bootstrapを使う練習。</p>
  <script src="bootstrap/js/bootstrap.min.js"></script>
 </body>
</html>
緑の文字の文は、IE対策と、レスポンシブサイトにするのに必要なタグです。
赤の文字になっている文でBootstrapを読み込んでいます。※今回は、 testフォルダから見た階層での読み方になっています。
jsは、<body>タグの最後に書くと画面の表示(読み込み)速度が速くなります。
青の文字の文は、jqueryを読み込んでいます。Bootstrapのjsを使用するときに必要となります。
index.htmlに3行を書き足してみてください。

Bootstrap読み込みの確認

では、実際にBootstrapを読み込めているか確認してみましょう!!

< 参考 ④ >

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>実際にBootstrapを動かしてみよう!</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 </head>
 <body>
  <p>Bootstrapを使う練習。</p>
  <button class="btn btn-primary">ボタン</button>
  <script src="bootstrap/js/bootstrap.min.js"></script>
 </body>
</html>
index.htmlに赤の文字になっている文を足して、ウェブブラウザで確認してみてください。
Bootstrapが読み込まれていれば青いボタンが表示されます。

< 例 >

Bootstrapを使う練習。

まとめ・次回予告

Bootstrapの読み込み方について紹介をしました。
文字の打ち間違えがあると読み込まなくなってしまうので確認しながら進めてみてください。
ここまで準備できたらあとは簡単です!!
次回は、Bootstrapのコンポーネントについて紹介をしていきます!

関連投稿

第6回目 Bootstrap headerを作成してみよう!

headerについて 第6回目からは、サイトのheaderを作成する方法についての紹介をしていきます。 サイトの1番上に表示されるheaderは、デザインも動きもしっかり作りこみたいですね! レスポンシブサイトのhea...

第3回目 Bootstrap グリッドシステム!

Bootstrapのコンポーネント 第3回目は、.container(.container-fluid) .row .col-について紹介をしていきます。 Bootstrapを使用する場合は、最初に.container .row .col-の仕組みを理解しておきましょう!...

第5回目 Bootstrap .rowの入れ子!

前回の復習 前回は、offset push pullについての紹介をしました。 コンテンツの細かい配置に迷ったときにoffset push pullを使用すると全体のバランスがよくなります。 第5回目は、.rowの入れ子についての紹...

第7回目 Bootstrap headerをレスポンシブ対応にしてみよう!

前回の復習 前回は、headerの基本となるサイト名とリンクを作成しました。 第7回目は、前回作成したheaderをレスポンシブ対応にする方法の紹介をします。 最後にheaderを固定する方法の紹介もします! こ...

第1回目 簡単にホームページが作れるBootstrap!

Bootstrapについて Bootstrapとは、CSSフレームワークの1つです。Bootstrapを使用すれば難しいことを考えずに初心者でも簡単にホームページを作成できます! スマートフォン・タブレットに対応のレスポンシ...