htmlにクラス名がないのにcssにクラス名がある？なぜでしょうか？

こちらのサイトのデモサイトのコーディングをしているのですが
cssに
#item .item-text {
width: 42%;
}

とあるのですが、htmlにitem-textという表記がありません。
製作者の間違いでしょうか？こういった書き方があるのでしょうか？

html
1
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="utf-8">
6    <title>Furniture Design</title>
7    <meta name="description" content="テキストテキストテキストテキストテキストテキストテキスト">
8    <meta name="viewport" content="width=device-width, initial-scale=1">
9    <link rel="shortcut icon" href="img/favicon.ico">
10    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
11    <link rel="stylesheet" href="css/style.css">
12    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
13    <script src="js/main.js"></script>
14  </head>
15
16  <body>
17    <header id="header" class="wrapper">
18      <h1 class="site-title">
19        <a href="index.html"><img src="img/logo.svg" alt="Furniture Design"></a>
20      </h1>
21
22      <nav id="navi">
23        <ul class="nav-menu">
24          <li><a href="products.html">PRODUCTS</a></li>
25          <li><a href="about.html">ABOUT</a></li>
26          <li><a href="company.html">COMPANY</a></li>
27          <li><a href="mailto:xxxxx@xxx.xxx.com?subject=お問い合わせ">CONTACT</a></li>
28        </ul>
29      </nav>
30
31      <div class="toggle_btn">
32        <span></span>
33        <span></span>
34      </div>
35
36      <div id="mask"></div>
37    </header>
38
39    <main>
40      <div id="top" class="wrapper">
41        <ul class="product-list">
42          <li>
43            <a href="item1.html">
44              <img src="img/item1.jpg" alt="">
45              <p>プロダクトタイトルプロダクトタイトル</p>
46              <p>&yen;99,999 +tax</p>
47            </a>
48          </li>
49          <li>
50            <a href="item2.html">
51              <img src="img/item2.jpg" alt="">
52              <p>プロダクトタイトルプロダクトタイトル</p>
53              <p>&yen;99,999 +tax</p>
54            </a>
55          </li>
56          <li>
57            <a href="item3.html">
58              <img src="img/item3.jpg" alt="">
59              <p>プロダクトタイトルプロダクトタイトル</p>
60              <p>&yen;99,999 +tax</p>
61            </a>
62          </li>
63          <li>
64            <a href="item4.html">
65              <img src="img/item4.jpg" alt="">
66              <p>プロダクトタイトルプロダクトタイトル</p>
67              <p>&yen;99,999 +tax</p>
68            </a>
69          </li>
70          <li>
71            <a href="item5.html">
72              <img src="img/item5.jpg" alt="">
73              <p>プロダクトタイトルプロダクトタイトル</p>
74              <p>&yen;99,999 +tax</p>
75            </a>
76          </li>
77          <li>
78            <a href="item6.html">
79              <img src="img/item6.jpg" alt="">
80              <p>プロダクトタイトルプロダクトタイトル</p>
81              <p>&yen;99,999 +tax</p>
82            </a>
83          </li>
84          <li>
85            <a href="item7.html">
86              <img src="img/item7.jpg" alt="">
87              <p>プロダクトタイトルプロダクトタイトル</p>
88              <p>&yen;99,999 +tax</p>
89            </a>
90          </li>
91          <li>
92            <a href="item8.html">
93              <img src="img/item8.jpg" alt="">
94              <p>プロダクトタイトルプロダクトタイトル</p>
95              <p>&yen;99,999 +tax</p>
96            </a>
97          </li>
98        </ul>
99        <a class="link-text" href="products.html">View More</a>
100      </div>
101    </main>
102
103    <footer id="footer" class="wrapper">
104      <ul class="menu">
105        <li><a href="https://www.instagram.com/" target="_blank">INSTAGRAM</a></li>
106        <li><a href="https://twitter.com/" target="_blank">TWITTER</a></li>
107        <li><a href="https://www.facebook.com/" target="_blank">FACEBOOK</a></li>
108      </ul>
109      <p class="copyright">&copy; Furniture Design</p>
110    </footer>
111  </body>
112</html>
113

