Q&A
同じようなコードでの質問よく見るんですが
https://teratail.com/search?q=Product+tag%3ACSS
参考書？課題？
同じなんでしょうか。
webサイトを制作しています。
現在Productの文字の下の画像の大きさをwidthで画像を横に広げたいと思い、調整しようと試みているのですが、widthで指定しても画像が横に広がりません。
About imgにwidthを適応させた画像は広げることができましたが、なぜこちらは適応されないのでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ブランドサイト</title> 6 <link href="css/style.css" rel="stylesheet"> 7 </head> 8 9 <body> 10 <header> 11 <div class=""></div> 12 <ul> 13 <li class="lo">Home</li> 14 <li class="lo">About</li> 15 <li class="lo">Product</li> 16 <li class="lo">Online Store</li> 17 <li class="lo">NEWS</li> 18 </ul> 19 </header> 20 <div class="container"> 21 <div class="main"> 22 23 </div> 24 <div class="consept"> 25 <h1>おいしさ際立てる、美しさ</h1> 26 <p>○○県○○市、この地域に構える○○店。 27 様々な料理に合わせたお皿を提供し、料理のおいしさ、美しさを引き立てます。 28 29 </p> 30 </div> 31 <div class="About"> 32 <h3>About</h3> 33 34 <img src="plate-526603_1920.jpg"> 35 </div> 36 <div class="purodakut"> 37 <h3>Product</h3> 38 39 <img src="niz0025-066.jpg"> 40 <p>kakakakaka</p> 41 </div> 42 <div class="Online"></div> 43 <div class="news"></div> 44 <footer></footer> 45 </div> 46 </body> 47</html>
CSS
1body{ 2 margin: 0; 3 padding: 0; 4} 5 6 7ul{ 8 text-align:right; 9 padding-right:500px; 10 padding-top:20px; 11} 12 13li{ 14 display: inline; 15} 16 17.lo{ 18 padding:0px; 19 margin-right: 30px; 20} 21 22li:hover{ 23 opacity: 0.5; 24} 25 26li{cursor: pointer} 27 28.main{ 29 height: 80vh; 30 background-size:cover; 31 background-image: url(..//tom-chen-6DH6BojClJg-unsplash.jpg); 32} 33 34.consept{ 35text-align: center; 36} 37 38.About{ 39 background-color:rgb(243, 240, 235); 40 height: 500px; 41} 42 43.About h3{ 44 display: inline-block; 45 margin-top: 70px; 46} 47 48.About img{ 49 width: 70%; 50 float: right; 51 height: 100%; 52} 53 54 55 56.purodakut h3{ 57text-align: center; 58} 59 60.purodakut p{ 61 text-align: right; 62} 63 64 65.purodaku img{ 66 float:left; 67 width: 50%; 68}
現在作成しているのは転職用の作品ですが、頭が良くありませんので修正依頼の内容がいまいちよくわかりませんでした。
適切な回答になっておらず、申し訳ございません。
回答2件
ベストアンサー
0
css
1/* .purodaku img{ ←タイポ */ 2.purodakut img{ 3 float:left; 4 width: 50%; 5}
投稿2021/06/13 01:16
編集2021/06/13 01:16
総合スコア34075
あなたの回答
tips
プレビュー
