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

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

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

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

HTML5

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

Q&A

解決済

2回答

548閲覧

文字に下線をいれたいです。

hanayammmm

総合スコア9

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2020/03/11 14:56

前提・実現したいこと

h2で囲んでいる(class="title")「このテキスト」に文字と同じ長さの下線を入れたいです。
下線は、文字より10px余白を空けてつけたいのです。

html

<div class="section-about_right"> <div class="section-txt-list"> <div class="section-txt"> <div> <h2 class="title">このテキスト</h2> </div> <p>あああああああああああああああ</p> </div> </div> <img src="images/foodpht_eat.jpg" alt="あああああ"> </div> <a href="#">ああああああああ</a> </section>

css

.title{ display: inline-block; font-family: ryo-display-plusn, serif; font-size: 3.2rem; padding-bottom: 10px; border-bottom: solid 1.6px #444444; letter-spacing: 0.1em; } .section-txt-list{ min-width: 400px; position: relative; } .section-txt{ line-height: 2; padding-left: 16px; position: absolute; top: 50%; transform: translate3d(0,-50%,0); } .section-about_right{ display: flex; justify-content: center; }

試したこと

この内容だとブロックレベル要素のように文字周りに余白ができてしまい、下線とテキストの間の余白が離れすぎるのです。

ちなみに、画像と文字を横並びにするためにdisplay: flex;をつけています。これが関係しているのでしょうか…?

どうしたら、インライン要素のようになるのでしょうか。

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

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

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

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

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

guest

回答2

0

ベストアンサー

親要素で line-height: 2; と設定しているので、行の高さがフォントの高さの2倍になっているからです。line-heightは子孫要素に継承します。

下記のように line-height: 1; を追加すれば下線は近づきます。
ただし、行高が変化した分レイアウトも変化しますので、そこは padding や margin で調整してください。

css

1.title{ 2 display: inline-block; 3 font-family: ryo-display-plusn, serif; 4 font-size: 3.2rem; 5 padding-bottom: 10px; 6 border-bottom: solid 1.6px #444444; 7 letter-spacing: 0.1em; 8 line-height: 1; 9}

別案として、border-bottom で下線を引くのではなく疑似要素で下線を引く方法もあります。
これだと、もう少し自由度が高いです。

投稿2020/03/11 16:59

hatena19

総合スコア34075

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

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

hanayammmm

2020/03/12 11:31

なるほど!うっかりでした… ありがとうございます。
guest

0

text-underline-offset プロパティで下線までの距離を指定できます。折り返しがあると線が重なってしまうので、line-height を大きくとったほうがいいかもしれません。

CSS

1.title { 2 text-decoration: underline 1.6px #444; 3 text-underline-offset: 10px; 4 line-height: calc(1.6em + 10px); 5} 6 7@supports not (text-underline-offset: 10px) { 8 .title { 9 width: max-content; 10 white-space: nowrap; 11 border-bottom: 1.6px solid #444; 12 } 13}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset
Firefox/Safari

Chrome のような未対応ブラウザに対しては幅を指定すればいいでしょう。

投稿2020/03/12 03:08

x_x

総合スコア13749

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

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

hanayammmm

2020/03/12 11:33

ありがとうございます。まだ学校で習ってない内容で、難しかったので他の方をベストアンサーに選びました。今度はこちらで挑戦してみようと思います!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問