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

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

新規登録して質問してみよう
ただいま回答率
86.02%
CSS

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

Q&A

解決済

vscode: Unknown wordが解決できない

Iori
Iori

総合スコア54

CSS

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

1回答

0グッド

0クリップ

314閲覧

投稿2022/11/24 05:38

編集2022/11/24 06:11

前提

Build and Deploy Ecommerce Website With HTML CSS JavaScript | Responsive Shopping Website Part 2 の 16:39で問題が発生しました。
https://www.youtube.com/watch?v=99muDSuP55s&t=592s&ab_channel=Tech2etc

実現したいこと

#prodetailsを効かせたいです
お手本のコードです。
イメージ説明

発生している問題・エラーメッセージ

widthが効きません,,,
イメージ説明

sproduct.htmlからコピペしたのでスペルミスはないのですがこれが消えません。
イメージ説明

該当のソースコード

sproduct.html

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Tech2etc E-commerce Tutorial</title> 9 10 <!-- font awesome --> 11 <script src="https://kit.fontawesome.com/3715e2b643.js" crossorigin="anonymous"></script> 12 13 <!-- bootstrap --> 14 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" 15 integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 16 17 <link rel="stylesheet" href="style.css"> 18 <link rel="stylesheet" href="styleshop.css"> 19 20 21</head> 22 23<body> 24 25 26 27 <section id="header"> 28 <a href="#"><img class="logo" src="./img/logo.png" alt=""></a> 29 30 31 <div class=""> 32 <ul id="navbar"> 33 <li><a href="index.html">Home</a></li> 34 <li><a class="active" href="shop.html">Shop</a></li> 35 <li><a href="blog.html">Blog</a></li> 36 <li><a href="about.html">About</a></li> 37 <li><a class="contact" href="contact.html">Contact</a></li> 38 <li id="lg-bag"><a class="cart" href="cart.html"><i class="fa-solid fa-bag-shopping"></i></a></li> 39 <a href="#" id="close"><i class="fa-solid fa-xmark"></i></a> 40 </ul> 41 </div> 42 <div id="mobile"> 43 <a class="cart" href="cart.html"><i class="fa-solid fa-bag-shopping"></i></a> 44 <i class="fa-solid fa-outdent" id="bar"></i> 45 </div> 46 </section> 47 48 <section id="prodetails" class="section-p1"> 49 <div class="single-pro-image"> 50 <img src="./img/products/f1.jpg" alt="" id="MainImg"> 51 52 <div class="small-img-group"> 53 <!-- 📄pr2 15:43この中にもまたdiv作るんだあ 保護? --> 54 <div class="small-img-col"> 55 <img src="./img/products/f1.jpg" alt="" width="100%" class="small-img"> 56 </div> 57 <div class="small-img-col"> 58 <img src="./img/products/f2.jpg" alt="" width="100%" class="small-img"> 59 </div> 60 <div class="small-img-col"> 61 <img src="./img/products/f3.jpg" alt="" width="100%" class="small-img"> 62 </div> 63 <div class="small-img-col"> 64 <img src="./img/products/f4.jpg" alt="" width="100%" class="small-img"> 65 </div> 66 </div> 67 </div> 68 </section> 69 70 71 <section id="newsletter" class="section-p1 section-m1"> 72 73 74 <div class="newstext"> 75 <h4>Sign Up For Newsletters</h4> 76 <p>Get E-mail updates about our latest shop and <span> special offers</span></p> 77 </div> 78 <div class="form"> 79 <input type="text" placeholder="Your email address"> 80 <button class="normal">Sign Up</button> 81 </div> 82 </section> 83 84 <footer class="section-p1"> 85 <!-- 📄colだけでおk --> 86 <div class="col col-lg-4"> 87 <img class="logo" src="./img/logo.png" alt=""> 88 <h4>Contact</h4> 89 <p><strong>Address:</strong> 562 Wellington Road, Street 32, San Francisco</p> 90 <p><strong>Phone:</strong>+01 2222 365/(+91) 01 2345 6789</p> 91 <p><strong>Hours:</strong> 10:00-18:00, Mon - Sat</p> 92 93 <div class="follow"> 94 <h4>Follow Us</h4> 95 <div class="icon"> 96 <i class="fa-brands fa-facebook-f"></i> 97 <i class="fa-brands fa-twitter"></i> 98 <i class="fa-brands fa-instagram"></i> 99 <i class="fa-brands fa-pinterest-p"></i> 100 <i class="fa-brands fa-youtube"></i> 101 </div> 102 </div> 103 </div> 104 105 <div class="col col-lg-2"> 106 <h4>About</h4> 107 <a href="#">About Us</a> 108 <a href="#">Delivery Information</a> 109 <a href="#">Privacy Policy</a> 110 <a href="#">Terms & Conditions</a> 111 <a href="#">Contact Us</a> 112 </div> 113 114 <div class="col col-lg-2"> 115 <h4>My Account</h4> 116 <a href="#">Sign In</a> 117 <a href="#">View Cart </a> 118 <a href="#">My Wishlist</a> 119 <a href="#">Track My Order</a> 120 <a href="#">Help</a> 121 </div> 122 123 <div class="col col-lg-4 install"> 124 <h4>Install App</h4> 125 <p>From App Store or Google Play</p> 126 <div class="container-fluid"> 127 <div class="row"> 128 <img src="./img/pay/app.jpg" alt=""> 129 <img src="./img/pay/play.jpg" alt=""> 130 </div> 131 </div> 132 <p>Secured Payment Gateways</p> 133 <img src="./img/pay/pay.png" alt=""> 134 </div> 135 136 <div class="copyright"> 137 <p>@2021, Tech2 etc - HTML CSS Ecommerce Template</p> 138 </div> 139 </footer> 140 141 142 143 <script src="script.js"></script> 144</body> 145 146</html>

