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

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

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

599閲覧

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

Googler

総合スコア6

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/03/05 15:08

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

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/03/05 21:45

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

回答3

0

ベストアンサー

こんにちは。

ここで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

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

0

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

投稿2021/03/07 07:31

Googler

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2021/03/07 07:23

Googler

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問