Q&A
レスポンシブデザイン対応が必要な状況で、line-height が 30px 指定であるのに height を 30px にはできない理由がよく分からないのでもう少し詳しい説明が欲しいです。
実現したいこと
liの各項目の高さをline-heightで設定した(30px)にしたい。
発生している問題・分からないこと
liの箇条書きの項目の高さをline-heightで設定した値30pxにしたいが、検証ツールで見ると33pxになっている
(liの項目
)
対応方法として、絶対値height:30px指定はレスポンシブデザインの観点から採用できない。
また、「liにflexboxを適用する」、「グリッドレイアウトで表示する」の2つは採用できない。
理由はli::makerを使ってマーカー(・)を実装するように言われているため、上記2つだとdisplay:list-itemではなくなり、独自マーカー(<span>・</span>など)を使う必要が出てくるため。
該当のソースコード
HTML
1<ul class="list-box"> 2 <li class="list-item likes-color">スポーツ観戦</li> 3 <li class="list-item likes-color">読書</li> 4 <li class="list-item likes-color">アウトドア</li> 5</ul>
CSS
1.list-box { 2 list-style-position: inside; 3 padding-left: 20px; 4 padding-top: 20px; 5 padding-bottom: 20px; 6} 7 8.list-item { 9 font-size: 16px; 10 line-height: 30px; 11 font-family: "Noto Sans JP"; 12} 13 14.likes-color { 15 color: #FEFFC7; 16}
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
フォントの余白アセンダ、ディセンダがあるためこれが理由ではないかと推測した。そのためCSSにoverflow: hidden;を設定したが基準となるheightを設定していなかったため、意味がなかった。
補足
特になし
コメントありがとうございます。
絶対値指定のheight 30pxにしたところ、ウインドウ幅によっては、全体のlist-boxの高さが正しい値でなくなったため、
また本実装は提出課題でして、「上記の要因としての絶対値指定のheight:30px;」を修正するように言われたためです。
そもそもliの項目はなぜ33pxになっているのでしょうか？ご教示願えますと幸いです。
line-heightはフォントの高さ(サイズ)の指定であって、それを収めるコンテナの高さを正確に調整することはできないということです。
なるほど。課題でそのように解決すると手段が決まっている状況というわけですね。
となると、提示されたコードを手元で表示すると 30px になっていて問題自体再現していませんでした。
ので、質問に書かれていない他のコードか環境の違いが原因だと思います。
ご提示のコードを試してみましたが、30pxでした。もしかすると、ブラウザやOSでズームレベルを設定しているのかもしれません。
>tamotoさん
コメントにあるように他コードが原因でした。問題の切り分けができ、助かりました。
Lhankor_Mhyさんの仰っていたように
li::markerを独自実装しており、それとの高さ合わせが原因となっていました。コメント、対応ありがとうございました。
回答2件
0
ベストアンサー
問題が再現しませんでしたが、もしかするとtext-boxを使うといいのかもしれません。
text-box-trim - CSS: カスケーディングスタイルシート | MDN
ブラウザ対応には注意が必要です。
追記
当方のFirefox環境で試したところ31pxになりました。::marker {line-height: 1;}などとすると解消できました。なんとなくですが、垂直ぞろえの問題であるように感じました。
投稿2025/07/03 23:50
編集2025/07/04 01:05総合スコア37488
ご指摘にあるようにli::markerとの垂直揃えが問題でした！
li::markerを独自実装しており、
li::maker { line-height: 1; }にすると高さが30pxとなり解消しました、ありがとうございます。
極端なフォントを使うとfont-sizeがline-heightより小さくても結局コンテナの高さを押し広げるみたいですが大丈夫でしょうか？
今回のNoto Sans JPだとfont-sizeを26pxあたりから高さが30pxを超えてくるようです
> 極端なフォントを使うとfont-sizeがline-heightより小さくても結局コンテナの高さを押し広げる
コンテナ、というのが .list-item のことであるなら、大丈夫だと思います。行ボックスの高さはline-height の方が優先されると思います。
https://jsfiddle.net/Lhankor_Mhy/paLy0ufd/
今回の現象はこのあたりの、アセンダーやディセンダー、ハーフレディングのずれによって、行ボックスがline-heightよりも高くなってしまう話だと思います。
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#vertical-align-one-property-rule-them-all
もちろん、font-size が大きくなってくると、::marker {line-height: 1;}でもずれが出てくる場合があると思いますので、その場合には検討が必要かと。
---
たぶん、根本的な解決は、::marker { font-family: "Noto Sans JP"; } なんでしょうね、おそらくは。
あ、行ボックスのサイズが変わることを心配しているのではなくて、固定値の行高さでは文字のグリフが行ボックス（や、インラインレベルブロック）からはみ出すのでは、というご心配をされているのでしょうか。それであれば誤読いたしました。失礼しました。
失礼しました。確認してみたらchrome(edge)ではheightが正しく反映されるみたいですねfirefoxではinline-heightとheightの値に誤差がでるようです
firefox で誤差が出るのは、おそらくこれが原因です。
https://danburzo.ro/notes/moz-bullet-font/
0
あわせて「height: 30px;」を設定してください
投稿2025/07/03 10:45
総合スコア117930
ご回答ありがとうございます。本文に書きましたが、レスポンシブデザイン対応の観点から「height: 30px」の絶対値指定はできない用件となっています。
フォントの種類によってメトリクスが異なるため、たまたまご指定フォントではline-heightでは高さを想定通りに設定することはできないのでしょう。フォントを変えるかフォントに任せて諦めるかheightで調整するかが現実的です
>yamabejpさん
ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。
フォントとline-heightの関係など勉強になりました。ありがとうございました。
あなたの回答
tips
プレビュー