styleshop.css

1:root { 2 --baseblue: #088178; 3 --border: #cce7d0; 4} 5 6 7 8 9 10#page-header { 11 background-image: url(./img/banner/b1.jpg); 12 width: 100%; 13 height: 40vh; 14 background-size: cover; 15 display: flex; 16 justify-content: center; 17 flex-direction: column; 18 19 20 /* align-items: center; =したと同じ*/ 21 text-align: center; 22} 23 24#page-header h2, 25#page-header p { 26 color: #fff; 27} 28 29#pagination { 30 text-align: center; 31} 32 33 34#pagination a { 35 text-decoration: none; 36 background-color: var(--baseblue); 37 border-radius: 4px; 38 color: #fff; 39 padding: 15px 20px; 40 font-weight: 600; 41} 42 43#pagination a i { 44 font-weight: 600; 45 font-size: 16px; 46} 47 48 49/* ⭐⭐sproduct.html */ 50 51 52 53#prodetails .single-pro-img { 54 width: 40%; 55 margin-right: 50px; 56 box-sizing: border-box; 57} 58 59.small-img-group img { 60 width: 20%; 61 display: flex; 62 justify-content: space-between; 63 flex-direction: column; 64} 65

試したこと

htmlのwidth="100%"を消してやってみましたが効きませんでした。。。
下の.small-img-groupには効いているのでやっぱり#prodetailsに問題があると思います。

どなたかよろしくお願いいたします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

m.ts10806

2022/11/24 05:49

/* ⭐⭐sproduct.html */ ↑ここにある☆は何なのでしょう。
Iori

2022/11/24 05:51

コメントありがとうございます。目印としてつけました。 これをなくしても#prodetailsの波線はなくなりませんでした,,,
Crimson_Tide

2022/11/24 06:41 編集

**十分質問を確認せず見当違いのコメントだったため削除依頼中です**

回答1

0

自己解決

クラスをコピペして変えたら効きました...!
こうやって比較して見てみたらただのタイポでした。うわああエネルギー浪費しました,,,
協力していていただいた皆様にも申し訳ないです、ご協力大変感謝いたします。

before
イメージ説明

after
イメージ説明

投稿2022/11/24 06:21

Iori

総合スコア54

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS

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