css
1@charset "UTF-8";
2
3html {
4  font-size: 100%;
5}
6/*
7フッターを画面下に配置するために、
8「position: relative;」を設定
9「min-height」で最小の高さを画面の高さにあわせる
10*/
11body {
12  color: #333;
13  font-size: 0.875rem;
14  min-height: 100vh;
15  position: relative;
16}
17a {
18  color: #333;
19  text-decoration: none;
20  transition: all 0.5s;
21}
22a:hover {
23  opacity: 0.7;
24}
25img {
26  max-width: 100%;
27}
28li {
29  list-style: none;
30}
31/*
32コンテンツ幅を設定するための共通クラス
33*/
34.wrapper {
35  width: 100%;
36  max-width: 1360px;
37  margin: 0 auto;
38  padding: 0 40px;
39}
40.content {
41  padding-top: 120px;
42  padding-bottom: 160px;
43}
44.site-title a {
45  width: 180px;
46  line-height: 1px;
47  display: block;
48}
49.page-title {
50  font-size: 0.875rem;
51  font-weight: normal;
52  margin-bottom: 30px;
53}
54
55/*-------------------------------------------
56ヘッダー
57-------------------------------------------*/
58/*
59「position: fixed;」でヘッダーを固定し、「z-index: 10;」で前面に表示
60※他のコンテンツでpositionをrelative、absolute、fixedのいずれかに
61設定している場合は、z-indexの数値が大きい方が前面に表示される
62*/
63#header {
64  width: 100%;
65  height: 80px;
66  background-color: #fff;
67  display: flex;
68  align-items: center;
69  justify-content: space-between;
70  position: fixed;
71  left: 0;
72  right: 0;
73  z-index: 10
74}
75/*
76ハンバーガーメニュー
77メニューが閉じている時は、「left: -300px;」で画面左に隠し、
78「opacity: 0;」で非表示にしている
79*/
80#navi {
81  position: fixed;
82  top: 0;
83  left: -300px;
84  width: 300px;
85  color: #fff;
86  padding: 36px 50px;
87  transition: all 0.5s;
88  z-index: 20;
89  opacity: 0;
90}
91#navi a {
92  color: #fff;
93}
94#navi li {
95  margin-bottom: 14px;
96}
97/*
98ハンバーガーメニュー
99メニューが開いている時は、「left: 0;」「opacity: 1;」で
100画面左に表示する
101*/
102.open #navi {
103  left: 0;
104  opacity: 1;
105}
106.toggle_btn {
107  width: 30px;
108  height: 30px;
109  position: relative;
110  transition: all 0.5s;
111  cursor: pointer;
112  z-index: 20;
113}
114/*
115ハンバーガーメニューの線の設定（メニューが閉じている時）
116*/
117.toggle_btn span {
118  display: block;
119  position: absolute;
120  width: 30px;
121  height: 2px;
122  background-color: #333;
123  border-radius: 4px;
124  transition: all 0.5s;
125}
126/*
1271本目の線の位置を設定
128*/
129.toggle_btn span:nth-child(1) {
130  top: 10px;
131}
132/*
1332本目の線の位置を設定
134*/
135.toggle_btn span:nth-child(2) {
136  bottom: 10px;
137}
138/*
139ハンバーガーメニューの線の設定（メニューが開いている時）
140線の色を白に変更
141*/
142.open .toggle_btn span {
143  background-color: #fff;
144}
145/*
1461本目の線を-45度回転
147*/
148.open .toggle_btn span:nth-child(1) {
149  -webkit-transform: translateY(4px) rotate(-45deg);
150  transform: translateY(4px) rotate(-45deg);
151}
152/*
1532本目の線を45度回転
154*/
155.open .toggle_btn span:nth-child(2) {
156  -webkit-transform: translateY(-4px) rotate(45deg);
157  transform: translateY(-4px) rotate(45deg);
158}
159#mask {
160  display: none;
161  transition: all 0.5s;
162}
163/*
164メニューを開いている時は、全体を黒背景にする
165*/
166.open #mask {
167  display: block;
168  position: fixed;
169  top: 0;
170  left: 0;
171  width: 100%;
172  height: 100%;
173  background: #000;
174  opacity: .8;
175  z-index: 10;
176  cursor: pointer;
177}
178
179/*-------------------------------------------
180TOP、PRODUCTS
181-------------------------------------------*/
182#top {
183  padding-top: 80px;
184  padding-bottom: 160px;
185}
186.product-list {
187  display: flex;
188  flex-wrap: wrap;
189  justify-content: space-between;
190}
191.product-list li {
192  width: 23%;
193  margin-bottom: 40px;
194}
195/*
196vertical-align: top;
197画像の下にできる隙間を消す
198*/
199.product-list img {
200  margin-bottom: 10px;
201  vertical-align: top;
202}
203.product-list p {
204  font-size: 0.75rem;
205}
206.link-text {
207  display: block;
208  text-align: center;
209}
210.pagination {
211  display: flex;
212  justify-content: center;
213}
214.pagination li {
215  padding: 0 20px;
216}
217
218/*-------------------------------------------
219ITEM
220-------------------------------------------*/
221#item {
222  max-width: 800px;
223  display: flex;
224  justify-content: space-between;
225  margin-bottom: 60px;
226}
227#item .item-text {
228  width: 42%;
229}
230/*
231text-align: justify;
232テキストの両端を揃える
233*/
234#item .item-text p {
235  margin-bottom: 30px;
236  text-align: justify;
237}
238#item .item-text dl {
239  display: flex;
240  flex-wrap: wrap;
241}
242#item .item-text dt {
243  width: 30%;
244}
245#item .item-text dd {
246  width: 70%;
247}
248#item .item-img {
249  width: 50%;
250}
251
252/*-------------------------------------------
253ABOUT
254-------------------------------------------*/
255#about {
256  max-width: 600px;
257}
258#about p {
259  line-height: 1.9;
260  margin-bottom: 30px;
261}
262
263/*-------------------------------------------
264COMPANY
265-------------------------------------------*/
266#company {
267  max-width: 600px;
268}
269#company dl {
270  display: flex;
271  flex-wrap: wrap;
272  margin-bottom: 20px;
273}
274#company dt {
275  width: 30%;
276  border-bottom: solid 1px #dcdbdb;
277  padding: 20px 10px;
278}
279#company dt:last-of-type {
280  border-bottom: none;
281}
282#company dd {
283  width: 70%;
284  border-bottom: solid 1px #dcdbdb;
285  padding: 20px 10px;
286}
287#company dd:last-of-type {
288  border-bottom: none;
289}
290#company .map {
291  /* グーグルマップをグレースケールにする */
292  filter: grayscale(1);
293}
294/* グーグルマップのサイズを設定 */
295#company .map iframe {
296  width: 100%;
297  height: 300px;
298  border: 0;
299}
300
301/*-------------------------------------------
302フッター
303-------------------------------------------*/
304/*
305「position: absolute;」を設定して、フッター位置を画面下に設定
306「left: 0;」「right: 0;」で中央に配置
307*/
308#footer {
309  display: flex;
310  justify-content: space-between;
311  position: absolute;
312  bottom: 20px;
313  left: 0;
314  right: 0;
315}
316#footer .menu {
317  display: flex;
318}
319#footer .menu li {
320  font-size: 0.75rem;
321  margin-right: 30px;
322}
323#footer .copyright {
324  font-size: 0.625rem;
325}
326
327/*-------------------------------------------
328SP
329-------------------------------------------*/
330@media screen and (max-width: 900px) {
331
332  /*-------------------------------------------
333  TOP、PRODUCTS
334  -------------------------------------------*/
335  .product-list li {
336    width: 47%;
337  }
338
339  /*-------------------------------------------
340  ITEM
341  -------------------------------------------*/
342  #item {
343    flex-direction: column;
344  }
345  #item .item-text {
346    width: 100%;
347  }
348  #item .item-img {
349    width: 100%;
350    margin-bottom: 30px;
351  }
352
353  /*-------------------------------------------
354  COMPANY
355  -------------------------------------------*/
356  #company dl {
357    flex-direction: column;
358  }
359  #company dt {
360    width: 100%;
361    border-bottom: none;
362    padding-bottom: 5px;
363  }
364  #company dd {
365    width: 100%;
366    padding-top: 5px;
367  }
368
369  /*-------------------------------------------
370  フッター
371  -------------------------------------------*/
372  #footer {
373    flex-direction: column;
374  }
375  #footer .menu {
376    margin-bottom: 5px;
377  }
378}

