みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

スタイルシートが反映されないのははなぜ?

○質問の主旨


下記の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>

投稿日時 - 2013-10-12 11:38:13

QNo.8302332

困ってます

質問者が選んだベストアンサー

セレクタ .thumbnail に対してスタイルを適用しようとしていますが,index.html 内に .thumbnail は存在していません。
『自分で作ったコード』には addClass('thumbnail') が抜けているのです。

『自分で作ったコード』の該当部分
img = $('<img>').attr('src', files[i]);
これを次のように修正します:
img = $('<img>').attr('src', files[i]).addClass('thumbnail');

これにより,jQuery で挿入された img 要素に thumbnail というクラスを当てることができます。
その thumbnail に対してスタイルを適用すれば,思った通りの表示になるはずです。

投稿日時 - 2013-10-12 12:51:30

お礼

f1204-okwさま
ご回答ありがとうございます!

img = $('<img>').attr('src', files[i]).addClass('thumbnail');
のコード参考にさせていただきます。

投稿日時 - 2013-10-14 22:19:48

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問