1. 1
メニュー(ポータル画⾯面)
Copyright (c) HEART QUAKE All rights reserved .
の作成

2. 2
Copyright (c) HEART QUAKE All rights reserved .
メニューを作ろう(1/7)
l メニュー画⾯面を作ろう
- まずはシステムのメインとなるメニュー画⾯面を作りましょう。
ü メニュー画⾯面から登録画⾯面にリンクするなど、
ü ポータルとしての役割となります。
- 今回はBootstrapのdashboardというテンプレートを使います。

3. 3
Copyright (c) HEART QUAKE All rights reserved .
メニューを作ろう(2/7)
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 .
メニューを作ろう(3/7)
- Step3: デスクトップにできたフォルダの中の
- docs examples dashboard index.html
- をダブルクリックする

6. 6
Copyright (c) HEART QUAKE All rights reserved .
メニューを作ろう(4/7)
- Step4:以下の様なサイトが表⽰示されたらOKです

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

8. 8
Copyright (c) HEART QUAKE All rights reserved .
メニューを作ろう(6/7)
- Step6: 右のサイトの Overviewという⽂文字を
変えてみましょう
- Step7: 64⾏行行⽬目の Overview の⽂文字を
「登録する」にしてみましょう。
ü classをactiveにすると背景が⻘青くなるようですね。

9. 9
Copyright (c) HEART QUAKE All rights reserved .
メニューを作ろう(7/7)
- Step8: 変更更できたら上書き保存してみましょう。
- Step9: index.htmlを
ダブルクリックすると
変更更が反映されています。

10. 10
Bootstrapをアップロードする(1/2)
- Bootstrapをアップロードするには
ü docsフォルダの中の、assets、dist、examples
ü の3つのフォルダをフォルダごとアップロードする
必要があります。
Copyright (c) HEART QUAKE All rights reserved .

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

12. 12
Copyright (c) HEART QUAKE All rights reserved .
お疲れ様でした！！