Lhankor_Mhy

2022/07/21 04:10

消し忘れじゃないでしょうか。そのような不要なルールを消すツールがある程度には、よくある話だと思います。

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

回答2件

ベストアンサー

このサイトは全ページ共通のスタイルシート(css/style.css)を使用してます。

で、トップページの商品をクリックすると各商品ページに移動しますが、そのページにid="item" class="item-text"がありますね。

ちなみに、各ページごとにスタイルシートを用意せずに、一つのスタイルシートを共有するということはよくあります。共通にすると一度読み込むとキャッシュが利用できるのでページの読み込みが高速化される、修正が一か所ですむなどのメリットがあります。

投稿2022/07/21 04:38

編集2022/07/21 04:42

hatena19

総合スコア33780

negiremi

2022/07/22 21:44

お返事ありがとうございます。リンク先クリックしていなかったため気づきませんでした、ご丁寧にありがとうございます！煮詰まっていたのでとても助かりました！！スタイルシート共有についても勉強になりました！ありがとうございました！

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

作った人にしか意図は分かりません。

JavaScriptで利用している
別のページで利用している
どこかから流用した分の消し忘れ

等、考えられることはありますが、
それが真意かどうかは作った人だけが知っていることです。

投稿2022/07/21 04:15

m.ts10806

総合スコア80854

negiremi

2022/07/22 21:41

ありがとうございます！！ javascriptで使うこともあるのですね、勉強になりました！消し忘れも疑うことにします。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.47%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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

htmlにクラス名がないのにcssにクラス名がある？なぜでしょうか？

関連した質問