スタイルシートが反映されないのははなぜ？
○質問の主旨
下記のjQueryのコードにたいしてCSSを当てているつもりですが
スタイルが反映されません。なぜでしょうか？
詳しい方がいらっしゃいましたら、ご教示願います。
○質問の補足
jQuery、CSSともにドットインストールで使われているコードを、
ほとんどコピーして使っています。
にも関わらず動画では、スタイルシートが反映されて、
自分で作ったスタイルシートの方では、反映されないことについて
よく理解できません。
ドットインストール
jQueryで作るスライドショー～#02 縮小画像を表示してみよう
http://dotinstall.com/lessons/slideshow_jquery/25402
なお、動画で紹介されているコードと私が作成したコードでは、
以下の2点が異なります。
1.アップロードする画像ファイル名が異なる
2.スタイルは<head>タグの中にスタイルタグをあてるのではなく、
外部のCSSファイルから読み込む
○自分で作ったコード
(index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでスライドショー</title>
</head>
<body>
<div id="thumbnails"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
var files = [
'test1.jpg',
'test2.jpg',
'test3.jpg',
'test4.jpg',
];
var img;
for(var i = 0; i < files.length; i++) {
img = $('<img>').attr('src', files[i]);
$('#thumbnails').append(img);
}
});
</script>
</body>
</html>
(my.css)
body {
margin: 10px auto;
text-align: center;
}
.thumbnail {
width: 125px;
height: 83px;
}
.thumbnail + .thumbnail {
margin-left: 10px;
}
○ドットインストールのコード
(index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでスライドショー</title>
<style>
.thumbnail {
width: 125px;
height: 83px;
}
</style>
</head>
<body>
<div id="thumbnails"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
var files = [
'food1.jpg',
'food2.jpg',
'food3.jpg',
'food4.jpg'
];
var img;
for (var i = 0; i < files.length; i++) {
img = $('<img>').attr('src', files[i]).addClass('thumbnail');
$('#thumbnails').append(img);
}
});
</script>
</body>
</html>
