1

Copyright (c) 株式会社HEART QUAKE All rights reserved .

carouselの画像変更

2

Copyright (c) 株式会社HEART QUAKE All rights reserved .

carouselでの画像表⽰示(1/5)

-  Step1: 下のサイトの  背景画像を変えてみましょう

3

Copyright (c) 株式会社HEART QUAKE All rights reserved .

carouselでの画像表⽰示(2/5)

-  Step2: 画像を表⽰示するHTMLの書き⽅方を知る

ü img = image の略略 ü src = source(源泉) の略略。

-  ここでは表⽰示する画像ファイル名を表す ü 拡張⼦子= jpeg , jpg , gif , png などの画像の形式のこと

-  Step3:表⽰示したい画像を探す

ü http://heart-quake.com/ ü では横1500×縦550 ピクセルの画像を使っています。 ü 画像の形式 = 拡張⼦子  を把握すること！

-  windowsなら  画像を右クリック⇒プロパティ -  macなら  画像を右クリック⇒情報を⾒見見る

< img src=”画像のファイル名.拡張子” >

4

Copyright (c) 株式会社HEART QUAKE All rights reserved .

carouselでの画像表⽰示(3/5)

-  Step4: プログラムの変更更 ü 83⾏行行⽬目のプログラムを少し変更更する(bootstrap3.3の場合) ü に変更更する

-  例例： »  altは画像が表⽰示されなかったときの代替⽂文字 »  alt = alternative の略略

5

Copyright (c) 株式会社HEART QUAKE All rights reserved .

carouselでの画像表⽰示(4/5)

-  Step5: 画像ファイルの移動 ü 表⽰示したい画像ファイルをindex.htmlと同じフォルダ 　 　 　に移動させます。

ü  -  このように記述した時、表⽰示される画像はこのhtmlファイルと同じフォルダになければ画像は表⽰示されません。

-  画像を別のフォルダに置いておきたい場合は 　 　 　 　 　相対パスという記述⽅方法を⽤用いることで 　 　 　 　 　 　 　実現することもできます。

6

Copyright (c) 株式会社HEART QUAKE All rights reserved .

carouselでの画像表⽰示(5/5)

-  Step6: index.htmlを上書き保存して実⾏行行すると・・・ ü 表⽰示したい画像が反映されている！

7

Copyright (c) 株式会社HEART QUAKE All rights reserved .

index3.htmlの提出⽅方法(1/2)

l  Step1: index.htmlの名前を index3.htmlに変えましょう。 l  Step2: index3.htmlを提出しましょう。

-  FileZillaの右側のexamples > carousel フォルダの中のindex.htmlと同じ所に提出します。

- 画像ファイルもcarouselフォルダに提出すること！

画像ファイルも提出

8

Copyright (c) 株式会社HEART QUAKE All rights reserved .

index3.htmlの提出⽅方法(2/2)

l  Step3: 確認⽅方法について -  マイフォルダ > examples > carousel をクリックすると -  勝⼿手にindex.htmlが表⽰示されてしまいます。 -  なので、URLの carousel/ の後に index3.htmlと直接⼊入⼒力力し、

enterキーを押すと確認できます。

⾃自分でindex3.htmlを書き加える