前提
Airbnbの模写をしています。
予想ホスティング収入部分の/月の部分のみを価格と同じ列で、文字の大きさを変えたいのですが方法がわかりません。
実現したいこと
画像のように¥の部分と/月の部分の大きさが異なるように修正したいです。
発生している問題・エラーメッセージ
該当のソースコード
html
1<div class="income-cal"> 2 <div class="let-cal">予想ホスティング収入を計算してみましょう</div> 3 <div class="income-cal-con"> 4 <div class="income-show"> 5 <div class="income-month"> 6 <div class="income-month-con">エリア内のホストの平均ホスティング収入*<div class="price">¥ 271,664</div><span class="unit">/月</span></div> 7 </div> 8 </div> 9 10 <div class="income-a"> 11 <div class="income-1day"> 12 <div class="income-1day-con">収入額:<div class="price">¥ 12,348</div><div class="unit" style="color: green; display: inline-block;">/泊</div></div> 13 </div> 14 </div> 15 16 <div class="income-b"> 17 <div class="income-reserv"> 18 <div class="income-reserv-con">予約泊数:<div class="price">21泊<div><div class="unit" style="color: green; display: inline-block;">/月</div></div> 19 </div> 20 </div> 21 </div> 22 </div> 23
css
1```.income-cal { 2 /* text-align: center; */ 3} 4 5.let-cal{ 6 margin-left: auto; 7 margin-right: auto; 8 height: 128px; 9 width: 600px; 10 font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif; 11 letter-spacing: -0.02em !important; 12 font-size: 56px !important; 13 line-height: 64px !important; 14 padding: 0px; 15 float: center; 16 /* padding:30px; */ 17 color: black; 18 font-weight: bold; 19} 20 21.income-cal-con { 22 display:flex; 23 width: 1392px; 24 justify-content: center; 25 margin-right: 16px; 26} 27 28.income-show, 29.income-a, 30.income-b { 31 background-color:rgb(247, 247, 247); 32 33} 34 35.income-month-con, 36.income-1day, 37.income-reserv { 38 height:58px; 39 width:276px; 40 margin:20px 24px; 41 margin-right:16px; 42 font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif; 43 background-color:rgb(247, 247, 247); 44 /* padding: 20px 24px; */ 45} 46 47.income-1day { 48 background-color:rgb(247, 247, 247); 49} 50 51.income-month-con, 52.income-1day-con, 53.income-reserv-con { 54 font-size: 14px !important; 55 line-height: 18px !important; 56 letter-spacing: -0.02em !important; 57} 58 59.price { 60 font-size: 40px; 61 margin-top:10px; 62 line-height: 18px !important; 63 letter-spacing: -0.02em !important; 64} 65 66/* span.unit { 67 display: inline-block; 68 font-size: 22px; 69 margin-left:180px; 70 margin-bottom: 140px; 71} */
試したこと
改行にならないようにspanタグにして、spanタグにclassをつけてみましたができませんでした。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。