1 
Copyright (c) HEART QUAKE All rights reserved . 
Bootstrap 
0からHTMLを書いてかっこいいサイトを作るのは 
なかなか⼤大変です。 
そこで、Bootstrapというテンプレート集の様なものを 
⽤用いて、簡単にかっこいいサイトを作ってみましょう。
2 
Copyright (c) HEART QUAKE All rights reserved . 
Bootstrap(1/9) 
l Bootstrapとは・・・ 
- かっこいいサイトを簡単に作れるテンプレート集のようなもの 
ü 本当はテンプレート集ではなくCSSフレームワークという
3 
Copyright (c) HEART QUAKE All rights reserved . 
Bootstrap(2/9) 
l Bootstrapの使い⽅方(version 3.2.0時点 2014/10/23) 
- Step1:Download Sourceから開発キッドを 
ダウンロードする 
これをクリック 
- Step2:ダウンロードしたbootstrap-3.2.0.zipを 
ダブルクリックする(Zipとは圧縮という意味) 
ü bootstrap-3.2.0フォルダが作成される
4 
Copyright (c) HEART QUAKE All rights reserved . 
Windowsの⽅方へ 
- Windowsの⼈人限定! 
- Step1. Zipファイルがデスクトップにできる 
ü zipとは圧縮されているファイルであり、 
ü 解凍しないと使えない 
- Step2. ダブルクリックするとフォルダが 
- 表⽰示される 
- Step3. フォルダをデスクトップに 
- 移動する 
zipファイル 
解凍後の 
フォルダ 
補⾜足
5 
Copyright (c) HEART QUAKE All rights reserved . 
Bootstrap(3/9) 
- Step3: 
- docs  examples  carousel  index.html をダブルクリックする
6 
Copyright (c) HEART QUAKE All rights reserved . 
Bootstrap(4/9) 
- Step4:以下の様なサイトが表⽰示されたらOKです 
ü Bootstrapとはこのようなかっこいいページが 
簡単に作れるテンプレート集なのです。 
- 他のテンプレートも⾒見見てみましょう。
7 
Copyright (c) HEART QUAKE All rights reserved . 
Bootstrap(5/9) 
- Step5: index.htmlを右クリックでSublime Text2で開いてみま 
しょう。 
ü Windowsの⽅方は「プログラムから開く」でSublimeを選択し 
ましょう。 
ü 上⼿手く出来なかった⼈人はSublime Text2の左上の 
- File  Open から開いてみましょう。
8 
Copyright (c) HEART QUAKE All rights reserved . 
Bootstrap(6/9) 
- Step6: 下のサイトの Example headline. という⽂文字を 
変えてみましょう 
- Step7: 89⾏行行⽬目の Example headline.の⽂文字を 
「◯◯のページへようこそ」にしてみましょう。 
ü h1タグを使っているので⽂文字が⼤大きかったんですね
9 
Copyright (c) HEART QUAKE All rights reserved . 
Bootstrap(7/9) 
- Step8: 変更更できたら上書き保存してみましょう。 
- Step9: index.htmlを 
ダブルクリックすると 
変更更が反映されています。
10 
Copyright (c) HEART QUAKE All rights reserved . 
Bootstrap(8/9) 
- Step10: 続いて、「Sign up Today」ボタンの⾊色を 
変えてみましょう 
- Step11: Bootstrapのサイトで⾊色の変え⽅方を⾒見見てみましょう。 
ü CSSタブのButtonsのページをみてみましょう。 
ü btn-primaryと書くと⻘青、btn-dangerなら⾚赤になるようです
11 
Copyright (c) HEART QUAKE All rights reserved . 
Bootstrap(9/9) 
- Step12: 91⾏行行⽬目のbtn-primaryの部分を⾚赤くなるように変更更して 
みましょう。(上書き保存するのを忘れずに!) 
- Step13: index.htmlをダブルクリックすると 
変更更が反映されています。 
ü btn-lgと書くとボタンのサイズを⼤大きくしてくれる 
ü http://getbootstrap.com/css/#buttons-sizes
12 
Bootstrapをアップロードする(1/2) 
- Bootstrapをアップロードするには 
ü docsフォルダの中の、assets、dist、examples 
ü の3つのフォルダをフォルダごとアップロードする 
必要があります。 
Copyright (c) HEART QUAKE All rights reserved .
13 
Bootstrapをアップロードする(2/2) 
- 動作を確認しましょう 
ü マイフォルダから examples  carousel を開くと 
ü 以下の様なサイトが表⽰示されました 
Copyright (c) HEART QUAKE All rights reserved .
14 
Copyright (c) HEART QUAKE All rights reserved . 
お疲れ様でした!!

