Bootstrap

1
Copyright (c) HEART QUAKE All rights reserved .
Bootstrap
０からHTMLを書いてかっこいいサイトを作るのは
なかなか⼤大変です。
そこで、Bootstrapというテンプレート集の様なものを
⽤用いて、簡単にかっこいいサイトを作ってみましょう。

2
Bootstrap(1/9)
l Bootstrapとは・・・
- かっこいいサイトを簡単に作れるテンプレート集のようなもの
ü 本当はテンプレート集ではなくCSSフレームワークという

3
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
Windowsの⽅方へ
- Windowsの⼈人限定！
- Step1. Zipファイルがデスクトップにできる
ü zipとは圧縮されているファイルであり、
ü 解凍しないと使えない
- Step2. ダブルクリックするとフォルダが
- 表⽰示される
- Step3. フォルダをデスクトップに
- 移動する
zipファイル
解凍後の
フォルダ
補⾜足

5
Bootstrap(3/9)
- Step3:
- docs examples carousel index.html をダブルクリックする

6
Bootstrap(4/9)
- Step4:以下の様なサイトが表⽰示されたらOKです
ü Bootstrapとはこのようなかっこいいページが
簡単に作れるテンプレート集なのです。
- 他のテンプレートも⾒見見てみましょう。

7
Bootstrap(5/9)
- Step5: index.htmlを右クリックでSublime Text2で開いてみま
しょう。
ü Windowsの⽅方は「プログラムから開く」でSublimeを選択し
ましょう。
ü 上⼿手く出来なかった⼈人はSublime Text2の左上の
- File Open から開いてみましょう。

8
Bootstrap(6/9)
- Step6: 下のサイトの Example headline. という⽂文字を
変えてみましょう
- Step7: 89⾏行行⽬目の Example headline.の⽂文字を
「◯◯のページへようこそ」にしてみましょう。
ü h1タグを使っているので⽂文字が⼤大きかったんですね

9
Bootstrap(7/9)
- Step8: 変更更できたら上書き保存してみましょう。
- Step9: index.htmlを
ダブルクリックすると
変更更が反映されています。

10
Bootstrap(8/9)
- Step10: 続いて、「Sign up Today」ボタンの⾊色を
変えてみましょう
- Step11: Bootstrapのサイトで⾊色の変え⽅方を⾒見見てみましょう。
ü CSSタブのButtonsのページをみてみましょう。
ü btn-primaryと書くと⻘青、btn-dangerなら⾚赤になるようです

11
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つのフォルダをフォルダごとアップロードする
必要があります。

13
Bootstrapをアップロードする(2/2)
- 動作を確認しましょう
ü マイフォルダから examples carousel を開くと
ü 以下の様なサイトが表⽰示されました

14
お疲れ様でした！！

Bootstrap

More Related Content

Viewers also liked

Similar to Bootstrap

More from Jun Chiba

Bootstrap