Bootstrap s1

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.3.7時点 2016/8/20)
- Step1:Download Sourceから開発キッドを
ダウンロードする
- Step2:ダウンロードしたbootstrap-3.3.7.zipを
ダブルクリックする（Zipとは圧縮という意味）
übootstrap-3.3.7フォルダが作成される
これをクリック

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

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

6
Bootstrap(4/9)
- Step4:以下の様なサイトが表⽰されたらOKです
üBootstrapとはこのようなかっこいいページが
簡単に作れるテンプレート集なのです。
ここの動く部分をカルーセル(Carousel)と呼ぶ

7
Bootstrap(5/9)
- Step5: index.htmlをSublime Text2で編集してみましょう
Fileをクリック1
2 Openを
クリック
3
デスクトップの
bootstrapフォルダの、
docs > examples > carousel > index.html
を選択する

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

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

10
Bootstrapをアップロードする(1/2)
- Bootstrapをアップロードするには
üdocsフォルダの中の、assets、dist、examples
üの3つのフォルダをフォルダごとアップロードする
必要があります。
assets,dist,examples
の３つを選択
1
2 「..」の
部分にアップロード

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

12
お疲れ様でした！！

Bootstrap s1

Recommended

Recommended

More Related Content

Similar to Bootstrap s1

Similar to Bootstrap s1 (20)

More from Jun Chiba

More from Jun Chiba (20)

Bootstrap s1