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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Q&A

解決済

2回答

295閲覧

airbnb 模写 divタグ改行を無くして文字の大きさを変える

mgrates

総合スコア32

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

0グッド

0クリップ

投稿2022/09/11 10:51

前提

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をつけてみましたができませんでした。

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

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

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

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

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

guest

回答2

0

解決できました。ありがとうございます。

投稿2022/09/12 07:19

mgrates

総合スコア32

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

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

0

ベストアンサー

「/月」 の部分を改行させたくないなら、div ではなく span で囲みましょう。そうすれば、display: inline-block; は不要です。
また、開始タグと閉じタグの対応もおかしくなっています。
これらを修正すると下記のHTMLとなります。

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">エリア内のホストの平均ホスティング収入* 7 <div class="price"> 8 ¥ 271,664<span class="unit">/月</span> 9 </div> 10 </div> 11 </div> 12 </div> 13 14 <div class="income-a"> 15 <div class="income-1day"> 16 <div class="income-1day-con">収入額: 17 <div class="price"> 18 ¥ 12,348A<span class="unit" style="color: green;">/泊</span> 19 </div> 20 </div> 21 </div> 22 </div> 23 24 <div class="income-b"> 25 <div class="income-reserv"> 26 <div class="income-reserv-con">予約泊数: 27 <div class="price"> 28 21泊<span class="unit" style="color: green;">/月</span> 29 </div> 30 </div> 31 </div> 32 </div> 33 </div> 34</div>

あとは、span.unit に適切な font-size を設定すればいいでしょう。

css

1span.unit { 2 font-size: 22px; 3}

投稿2022/09/11 11:34

hatena19

総合スコア33620

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問