HTML CSSについて

質問

HTML初心者です。
フォトアルバムを作りたいと思い　挑戦しているのですが
なかなか上手くいかないので質問させてもらいます。
サムネイル作成にあたって
a#thumbnail {background:url(photo1.jpg);}
a#thumbnail {background:url(photo2.jpg);}
a#thumbnail {background:url(photo3.jpg);}
という記述のphoto○.jpgの画像のサイズをこの記述のなかで指定したいのですが
なにか良い方法はあるでしょうか？
よろしくおねがいします。

回答No.2

4649panda · ベストアンサー

>>
a#thumbnail {background:url(photo1.jpg);}
a#thumbnail {background:url(photo2.jpg);}
a#thumbnail {background:url(photo3.jpg);}

これはCSSのコードですよね？

a#thumbnail {

の部分の"a"がちょっと気になります。
この"a"が例として使われているのならかまいませんが、「a要素」にそれぞれid要素を付加しているのはあんまり見たことがありません。
(…とは言っても私も素人なので違っていたらすみません)

"#"はHTML側で"id"にあたるものなので、一つのファイルに同名(thumbnail)のid要素が複数あるのはちょっと変です。
また、同じ要素であるのに、中身の内容(この場合、"background: url(photo1.jpg);"の部分)が違うというのは無理があります。
"a"の部分がブロック要素だと仮定して、サムネイル1つ1つに別の設定をするのなら、

#thumbnail_01 {
background: url(photo1.jpg);
height: 高さ;
width: 幅;
}
#thumbnail_02 {
background: url(photo2.jpg);
height: 高さ;
width: 幅;
}
#thumbnail_03 {
background: url(photo3.jpg);
height: 高さ;
width: 幅;
}

…と、別々に指定してはどうですか？
あと、"background"プロパティには、他にも指定できる値があります。

・背景色
・リピートするかしないか
・貼り付ける位置
・スクロールするかしないか

また、サムネイル画像を作るなら、背景として使わず、スタイルを適用した画像自体を表示するほうが手っ取り早いと思います。

こんな感じで↓

<img src="画像のurl" style="height: 高さ; width: 幅; ">

↑これを、テーブルの<td>内にでも入れると、ちゃんと整列して表示されます。

そして、これは余談ですが…
私も写真サイトを作ったことがありますが、いくらサムネイルを小さいサイズの画像として表示しても、元画像が大きいと読み込むのに時間がかかります。
いっそ小さいサイズでサムネイルを余分に作って、そのサムネイルに元画像のリンクをはると、表示にストレスがかからないと思います。

見当違いだったら、ごめんなさい。

お礼

説明不足ですみませんでした。
別指定をいろいろ試行錯誤したところ上手くいきそうです。
＞私も写真サイトを作ったことがありますが、いくらサムネイルを小さいサイズの画像として表示しても、元画像が大きいと読み込むのに時間がかかります。
いっそ小さいサイズでサムネイルを余分に作って、そのサムネイルに元画像のリンクをはると、表示にストレスがかからないと思います。

サムネイル用の画像と元画像は　どちらも読み込まれることになるのでサムネイル分の画像を減らせば軽くなるのでは　と考えたのですが、まだまだいろいろと学ぶとこらが多そうですね。
参考にさせて頂きます。

ありがとうございました。

回答No.1

metametamu

http://www.tagindex.com/stylesheet/box/width_height.html

補足

width: ***; height: ***;を使ってもサイズ指定が上手くいかなかったので質問させてもらいました。