1. 1
Copyright (c) 株式会社HEART QUAKE All rights reserved .
carouselの画像変更

2. 2
Copyright (c) 株式会社HEART QUAKE All rights reserved .
carouselでの画像表⽰(1/4)
- Step1: 下のサイトの 背景画像を変えてみましょう
画像が変更されている

3. 3
Copyright (c) 株式会社HEART QUAKE All rights reserved .
carouselでの画像表⽰(2/4)
- Step2:表⽰したい画像を探す
ü横が⻑い画像を使っています。
ü画像の形式 = 拡張⼦ を把握すること！
- windowsなら 画像を右クリック⇒プロパティ
- macなら 画像を右クリック⇒情報を⾒る
- Step3: 画像を表⽰するHTMLの書き⽅を知る
üimg = image の略
üsrc = source(源泉) の略。
- ここでは表⽰する画像ファイル名を表す
ü拡張⼦= jpeg , jpg , gif , png などの画像の形式のこと
< img src=”画像のファイル名.拡張子” >

4. 4
Copyright (c) 株式会社HEART QUAKE All rights reserved .
carouselでの画像表⽰(3/4)
- Step4: プログラムの変更
ü87⾏⽬のプログラムを少し変更する(bootstrap3.3.7の場合)
ここを変更する

5. 5
Copyright (c) 株式会社HEART QUAKE All rights reserved .
carouselでの画像表⽰(4/4)
- Step5: 画像ファイルのコピー
ü表⽰したい画像ファイルをindex.htmlと同じフォルダ
にコピーします。
- Step6: index.htmlを上書き保存して実⾏すると・・・
ü表⽰したい画像が反映されている！
ここに画像ファイルを
コピーする

6. 6
Copyright (c) 株式会社HEART QUAKE All rights reserved .
index3.htmlの提出⽅法(1/2)
l index3.htmlと画像ファイルを提出しましょう。
- FileZillaの右側を以下のようにダブルクリックしていきます。
examplesを
ダブルクリック
1 2 carouselを
ダブルクリック
3 index3.htmlと
画像ファイルを
提出する

7. 7
Copyright (c) 株式会社HEART QUAKE All rights reserved .
index3.htmlの提出⽅法(2/2)
l 確認⽅法について
- マイフォルダ > examples > carousel をクリックすると
- 勝⼿にindex.htmlが表⽰されてしまいます。
マイフォルダ > examples >
carouselをクリックすると
これが表⽰される
1
2 ブラウザのアドレスバーに
/index3.html
と書き加える
3 正しく表⽰できていればOK！

8. 8
Copyright (c) 株式会社HEART QUAKE All rights reserved .
お疲れ様でした！！