スタイルシートが反映されないのははなぜ？
○質問の主旨
下記の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>
お礼
なるほど！そのとおりでした。 まだCSS始めたてで手探り状態なのですが何時間も考え込んでしまいました。ありがとうございました！