HTML CSS　で一部のimgタグに適用した内容が他の画像のimgタグにも適用されてしまう

WEBサイトを作成しており、画像を3×3で並べて表示したところがあります。
ここでimgタグにCSSを適用したのですが、そうすると別のところで使ってるimgタグにも反映されてしまって困っております。

これを一つ上の階層の<div>クラスに適用すると、画像を3×3で並べて表示したCSSが反映されなくなってしまいます。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5      <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>*****</title>
7    <link rel="stylesheet" href="style.css">
8    
9
10      
11  </head>
12  <body>
13    
14 
15      
16 <header>
17      <div class="container">
18          
19          <div class="title">****サイト <div class="music"><audio controls src="img/music.wav"></audio></div>
20            
21          
22      </div>
23 </header>
24      
25 <div class="top-img">
26     <div class="container">
27          <h1> ******</h1>
28          <h1> **********</h1>
29     </div>
30     </div>
31     
32      
33      <div class="explain">
34          <p>*****<span style="font-size:30px"><b>****</span></b></p>
35          <p>*****<b><span style="font-size:30px">****</span></b>*****</p>
36          <p>********<b><span style="font-size:30px">******</span></b></p>
37          <p>*****<b><span style="font-size:30px">*****</span></b></p>
38          <p></span>*****<b><span style="font-size:30px">******</span></b></p>
39     <p>*****</p>
40    <p>***<b><span style="font-size:30px">******</span></b>******</p>
41     
42      </div>
43
44 
45 <hr style="width:1300px; height:3px; background-color:#7FFF00;">
46
47   
48 <div class="picture">
49 <h1>************</h1>
50 <p class="line"></p>
51     
52
53     
54     
55     
56     <div class="picture1">
57         
58         
59         <div class="picpic">
60               <img src="img/pic1.JPG">
61               </div>
62         
63          <div class="picpic">
64               <img src="img/pic2.JPG">
65               </div>
66         
67          <div class="picpic">
68               <img src="img/pic3.JPG">
69               </div>
70         
71          <div class="picpic">
72               <img src="img/pic4.JPG">
73               </div>
74     
75     
76     </div>
77     
78     <div class="picture2">
79             <div class="picpic">
80               <img src="img/pic5.JPG">
81               </div>
82         
83          <div class="picpic">
84               <img src="img/pic6.JPG">
85               </div>
86         
87          <div class="picpic">
88               <img src="img/pic7.JPG">
89               </div>
90         
91          <div class="picpic">
92               <img src="img/pic8.JPG">
93               </div>
94         
95         <div class="picpic">
96               <img src="img/pic9.JPG">
97               </div>
98     
99     
100     
101     </div>
102        
103
104     
105     
106     
107</div>
108      
109      
110       
111      
112      
113  <hr style="width:1300px; height:3px; background-color:#7FFF00;">
114
115<div class="bank">
116    <h1>*****</h1>
117    <p class="line"></p>
118    
119    <div class="bank-text">
120    <p>****</p>
121    <p>*****</p>
122    <p>******</p>
123    <p>********</p>
124    </div>
125    
126    <div class="bank-icon">
127     <img src="img/mizuho.png">
128    </div>
129    
130
131</div>
132      
133      
134      
135    
136
137    
138    
139    
140  </body>

CSS
1.container{
2    width:1170px;
3    padding:0 15px 0 15px;
4    margin:auto;
5}
6
7.music{
8    text-align:right;
9    position:absolute;
10    top:13px;
11    right:8px;
12}
13
14.title{
15    color: white;
16    text-align:center;
17    font-size: 35px;
18}
19
20header{
21    height:65px;
22    background-color:rgba(34,49,52,0.9);
23   
24}.line{
25    border-bottom: 1px solid #CCCCCC;
26}
27
28.top-img{
29    padding:180px 0 180px 0;
30    color:white;
31    background-image:url(img/sky.jpg);
32    background-size: cover;
33    text-align:center;
34    
35}
36
37.container{
38    text-align:left;
39    font-size:25px;
40}
41
42.explain{
43position:relative;
44top:0px;　
45left:100px;
46color:black;
47text-align:center;
48font-size:20px;
49font-family: 'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
50line-height:30px;
51
52
53}
54
55.line{
56    border-bottom: 1px solid #D3D3D3;
57    position: relative;
58    top:2px;
59    left:10px;
60    right:55px;
61    width:1300px;
62}
63
64
65.picture{
66    position: relative;
67    left:55px
68   
69    
70}
71
72.picpic{
73    float:left;
74    width:25%;
75    padding:30px;
76    text-align:center;
77   
78    
79    
80}
81
82.picture1{
83    background-color:#8A2BE2;
84}
85
86img {
87  object-fit: cover;
88  width: 350px;
89  height: 450px;
90}
91
92.bank{
93     position: relative;
94    left:55px
95}
96
97.bank-text{
98    font-size:30px;
99    position:relative;
100    left:10px;
101}
102
103.bank-icon{
104    position:relative;
105    width: 20px;
106    height:30px;
107    right:5px;
108}
109
110
111

よろしくお願いします。

m.ts10806

2021/03/05 21:45

それ用のクラス作ってつければ良いのでは？

行動規範の内容に同意します

回答3件

ベストアンサー

こんにちは。

ここでimgタグにCSSを適用したのですが、そうすると別のところで使ってるimgタグにも反映されてしまって

↓これのことでしょうか？

css
1img {
2  object-fit: cover;
3  width: 350px;
4  height: 450px;
5}

↓このようにしてはいかがですか？

css
1.picpic > img {
2  object-fit: cover;
3  width: 350px;
4  height: 450px;
5}
6

投稿2021/03/06 01:10

Lhankor_Mhy

総合スコア36928

Googler

2021/03/07 07:31

解決できました。この書き方を知らなかったので勉強になりました！

行動規範の内容に同意します

解決できました。
この書き方を知らなかったので勉強になりました！

投稿2021/03/07 07:31

Googler

総合スコア6

解決できました。
この書き方を知らなかったので勉強になりました！

投稿2021/03/07 07:23

Googler

総合スコア6

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

HTML CSS　で一部のimgタグに適用した内容が他の画像のimgタグにも適用されてしまう

関連した質問