Bootstrap

  • 1.
    1 Copyright (c)HEART QUAKE All rights reserved . Bootstrap 0からHTMLを書いてかっこいいサイトを作るのは なかなか⼤大変です。 そこで、Bootstrapというテンプレート集の様なものを ⽤用いて、簡単にかっこいいサイトを作ってみましょう。
  • 2.
    2 Copyright (c)HEART QUAKE All rights reserved . Bootstrap(1/9) l Bootstrapとは・・・ - かっこいいサイトを簡単に作れるテンプレート集のようなもの ü 本当はテンプレート集ではなくCSSフレームワークという
  • 3.
    3 Copyright (c)HEART QUAKE All rights reserved . Bootstrap(2/9) l Bootstrapの使い⽅方(version 3.2.0時点 2014/10/23) - Step1:Download Sourceから開発キッドを ダウンロードする これをクリック - Step2:ダウンロードしたbootstrap-3.2.0.zipを ダブルクリックする(Zipとは圧縮という意味) ü bootstrap-3.2.0フォルダが作成される
  • 4.
    4 Copyright (c)HEART QUAKE All rights reserved . Windowsの⽅方へ - Windowsの⼈人限定! - Step1. Zipファイルがデスクトップにできる ü zipとは圧縮されているファイルであり、 ü 解凍しないと使えない - Step2. ダブルクリックするとフォルダが - 表⽰示される - Step3. フォルダをデスクトップに - 移動する zipファイル 解凍後の フォルダ 補⾜足
  • 5.
    5 Copyright (c)HEART QUAKE All rights reserved . Bootstrap(3/9) - Step3: - docs examples carousel index.html をダブルクリックする
  • 6.
    6 Copyright (c)HEART QUAKE All rights reserved . Bootstrap(4/9) - Step4:以下の様なサイトが表⽰示されたらOKです ü Bootstrapとはこのようなかっこいいページが 簡単に作れるテンプレート集なのです。 - 他のテンプレートも⾒見見てみましょう。
  • 7.
    7 Copyright (c)HEART QUAKE All rights reserved . Bootstrap(5/9) - Step5: index.htmlを右クリックでSublime Text2で開いてみま しょう。 ü Windowsの⽅方は「プログラムから開く」でSublimeを選択し ましょう。 ü 上⼿手く出来なかった⼈人はSublime Text2の左上の - File Open から開いてみましょう。
  • 8.
    8 Copyright (c)HEART QUAKE All rights reserved . Bootstrap(6/9) - Step6: 下のサイトの Example headline. という⽂文字を 変えてみましょう - Step7: 89⾏行行⽬目の Example headline.の⽂文字を 「◯◯のページへようこそ」にしてみましょう。 ü h1タグを使っているので⽂文字が⼤大きかったんですね
  • 9.
    9 Copyright (c)HEART QUAKE All rights reserved . Bootstrap(7/9) - Step8: 変更更できたら上書き保存してみましょう。 - Step9: index.htmlを ダブルクリックすると 変更更が反映されています。
  • 10.
    10 Copyright (c)HEART QUAKE All rights reserved . Bootstrap(8/9) - Step10: 続いて、「Sign up Today」ボタンの⾊色を 変えてみましょう - Step11: Bootstrapのサイトで⾊色の変え⽅方を⾒見見てみましょう。 ü CSSタブのButtonsのページをみてみましょう。 ü btn-primaryと書くと⻘青、btn-dangerなら⾚赤になるようです
  • 11.
    11 Copyright (c)HEART QUAKE All rights reserved . Bootstrap(9/9) - Step12: 91⾏行行⽬目のbtn-primaryの部分を⾚赤くなるように変更更して みましょう。(上書き保存するのを忘れずに!) - Step13: index.htmlをダブルクリックすると 変更更が反映されています。 ü btn-lgと書くとボタンのサイズを⼤大きくしてくれる ü http://getbootstrap.com/css/#buttons-sizes
  • 12.
    12 Bootstrapをアップロードする(1/2) -Bootstrapをアップロードするには ü docsフォルダの中の、assets、dist、examples ü の3つのフォルダをフォルダごとアップロードする 必要があります。 Copyright (c) HEART QUAKE All rights reserved .
  • 13.
    13 Bootstrapをアップロードする(2/2) -動作を確認しましょう ü マイフォルダから examples carousel を開くと ü 以下の様なサイトが表⽰示されました Copyright (c) HEART QUAKE All rights reserved .
  • 14.
    14 Copyright (c)HEART QUAKE All rights reserved . お疲れ様でした!!