cssでimgのpaddingを個々に設定

質問

初歩的なことだと思いますが、つまづいてしまっているので教えてください。
同じページ内のimgのpaddingを個々に設定したい場合はどうすればよろしいのでしょうか。
現在cssには
img {
padding-left: 5px;
padding-top: 5px;

とだけ記述してあり、HTMLで
<img src="img/○○○.jpg" alt="○○○" width="○○○" height="○○○">
と記述すると、もちろんのことimgはすべて上記のcssが反映されますよね。

かなり単純なことだと思いますが、よろしくお願いいたします。

回答No.2

yambejp · ベストアンサー

うーん、クラスで指定してもいいですが、使い回しの必要がないので
あればidで十分だと思いますが・・・

#img-○○○{
padding-left: ○○○px;
padding-top: ○○○px;
}
#img-××× {
padding-left: ○○○px;
padding-top: ○○○px;
}

<img src="img/○○○.jpg" id="img-○○○" alt="○○○" width="○○○" height="○○○">
<img src="img/○○○.jpg" id="img-×××" alt="○○○" width="○○○" height="○○○">

のような感じでよいでしょう。
ただしidの命名方法はクラスより厳密なので、気をつける必要があります。

お礼

ご親切にありがとうございました。
この方法で設定することにしました。

とてもわかりやすくて助かりました。本当にありがとうございました。

回答No.4

ORUKA1951

画像を示すタグには、height,widthを必ず指定しましょう。CSSに対応していないユーザーエージェントのために、HTMLの仕様では、逐次表示が可能にすることが推奨されています。CSSで、HTMLにかかれたスタイルや属性でのwidth,heightの変更は詳細度さえ高くすれば変更可能です。

≫同じページ内のimgのpaddingを個々に設定したい場合
　この場合、画像の所属する要素が違う場合がほとんどだと思いますから、それで指定するほうが多いでしょう。
　たとえば次のような場合
<div class="content">
　　<h1>タイトル</h1>
　　<p>文字<img[1]>文字</p> <!--画像1-->
　　<p>文字</p>
　　<div class="memo">
　　　<p><img></p> <!-- 画像2 -->
　　　<p>説明</p>
　　</div>
</div>
　の場合、
div.content div.memo p img{ padding: 0px;} /* 詳細度 24 */
div.content p img{padding:10px;} /* 詳細度13 */
とすると記載順に関係なく、それぞれ画像1には、下の指定が有効で画像２には上の設定が有効。

≫Dをふって、ひとつずつcssないしidを指定
　CSSでのデザインのためだけに、idを指定する必要はないはずです。もしあればHTML自体の書き方がおかしい。

お礼

ご親切にありがとうございます。
私もwidthとheightはHTMLで記述したいと考えておりました。
もう少し自分でも勉強します。
ありがとうございました。

回答No.3

reverie013

直接回答に関わらない補足を横槍失礼します。

> ご回答ありがとうございます。
>
> .img-○○○{
> padding-left: ○○○px;
> padding-top: ○○○px;
> }
> .img-××× {
> padding-left: ○○○px;
> padding-top: ○○○px;
> }
>
> と記述して、HTMLは
> <div class="img-○○○"><img src="img/○○○.jpg" alt="○○○" width="○○○" height="○○○"></div>
> <div class="img-×××"><img src="img/○○○.jpg" alt="○○○" width="○○○" height="○○○"></div>
> ということで大丈夫でしょうか。

折角CSSで書かれるのでしたら、width,heightもCSS側に記述されてはいかがでしょうか？＾＾

下は一例ですが。。。

.img_a{
　　width　:160px;
　　height　:120px;
　　padding　:5px 0 0 5px;
}
.img_b{　　width　:170px;
　　height　:150px;
　　padding　:3px 0 0 4px;

}
<img src="img/○○○.jpg" alt="画像Aです" class="img_a"><br>
<img src="img/○○○.jpg" alt="画像Bです" class="img_b">

お礼

どうもありがとうございました。
No.4さんも言ってらっしゃる通り、widthとheightはHTMLで記述したいと思います。
本当にありがとうございました。

回答No.1

yambejp

＞個々に設定したい

であれば、IDをふって、ひとつずつcssを指定してやればよいのでは？

お礼

ご回答ありがとうございます。

.img-○○○{
padding-left: ○○○px;
padding-top: ○○○px;
}
.img-××× {
padding-left: ○○○px;
padding-top: ○○○px;
}

と記述して、HTMLは
<div class="img-○○○"><img src="img/○○○.jpg" alt="○○○" width="○○○" height="○○○"></div>
<div class="img-×××"><img src="img/○○○.jpg" alt="○○○" width="○○○" height="○○○"></div>
ということで大丈夫でしょうか。