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

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

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

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

HTML5

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

解決済

line-heightによってできた上下の余白を詰めるやり方が分かりません

2232
2232

総合スコア224

CSS3

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

HTML5

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

2回答

-1評価

0クリップ

211閲覧

投稿2022/01/23 15:09

編集2022/01/24 12:06

line-heightによってできた上下の余白を詰めるやり方が分かりません、
今現在ホームページを作成していますが、実際のページで見てみると、見本と大きなずれがあります。

これを何とかするべく、line-heightの余白を詰めたいと考えています、今現在取り組んでる余白の詰め方

上記のURLのやり方でやろうとしていますが、がcalc()がよく分かりません。
どこが間違ってますでしょうか?

CSS

.Fv .Fv-img div .Fv-title-wrapper-second{ height: 102px; padding-bottom: 28px; padding-top: 44px; } .Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper { font-size: 18px; color: #fff; line-height: 51px; --line-height-width: calc(2.55); line-height: var(--line-height-width); } .Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper::before { display: block; width: 0; height: 0; content: ''; margin-top: calc((1 - var(--line-height-width)) * 0.5em); } .Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper::after { display: block; width: 0; height: 0; content: ''; margin-bottom: calc((1 - var(--line-height-width)) * 0.5em); }

HTML

<section class="Fv-section"> <div class="Fv"> <div class="Fv-img"> <div class="Fv-img-container"> <div class="Fv-title-wrapper"> <h2 class="Fv-title">TOEFL対策はEngress</h2> </div> <div class="Fv-title-wrapper-second"> <p class="Fv-txt-wrapper">日本へのTOEFL指導歴豊かな講師陣の<br> コーチング型TOEFLスクール </p> </div> <div class="Fv-outer"> <a href="#" style="text-decoration: none;"> <div class="Fv-outer-btn"><p>資料請求</p></div> </a> </div> <div class="contact-link-second"> <a class="contact-link" href="#"> <p class="contact-link-second">お問い合わせ</p> </a> </div> </div> </div> </div> </section>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

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

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

recal

2022/01/23 15:27

・完成図が確認できない ・取り組んでいるというリンク先に記載されている:before:afterも使っていない ・質問文に出てくるcalc()も登場しない 何をどう判断すればいいのでしょう?
2232

2022/01/24 00:57

1,この質問は、ウェブサイトにあるの記事のやり方を質問しているもので、見本は必要ありません、 2. .Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper::before { .Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper::after { 使い方があっているのかは、分かりませんが、使っています。使い方が違っているのでしょうか? 3.リンク先の質問の部分にcalc()が使われていますご確認ください。
Lhankor_Mhy

2022/01/24 02:55

> この質問は、ウェブサイトにあるの記事のやり方を質問しているもので、見本は必要ありません どうなって欲しいのかは、かなりわかりにくかったですよ。 「必要ない」と切り捨てるのも一つの考え方ですが、回答をしようとする人に意図が伝わっていない(伝わりにくい)という事実は事実としてあるので、改善をされればより回答が得られやすいのではないでしょうか。 あくまで、いち意見ですので、そうしなくてはいけない、ということを申し上げているわけではないです。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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